// 使用原生js 封装ajax
// 兼容xhr对象
function createXHR(){
if(typeof XMLHttpRequest != "undefined"){ // 非IE6浏览器
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){ // IE6浏览器
var version = [
"MSXML2.XMLHttp.6.0",
"MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp",
];
for(var i = 0; i < version.length; i++){
try{
return new ActiveXObject(version[i]);
}catch(e){
//跳过
}
}
}else{
throw new Error("您的系统或浏览器不支持XHR对象!");
}
}
// 转义字符
function params(data){
var arr = [];
for(var i in data){
arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
}
return arr.join("&");
}
// 封装ajax
function ga_ajax(obj){
var xhr = createXHR();
obj.url = obj.url + "?rand=" + Math.random(); // 清除缓存
obj.data = params(obj.data); // 转义字符串
if(obj.method === "get"){ // 判断使用的是否是get方式发送
obj.url += obj.url.indexOf("?") == "-1" ? "?" + obj.data : "&" + obj.data;
}
// 异步
if(obj.async === true){
// 异步的时候需要触发onreadystatechange事件
xhr.onreadystatechange = function(){
// 执行完成
if(xhr.readyState == 4){
callBack();
}
}
}
xhr.open(obj.method,obj.url,obj.async); // false是同步 true是异步 // "demo.php?rand="+Math.random()+"&name=ga&ga",
if(obj.method === "post"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(obj.data);
}else{
xhr.send(null);
}
// xhr.abort(); // 取消异步请求
// 同步
if(obj.async === false){
callBack();
}
// 返回数据
function callBack(){
// 判断是否返回正确
if(xhr.status == 200){
obj.success(xhr.responseText);
}else{
obj.Error("获取数据失败,错误代号为:"+xhr.status+"错误信息为:"+xhr.statusText);
}
}
} var html = document.getElementsByTagName("html")[0];
html.onclick = function(){
ga_ajax({
"method" : "post",
"url" : "dem0o.php",
"data" : {
"name" : "gaga",
"age" : 10000000,
"num" : "12346&598"
},
"success" : function(data){
alert(data);
},
"Error" : function(text){
alert(text);
},
"async" : false
});
}

使用原生js写ajax的更多相关文章

  1. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  2. 原生JS写Ajax的请求函数

    一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

  3. 原生js写ajax请求(复习)

    今天本地想测试一个接口,不想用框架想用js快速完成,突然发现,我居然忘了这个最基本的代码.好吧,只能复习一波. 在框架泛滥的今天,用惯$.ajax(),axios,superAgent等框架的你们,还 ...

  4. 用原生JavaScript写AJAX

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.听对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  5. 原生JS写的ajax函数

    参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax ...

  6. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  7. 原生js中用Ajax进行get传参

    原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  8. 原生JS封装ajax方法

    http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...

  9. 原生js实现ajax与jquery的ajax库,及json

    这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...

随机推荐

  1. windows服务部署与卸载

    同事问到windows service的东东,现在整理一下,用c#如何创建一个windows service,以及如何调试.部署.卸载. 一.创建windows service 1. 打开VS2008 ...

  2. 五、CCNode

    本将主要介绍下CCNode这个类,CCNode是所有节点的基类,其中包括我们常用的CCScene(场景).CCLayer(图层).CCSprite(精灵)等,它是一个不能够可视化显示的抽象类,只是用来 ...

  3. ‘Cordova/CDVViewController.h’ file not found Xcode 7.1

    Add this line to your Build Settings -> Header Search Paths: "$(OBJROOT)/UninstalledProducts ...

  4. Oracle PL/SQL高级应用 视图 同义词 序列

    视图: 视图叫虚表,即是在哪个表上建立的视图,将那个表的数据用一条查询sql语句查出的数据展现在该视图中,对这个视图操作就是只能对该视图中的数据进行操作,该操作也会保存在建立的表中.可以理解为表上表, ...

  5. 总结 group by 的用法

    今天用实例总结一下group by的用法. 归纳一下:group by:ALL ,Cube,RollUP,Compute,Compute by 创建数据脚本 Create Table SalesInf ...

  6. telnet命令使用示例

    导读 telnet命令通常用来远程登录.telnet程序是基于TELNET协议的远程登录客户端程序.Telnet协议是TCP/IP协议族中的一员,是Internet远程登录服务的标准协议和主要方式.它 ...

  7. ZOJ 1113 u Calculate e

    原题链接 题目大意:迭代求自然常数e. 解法:没什么好说的,注意数据类型和输出格式. 参考代码: #include<stdio.h> #include<math.h> int ...

  8. soapUI 在多个测试套件 testsuite 里,多个testcase里传值如何实现

        1.首先 要添加一个全局 自定义变量 Custom Properties   2.用transfer property 将取来的值 放入到变量 getToken 里   3.在另一个testc ...

  9. JavaScript 遗漏知识再整理;错误处理,类型转换以及获取当前时间、年份、月份、日期;

    1.JavaScript 错误处理 Throw.Try 和 Catch try 语句测试代码块的错误. catch 语句处理错误. throw 语句创建自定义错误. JavaScript 错误 当 J ...

  10. 被IP代理网站屏蔽了,真是跪了

    被IP代理网站http://www.xicidaili.com/nn/屏蔽了,真是跪了 T T