利用原生js写ajax实例

// 使用原生js 封装ajax

// 兼容xhr对象

functioncreateXHR(){

if(typeofXMLHttpRequest !="undefined"){// 非IE6浏览器

returnnewXMLHttpRequest();

}elseif(typeofActiveXObject !="undefined"){ // IE6浏览器

varversion = [

"MSXML2.XMLHttp.6.0",

"MSXML2.XMLHttp.3.0",

"MSXML2.XMLHttp",

];

for(vari = 0; i

try{

returnnewActiveXObject(version[i]);

}catch(e){

//跳过

}

}

}else{

thrownewError("您的系统或浏览器不支持XHR对象！");

}

}

// 转义字符

functionparams(data){

vararr = [];

for(variindata){

arr.push(encodeURIComponent(i) +"="+ encodeURIComponent(data[i]));

}

returnarr.join("&");

}

// 封装ajax

functionga_ajax(obj){

varxhr = 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();

}

// 返回数据

functioncallBack(){

// 判断是否返回正确

if(xhr.status == 200){

obj.success(xhr.responseText);

}else{

obj.Error("获取数据失败，错误代号为："+xhr.status+"错误信息为："+xhr.statusText);

}

}

}

varhtml = document.getElementsByTagName("html")[0];

html.onclick =function(){

ga_ajax({

"method":"post",

"url":"demo.php",

"data": {

"name":"gao",

"age": 100,

"num":"12346&598"

},

"success":function(data){

alert(data);

},

"Error":function(text){

alert(text);

},

"async":false

});

}