原生js实现AJAX(二)
简易的AJAX请求
var u=window.u||{};
u.createXHR=function() {
var methods=[
function() {return new XMLHttpRequest();},
function() {return new ActiveXObject(Msxml2.XMLHTTP);},
function() {return new ActiveXObject(Microsoft.XMLHTTP);}
];
for(var i=0;i<3;i++) {
try {
methods[i]();
} catch(e) {
continue;
}
this.createXHR=methods[i];
return methods[i]();
}
throw new Error("没有找到XHR对象");
};
u.ajax=function(options) {
var method=options.method||'GET',
url=encodeURI(options.url),
success=options.success,
failed=options.failed,
data=options.data||null;
var xhr=u.createXHR();//创建XHR对象
xhr.open(method,url,true);//指定请求
xhr.onreadystatechange=function() {
if(xhr.readyState==4) {
if((xhr.status>=200&&xhr.status<300)||xhr.status==304) {
success(xhr.responseText);//执行成功的回调函数
xhr=null;
}
} else {
if(xhr.status!=200) {
failed(xhr.status);//执行失败的回调函数
}
}
}
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置Content-Type
xhr.send(data);正式发送请求
}
HTTP请求的各部分有指定顺序:请求方法和URL首先到达,然后是请求头,最后是请求主体。XMLHttpRequest实现通常直到调用send方法才开始启动网络。
setRequestHeader()方法的调用必须在调用open之后,但在调用send之前,否则它将抛出异常。
目前这段代码只能实现简单的AJAX请求,如GET方式发起请求,在url中携带参数或者使用POST方式,在data中包含请求主体,且必须为’find=pizz&&user=123’的格式才能被后台正常读取。