首页 > 开发 > Javascript > 正文

详解XMLHttpRequest(一)同步请求和异步请求

2020-02-27 06:07:05
字体:
来源:转载
供稿:网友

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

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

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

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

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

 <script type="text/javascript"> var oMyWorker = new Worker("myTask.js");  oMyWorker.onmessage = function(oEvent) {   alert("Worker said: " + oEvent.data); }; oMyWorker.postMessage("Hello");</script>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 "退出失败,您想手动执行退出吗?"; }}; 

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表