执行步骤
1.1 xhr.open(method,url,isAsync);
注:这行代码只是在预备发送请求,而不是真正的发送请求。url可以使用相对或者绝对路径。
1.2 xhr.send(data);
注:即使不发送data,也要填写null,因为兼容性问题某些浏览器可能报错。
1.3 xhr.onreadystatuschange(); readystatus一共可以取得以下值:
0:未初始化,没有调用open()
1: 启动。调用open()
2: 发送。 调用send(),无返回的响应。
3: 接受。 接受返回的部分数据。
4: 完成。数据接收完成可以使用。
注意:该方法必须在xhr.open()之前调用,以保证正确运行。
代码实现
2.1 这里的代码考虑到IE低版本不支持XMLHttpRequest,如果不需要支持IE10以及以下版本就可以不用这么麻烦,直接使用XMLHttpRequest就可以了 。
2.2 另外注意open() 和setRequestHeader()以及send()三者的先后顺序。
2.3 至于get请求就容易多了,修改一下xhr.open()以及xhr.setRequestHeader()就可以了,其他的没什么变化。
function createXHR() {
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
} else if (typeof arguments.callee.activeXString !== "string") {
var vers= ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],i,len;
for (i=0,len=vers.length;i<vers;i++) {
try {
new ActiveXObject(vers[i]);
arguments.callee.activeXString = vers[i];
break;
}catch(err){
console.log(err);
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("No XHR object available");
}
}
function submitData() {
var xhr = createXHR();
xhr.onreadystatchange = function () {
if (xhr.readyStatus === 4){
if ((xhr.status >= 200 && xhr.status<300) || xhr.status === 304 ){
console.log(xhr.statusText);
} else {
console.log("request is failed:"+xhr.status);
}
}
}
xhr.open("post", url, true);
xhr.timeout = 1000; //设置超时时间
xhr.ontimeout = function () {
console.log("Request is timeout");
}
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form =new FormData();
xhr.send(JSON.stringify(form));
}
// 注意 open() 和setRequestHeader()以及send()三者的先后顺序。