原生AJAX封装的简单实现
回归下原生js，网上看到的AJAX封装，遂拿来改改，不知还有何弊端，望指出！
varajaxHelper={
/*1.0浏览器兼容的方式创建异步对象*/
makeXHR:function(){
//声明异步对象变量
varxmlHttp=false;
//声明扩展名
varxmlHttpObj=["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","MSXML.XMLHttp"];
//判断浏览器是否支持XMLHttpRequest，如果支持，则是新式浏览器，可以直接创建
if(window.XMLHttpRequest){
xmlHttp=newXMLHttpRequest();
}
//否则，只能循环遍历老式浏览器异步对象名，尝试创建，知道创建成功为止
elseif(window.ActiveXObject){
for(i=0;i<xmlHttpObj.length;i++){
xmlHttp=newActiveXObject(xmlHttpObj[i]);
if(xmlHttp){
break;
}
}
}
//判断异步对象是否创建成功，如果成功，则返回异步对象，否则返回false
returnxmlHttp?xmlHttp:false;
},
/*2.0发送Ajax请求*/
doAjax:function(method,url,data,isAyn,callback,type){
method=method.toLowerCase();
//2.1创建异步对象
varxhr=this.makeXHR();
//2.2设置请求参数（如果是get，则带url参数，如果不是，则不带）
xhr.open(method,url+(method=="get"?"?"+data:""),isAyn);
//2.3根据请求谓词(get/post)，添加不同的请求头
if(method=="get"){
xhr.setRequestHeader("If-Modified-Since",0);
}else{
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
//2.4设置回调函数
xhr.onreadystatechange=function(){
//如果接受完毕服务器发回的响应报文
if(xhr.readyState==4){
//判断状态码是否正常
if(xhr.status==200){
if(type.toLowerCase()=="json"){
varret={};
try{
if(typeofJSON!="undefined"){
ret=JSON.parse(xhr.responseText);
}else{
//IE8以下不支持JSON
ret=newFunction("return"+xhr.responseText)();
}
callback(ret);
}catch(e){
console.log(e.message);
callback(false);
}
}else{
//直接返回文本
callback(xhr.responseText);
}
}else{
console.log("AJAXStatusCode:"+xhr.status);
callback(false);
}
}
};
//2.5发送（如果是post，则传参数，否则不传）
xhr.send(method!="get"?data:null);
},
/*3.0直接发送Post请求*/
doPost:function(url,data,isAyn,callback,type){
this.doAjax("post",url,data,isAyn,callback,type);
},
/*4.0直接发送Get请求*/
doGet:function(url,data,isAyn,callback,type){
this.doAjax("get",url,data,isAyn,callback,type);
}
};
假设一个需求，后端要求传入两个数字n1、n2，然后返回总和。
当其中一个参数为空或者不是数字时，返回：{"status":"0","msg":"参数有误！"}
当正确的时候，返回：{"status":"1","sum":"//n1加n2的和"}
后端的代码就不贴出来了。
前端调用：
document.getElementById("btnSubmit").onclick=function(){
ajaxHelper.doPost("后端url","n1=10&n2=25",true,function(ret){
if(!ret){return;}
if(ret.status!=1){
alert(ret.msg);
return;
}
varn=ret.sum;
vars=ret.status;
},"json");
};
以上这篇原生AJAX封装的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。