详解XMLHttpRequest（一）同步请求和异步请求

详解XMLHttpRequest（一）同步请求和异步请求

XMLHttpRequest 让发送一个HTTP请求变得非常容易。你只需要简单的创建一个请求对象实例，打开一个URL，然后发送这个请求。当传输完毕后，结果的HTTP状态以及返回的响应内容也可以从请求对象中获取。

通过XMLHttpRequest生成的请求可以有两种方式来获取数据，异步模式或同步模式。请求的类型是由这个XMLHttpRequest对象的open()方法的第三个参数async的值决定的。如果该参数的值为false，则该XMLHttpRequest请求以同步模式进行，否则该过程将以异步模式完成。

两种通信模式：同步和异步请求：

同步请求

 主线程中的同步请求会阻塞页面，由于对用户体验的糟糕效果，部分最新浏览器在主线程上的同步请求已经被弃用。在极少数情况下,使用同步模式的XMLHttpRequests会比使用异步模式更适合。

1.在Worker中使用XMLHttpRequest时,同步请求比异步请求更适合。

 主页中代码:

myFile.txt ( XMLHttpRequest对象同步请求的文件):

Hello World!!

包含了Worker代码：myTask.js

self.onmessage = function (oEvent) {

if (oEvent.data === "Hello") {

var oReq = new XMLHttpRequest();

oReq.open("GET", "myFile.txt", false); // 同步请求

oReq.send(null);

self.postMessage(oReq.responseText);

}

};

注意: 由于使用了Worker,所以该请求实际上也是异步的.

 可以使用类似的方法,让脚本在后台与服务器交互,预加载某些内容.查看使用web workers了解更多详情

2.不得不使用同步请求的情况

 在少数情况下,只能使用同步模式的XMLHttpRequest请求.比如在 window.onunload和window.onbeforeunload 事件处理函数中。在页面unload事件处理函数中使用异步的XMLHttpRequest会引发这样的问题:当响应返回之后,页面已经不复存在,所有变量和回调函数也已经销毁.结果只能引起一个错误 ,“函数未定义”。解决办法是在这里使用同步模式的请求,这样的话,当请求完成之前,页面不会被关闭.

window.onbeforeunload = function () {

var oReq = new XMLHttpRequest();

oReq.open("GET", "logout.php?nick=" + escape(myName), false); // 同步请求

oReq.send(null);

if (oReq.responseText.trim() !== "已退出"); { // "已退出"是返回的数据

return "退出失败,您想手动执行退出吗?";

}

};

异步请求

 使用异步模式的话,当数据完全请求回来以后,会执行一个指定的回调函数, 在执行请求的同时,浏览器可以正常的执行其他事务的处理。

3.例子: 创建一个标准的方法来读取外部文件

 在一些需求情况下,必须读取多个外部文件. 这是一个标准的函数. 该函数使用XMLHttpRequest对象进行异步请求.而且可以为每个文件读取完成后指定不同的回调函数.

function loadFile (sURL, timeout, fCallback /*, 传入参数1, 传入参数2, 等 */) {

var aPassArgs = Array.prototype.slice.call(arguments, 3), oReq = new XMLHttpRequest();

oReq.ontimeout = function() {

console.log("请求超时.");

}

oReq.onreadystatechange = function() {

if (oReq.readyState === 4) {

if (oReq.status === 200) {

fCallback.apply(oReq, aPassArgs);

} else {

console.log("Error", oReq.statusText);

}

}

};

oReq.open("GET", sURL, true);

oReq.timeout = timeout;

oReq.send(null);

}

loadFile函数的用法:

function showMessage (sMsg) {

alert(sMsg + this.responseText);

}

loadFile("message.txt", 200, showMessage, "New message!\\n");

第1行定义一个函数,当文件读取完毕后,fCallback函数会以第3个参数以后的所有参数为自己的参数来被调用.

第3行使用一个超时设置,来避免你的代码为了等候读取请求的返回数据长时间执行，通过为XMLHttpRequest对象的timeout 属性赋值来指定

 第6行为onreadystatechange事件句柄指定了回调函数,函数在每次执行时,检查请求是否结束(请求状态为4),如果是的话,判断请求是否成功(HTTP状态吗是否为200),如果是的话,输出页面源码,如果请求出现了错误,输出错误信息.

 第15行指定第三个参数为true,表示该请求应该以异步模式执行.

4.例子: 使用异步请求,不使用闭包.

function switchXHRState() {

switch (this.readyState) {TqbshLNuN

case 0: console.log("还没调用open()方法."); break;

case 1: console.log("还没调用send()方法."); break;

case 2: console.log("已经调用send()方法,响应头和响应状态已经返回."); break;

case 3: console.log("下载中,已经得到部分响应实体."); break;

case 4: console.log("请求完成!"); this.callback.apply(this, this.arguments);

}

};

function loadFile (sURL, fCallback /*, 传入参数1, 传入参数2, 等 */) {

var oReq = new XMLHttpRequest();

oReq.callback = fCallback;

oReq.arguments = Array.prototype.slice.call(arguments, 2);

oReq.onreadystatechange = switchXHRState;

oReq.open("GET", sURL, true);

oReq.send(null);

}

使用 bind:

function switchXHRState(fCallback, aArguments) {

switch (this.readyState) {

case 0: console.log("还没调用open()方法."); break;

case 1: console.log("还没调用send()方法."TqbshLNuN); break;

case 2: console.log("已经调用send()方法,响应头和响应状态已经返回."); break;

case 3: console.log("下载中,已经得到部分响应实体."); break;

case 4: console.log("请求完成!"); fCallback.apply(this, aArguments);

}

};

function loadFile (sURL, fCallback /*, 传入参数1, 传入参数2, 等 */) {

var oReq = new XMLHttpRequest();

oReq.onreadystatechange = switchXHRState.bind(oReq, fCallback, Array.prototype.slice.call(arguments, 2));

oReq.open("GET", sURL, true);

oReq.send(null);

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。