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


Posted in Javascript onSeptember 14, 2016

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 "退出失败,您想手动执行退出吗?";
 }
};

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

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) {
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);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
H5上传本地图片并预览功能
May 08 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
js+canvas实现纸牌游戏
Mar 16 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 Javascript
Vue实现圆环进度条的示例
Feb 06 Vue.js
AngularJs ng-route路由详解及实例代码
Sep 14 #Javascript
js实现文字截断功能
Sep 14 #Javascript
jQuery版AJAX简易封装代码
Sep 14 #Javascript
原生JS实现首页进度加载动画
Sep 14 #Javascript
jquery判断iPhone、Android设备类型
Sep 14 #Javascript
Angularjs 实现分页功能及示例代码
Sep 14 #Javascript
Angularjs CURD 详解及实例代码
Sep 14 #Javascript
You might like
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
python正则实现计算器功能
2017/12/14 Python
基于python log取对数详解
2018/06/08 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
Python中请不要再用re.compile了
2019/06/30 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
python IP地址转整数
2020/11/20 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
2015党建工作简报
2015/07/21 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
HTML常用标签超详细整理
2022/03/19 HTML / CSS