1,创建Ajax的核心对象XMLHttpRequest
因为浏览器之间的不兼容,IE7之前的版本并没有原生的XMLHttpRequest对象却实现为ActiveX对象。
互联网及各种书籍中有着多种创建方式,有的复杂很多行代码,有的则简洁很少代码。当然复杂的考虑的情形更多一些。如下几乎将IE中所有的情况都考虑到了
1
|
var
xhr = window.XMLHttpRequest ?new
XMLHttpRequest() :new
ActiveXObject('Microsoft.XMLHTTP');
|
2,发送请求
xhr.open
xhr.send
|
3,处理响应
xhr.onreadystatechange =function(){
if(xhr.readyState == 4){
if(xhr.status == 200){//当然你可以把200~300之间或304的都理解成响应成功
//callback
}
}
}
|
完整代码如下
function ajax(method,url,data,async,hander200,loading,hander404,hander500){ var request = null; if(window.XMLHttpRequest){ request = new XMLHttpRequest(); }else if(window.ActiveXObject){ request = new ActiveXObject("Microsoft.XMLHTTP"); } request.onreadystatechange=function(){ if(4==request.readyState){ if(200==request.status){ if(hander200){ hander200(request); } }else if(404==request.status){ if(hander404){ hander404(); } }else if(500==request.status){ if(hander500){ hander500(); } } }else{ if(loading){ loading(); } } } if("get"==method.toLowerCase()){ if(data==null||data==""){ request.open("get",async); }else{ request.open("get",url+"?"+data,async); } request.send(null); }else if("post"==method.toLowerCase()){ request.open("post",async); request.setRequestHeader("content-Type","application/x-www-form-urlencoded"); request.send(data); } }