Jquery揭秘系列:ajax原生js实现详解(推荐)
为了功能的明确和清晰，我们把这个ajax代码分为5个部分：
•对象的创建
•onreadystatechange句柄处理
•参数拼接
•Get功能实现
•Post功能实现
1.对象的创建：
首先创建用作XMLHttpRequest对象的XMLHttp变量。把它的值设置为null。
按照web标准创建对象(Mozilla,Opera以及Safari)：XMLHttp=newXMLHttpRequest()
按照微软的方式创建对象，在InternetExplorer6及更高的版本可用：XMLHttp=newActiveXObject("Msxml2.XMLHTTP")
如果捕获错误，则尝试更老的方法(InternetExplorer5.5)：XMLHttp=newActiveXObject("Microsoft.XMLHTTP")
varxhrFactory=function(){
this.init.apply(this,arguments);
}
xhrFactory.prototype={
init:function(){
this.xhr=this.create();
},
create:function(){
varxhr=null;
try{
if(window.XMLHttpRequest){
xhr=newXMLHttpRequest();
}
elseif(window.ActiveXObject){
xhr=newActiveXObject("Msxml2.Xmlhttp");
}
}
catch(err){
xhr=newActiveXObject("Microsoft.Xmlhttp");
}
returnxhr;
}
}
2.onreadystatechange句柄:
readystate:function(timeout,callback){
this.xhr.onreadystatechange=function(){
if(this.readyState==4&&this.status==200){
callback(eval("("+this.responseText+")"));
}
else{
setTimeout(function(){
this.xhr.abort();
},!timeout?15000:timeout);
}
}
}
这里面要说一下readyState和status属性。
readyState:
1.创建MLHTTP对象
2.打开与服务器的连接
3.发送指令
4.等待处理请求结果 。
status:
200.请求成功
400.请求错误。。。
还有很多值，这里就不一个个说了。
timeout参数是请求过期时间
callback参数，回调对返回数据做了处理，转换成对象。
3.参数拼接
para:function(data){
vardatastr="";
if(data&&Object.prototype.toString.call(data)=="[objectObject]"){
for(variindata){
for(vari=0;i<length;i++){
datastr+=i+"="+data[i]+"&";
}
}
}
returndatastr;
}
这里是将传入的对象参数拼接成字符窜，用于ajax请求时发送参数。
4.Get功能实现：
get:function(url,data,callback,async,timeout){
this.readystate(timeout,callback);
varnewurl=url;
vardatastr=this.para(data);
newurl=url+"?"+datastr;
this.xhr.open("get",newurl,!async?true:async);
this.xhr.send(null);
}
get请求，发送的参数是直接在url上拼接的,而不是在send里面发送，而post方式参数则是在send里面发送。
5.Post功能实现
post:function(url,data,callback,async,timeout){
this.readystate(timeout,callback);
varnewurl=url;
vardatastr=this.para(data);
this.xhr.open("post",newurl,!async?true:async);
this.xhr.setRequestHeader("content-type","x-www-form-urlencoded");
this.xhr.send(!datastr?null:datastr);
}
post这里面多了一段代码：this.xhr.setRequestHeader("content-type","x-www-form-urlencoded");
这段代码其实是说明将整个发送内容作为一个整体进行编码，get则是单个参数进行编码拼接，这也是post和get的区别。
调用方式如下：
varxhr=newxhrFactory();
xhr.post("test.ashx",null,function(data){
alert(data);
});
以上这篇Jquery揭秘系列:ajax原生js实现详解(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。