详解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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
vuejs如何配置less
Apr 25 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
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
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
深入PHP数据加密详解
2013/06/18 PHP
php curl_init函数用法
2014/01/31 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
纯JS实现轮播图
2017/02/22 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
Sanic框架安装与简单入门示例
2018/07/16 Python
python format 格式化输出方法
2018/07/16 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
python递归下载文件夹下所有文件
2019/08/31 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
饮料业务员岗位职责
2013/12/15 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
图书借阅制度范本
2015/08/06 职场文书
小学课改工作总结
2015/08/13 职场文书
MySQL的索引你了解吗
2022/03/13 MySQL