详解XMLHttpRequest(一)同步请求和异步请求
XMLHttpRequest让发送一个HTTP请求变得非常容易。你只需要简单的创建一个请求对象实例,打开一个URL,然后发送这个请求。当传输完毕后,结果的HTTP状态以及返回的响应内容也可以从请求对象中获取。
通过XMLHttpRequest生成的请求可以有两种方式来获取数据,异步模式或同步模式。请求的类型是由这个XMLHttpRequest对象的open()方法的第三个参数async的值决定的。如果该参数的值为false,则该XMLHttpRequest请求以同步模式进行,否则该过程将以异步模式完成。
两种通信模式:同步和异步请求:
同步请求
主线程中的同步请求会阻塞页面,由于对用户体验的糟糕效果,部分最新浏览器在主线程上的同步请求已经被弃用。在极少数情况下,使用同步模式的XMLHttpRequests会比使用异步模式更适合。
1.在Worker中使用XMLHttpRequest时,同步请求比异步请求更适合。
主页中代码:
<scripttype="text/javascript"> varoMyWorker=newWorker("myTask.js"); oMyWorker.onmessage=function(oEvent){ alert("Workersaid:"+oEvent.data); }; oMyWorker.postMessage("Hello"); </script> myFile.txt(XMLHttpRequest对象同步请求的文件): HelloWorld!!
包含了Worker代码:myTask.js
self.onmessage=function(oEvent){ if(oEvent.data==="Hello"){ varoReq=newXMLHttpRequest(); oReq.open("GET","myFile.txt",false);//同步请求 oReq.send(null); self.postMessage(oReq.responseText); } };
注意:由于使用了Worker,所以该请求实际上也是异步的.
可以使用类似的方法,让脚本在后台与服务器交互,预加载某些内容.查看使用webworkers了解更多详情
2.不得不使用同步请求的情况
在少数情况下,只能使用同步模式的XMLHttpRequest请求.比如在window.onunload和window.onbeforeunload事件处理函数中。在页面unload事件处理函数中使用异步的XMLHttpRequest会引发这样的问题:当响应返回之后,页面已经不复存在,所有变量和回调函数也已经销毁.结果只能引起一个错误,“函数未定义”。解决办法是在这里使用同步模式的请求,这样的话,当请求完成之前,页面不会被关闭.
window.onbeforeunload=function(){ varoReq=newXMLHttpRequest(); oReq.open("GET","logout.php?nick="+escape(myName),false);//同步请求 oReq.send(null); if(oReq.responseText.trim()!=="已退出");{//"已退出"是返回的数据 return"退出失败,您想手动执行退出吗?"; } };
异步请求
使用异步模式的话,当数据完全请求回来以后,会执行一个指定的回调函数,在执行请求的同时,浏览器可以正常的执行其他事务的处理。
3.例子:创建一个标准的方法来读取外部文件
在一些需求情况下,必须读取多个外部文件.这是一个标准的函数.该函数使用XMLHttpRequest对象进行异步请求.而且可以为每个文件读取完成后指定不同的回调函数.
functionloadFile(sURL,timeout,fCallback/*,传入参数1,传入参数2,等*/){ varaPassArgs=Array.prototype.slice.call(arguments,3),oReq=newXMLHttpRequest(); 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函数的用法:
functionshowMessage(sMsg){ alert(sMsg+this.responseText); } loadFile("message.txt",200,showMessage,"Newmessage!\\n");
第1行定义一个函数,当文件读取完毕后,fCallback函数会以第3个参数以后的所有参数为自己的参数来被调用.
第3行使用一个超时设置,来避免你的代码为了等候读取请求的返回数据长时间执行,通过为XMLHttpRequest对象的timeout属性赋值来指定
第6行为onreadystatechange事件句柄指定了回调函数,函数在每次执行时,检查请求是否结束(请求状态为4),如果是的话,判断请求是否成功(HTTP状态吗是否为200),如果是的话,输出页面源码,如果请求出现了错误,输出错误信息.
第15行指定第三个参数为true,表示该请求应该以异步模式执行.
4.例子:使用异步请求,不使用闭包.
functionswitchXHRState(){ switch(this.readyState){ case0:console.log("还没调用open()方法.");break; case1:console.log("还没调用send()方法.");break; case2:console.log("已经调用send()方法,响应头和响应状态已经返回.");break; case3:console.log("下载中,已经得到部分响应实体.");break; case4:console.log("请求完成!");this.callback.apply(this,this.arguments); } }; functionloadFile(sURL,fCallback/*,传入参数1,传入参数2,等*/){ varoReq=newXMLHttpRequest(); oReq.callback=fCallback; oReq.arguments=Array.prototype.slice.call(arguments,2); oReq.onreadystatechange=switchXHRState; oReq.open("GET",sURL,true); oReq.send(null); }
使用bind:
functionswitchXHRState(fCallback,aArguments){ switch(this.readyState){ case0:console.log("还没调用open()方法.");break; case1:console.log("还没调用send()方法.");break; case2:console.log("已经调用send()方法,响应头和响应状态已经返回.");break; case3:console.log("下载中,已经得到部分响应实体.");break; case4:console.log("请求完成!");fCallback.apply(this,aArguments); } }; functionloadFile(sURL,fCallback/*,传入参数1,传入参数2,等*/){ varoReq=newXMLHttpRequest(); oReq.onreadystatechange=switchXHRState.bind(oReq,fCallback,Array.prototype.slice.call(arguments,2)); oReq.open("GET",sURL,true); oReq.send(null); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。