XMLHttpRequest
支持同步和异步两种通信模式.
XMLHttpRequests,
原因是,网络通信本来就是异步执行的,如果使用同步请求,很有可能会造成多种内存与事件泄漏的情况.在Firefox 3之前的版本中, 同步模式的XMLHttpRequest
请求会阻塞用户界面. 为了能让用户有机会手动结束掉这个长时间执行的请求, Firefox 3改善了这一行为.
同步请求
在极少数情况下,使用同步模式的XMLHttpRequests会比使用异步模式更适合.
例子: HTTP 同步请求
这个例子演示了如何进行一个简单的同步请求.
var request = new XMLHttpRequest(); request.open('GET', 'https://www.mozilla.org/', false); request.send(null); if (request.status === 200) { console.log(request.responseText); }
第一行实例化一个XMLHttpRequest
对象.第二行使用该对象打开一个HTTP请求,并指定使用HTTP GET
方法来获取Mozilla.org主页内容,操作模式为同步.
第三行发送这个请求.参数为null
表示GET
请求不需要请求实体.
第四行为请求结束之后,检查请求状态码.如果状态码为200, 表示该请求成功,请求到的页面源文件会输出到控制台上.
例子: 在 Worker
中使用HTTP 同步请求
在Worker
中使用XMLHttpRequest
时,同步请求比异步请求更适合.
example.html
(主页):
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>MDN Example</title> <script type="text/javascript"> var oMyWorker = new Worker("myTask.js"); oMyWorker.onmessage = function(oEvent) { alert("Worker said: " + oEvent.data); }; oMyWorker.postMessage("Hello"); </script> </head> <body></body> </html>
myFile.txt
( XMLHttpRequest
对象同步请求的文件):
Hello World!!
myTask.js
(包含了Worker
代码):
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了解更多详情.
不得不使用同步请求的情况
在少数情况下,只能使用同步模式的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 "退出失败,您想手动执行退出吗?"; } };
异步请求
如果你在扩展中使用XMLHttpRequest
,则你应该使用异步模式的请求.使用异步模式的话,当数据完全请求回来以后,会执行一个指定的回调函数, 在执行请求的同时,浏览器会正常的执行其他事务的处理.
例子: 在控制台输出页面源文件
这个例子演示了如何进行一个简单的异步请求.
var oReq = new XMLHttpRequest(); oReq.open("GET", "https://www.mozilla.org/", true); oReq.onreadystatechange = function (oEvent) { if (oReq.readyState === 4) { if (oReq.status === 200) { console.log(oReq.responseText); } else { console.log("Error", oReq.statusText); } } }; oReq.send(null);
第二行中指定第三个参数为true,表示该请求
应该以异步模式执行.
第三行为onreadystatechange
事件句柄指定了回调函数,函数在每次执行时,检查请求是否结束(请求状态为4),如果是的话,判断请求是否成功(HTTP状态吗是否为200),如果是的话,输出页面源码,如果请求出现了错误,输出错误信息.
第十二行发送该请求.onreadystatechange事件句柄指定的回调函数会在每次请求状态发生改变时执行.
例子: 创建一个标准的方法来读取外部文件
在一些需求情况下,必须读取多个外部文件. 这是一个标准的函数. 该函数使用XMLHttpRequest
对象进行异步请求.而且可以为每个文件读取完成后指定不同的回调函数.
function loadFile (sURL, fCallback /*, 传入参数1, 传入参数2, 等 */) { var aPassArgs = Array.prototype.slice.call(arguments, 2), oReq = new XMLHttpRequest(); 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.send(null); }
loadFile函数的用法:
function showMessage (sMsg) { alert(sMsg + this.responseText); } loadFile("message.txt", showMessage, "New message!\n");
第一行定义一个函数,当文件读取完毕后,fCallback函数会以第三个参数以后的所有参数为自己的参数来被调用.
第三行为onreadystatechange
事件句柄指定了回调函数,函数在每次执行时,检查请求是否结束(请求状态为4),如果是的话,判断请求是否成功(HTTP状态吗是否为200),如果是的话,输出页面源码,如果请求出现了错误,输出错误信息.
第十二行指定第三个参数为true,表示该请求
应该以异步模式执行.
第十三行发送该请求.
例子: 使用超时
你可以使用一个超时设置,来避免你的代码为了等候读取请求的返回数据长时间执行.超时毫秒数可以通过为XMLHttpRequest对象的
timeout
属性赋值来指定:
function loadFile (sURL, timeout, fCallback /*, 传入参数1, 传入参数2, 等 */) { var aPassArgs = Array.prototype.slice.call(arguments, 2), 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); }
你还可以为timeout事件的
ontimeout
事件句柄指定事件处理函数.
loadFile函数的用法:
function showMessage (sMsg) { alert(sMsg + this.responseText); } loadFile("message.txt", 200, showMessage, "New message!\n");
如上,我们指定的超时时间为200 ms.
timeout
属性添加于Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9).
例子: 使用异步请求,不使用闭包.
function switchXHRState() { switch (this.readyState) { 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()方法."); 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); }