详解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 相关文章推荐
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
代码解析React中setState同步和异步问题
Jun 03 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 无限级 SelectTree 类
2009/05/19 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
详解Python3.6的py文件打包生成exe
2018/07/13 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
2014自主招生自荐信策略
2014/01/27 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
检讨书大全
2015/01/27 职场文书
优秀英文求职信范文
2015/03/19 职场文书
六年级语文教学反思
2016/03/03 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
Nginx四层负载均衡的配置指南
2021/06/11 Servers
vue+iview实现手机号分段输入框
2022/03/25 Vue.js