本文主要参考:MDN

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

异步请求

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

  1. 例子: 创建一个标准的方法来读取外部文件

    在一些需求情况下,必须读取多个外部文件. 这是一个标准的函数. 该函数使用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,表示该请求应该以异步模式执行.

2. 例子: 使用异步请求,不使用闭包.

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

详细解读XMLHttpRequest(一)同步请求和异步请求的更多相关文章

  1. 第106天:Ajax中同步请求和异步请求

    同步请求和异步请求的区别 1.同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 用户填写所有信息后,提交给服务器,等待服务器的回应(检验数据),是一次性的.信息错误又要重新 ...

  2. Http中的同步请求和异步请求

    最近在上springmvc的JSON数据交换的时候,老师下课提了一个课后问题:什么是异步请求?什么是同步请求?我想大部分同学听到这个问题的时候应该和我一样不知所云.现在,给大家分享一篇关于同步请求和异 ...

  3. Objective-C Http常用API 同步请求与异步请求

    开发iOS应用要调用Http接口.获取Http资源,有一套比较成熟的框架ASIHTTPRequest.而我还是比较喜欢使用原始一点的 API,而它跟其他的面向对象语言有许多共通之处.本文分同步请求和异 ...

  4. OKHttp源码学习同步请求和异步请求(二)

    OKHttp get private void doGet(String method, String s) throws IOException { String url = urlAddress ...

  5. 同步请求和异步请求的区别,ajax异步请求如何理解

    同步请求和异步请求的区别 先解释一下同步和异步的概念 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的 ...

  6. 【Objective-C】Http常用API、同步请求与异步请求[转]

    比较实用, 转载保存 开发iOS应用要调用Http接口.获取Http资源,有一套比较成熟的框架ASIHTTPRequest.而我还是比较喜欢使用原始一点的API,而它跟其他的面向对象语言有许多共通之处 ...

  7. 【读书笔记】iOS网络-同步请求,队列式异步请求,异步请求的区别

    一,同步请求的最佳实践. 1,只在后台过程中使用同步请求,除非确定访问的是本地文件资源,否则请不要在主线程上使用. 2,只有在知道返回的数据不会超出应用的内存时才使用同步请求.记住,整个响应体都会位于 ...

  8. IOS之同步请求、异步请求、GET请求、POST请求

    .同步请求可以从因特网请求数据,一旦发送同步请求,程序将停止用户交互,直至服务器返回数据完成,才可以进行下一步操作, .异步请求不会阻塞主线程,而会建立一个新的线程来操作,用户发出异步请求后,依然可以 ...

  9. ios ASIHttpLib 同步请求和异步请求

    1.同步请求可以从因特网请求数据,一旦发送同步请求,程序将停止用户交互,直至服务器返回数据完成,才可以进行下一步操作, 2.异步请求不会阻塞主线程,而会建立一个新的线程来操作,用户发出异步请求后,依然 ...

随机推荐

  1. codeforces——Little Pony and Expected Maximum

    /* 我们枚举每次选择最大数值的情况:m个数, 投掷n次 最大值是1: 1种 2: 2^n-1 3: 3^n-2^n ..... m: m^n-(m-1)^n 所以最后的结果=sum((k/m)^n ...

  2. Java多线程系列--“基础篇”08之 join()

    概要 本章,会对Thread中join()方法进行介绍.涉及到的内容包括:1. join()介绍2. join()源码分析(基于JDK1.7.0_40)3. join()示例 转载请注明出处:http ...

  3. Java多线程系列--“JUC集合”10之 ConcurrentLinkedQueue

    概要 本章对Java.util.concurrent包中的ConcurrentHashMap类进行详细的介绍.内容包括:ConcurrentLinkedQueue介绍ConcurrentLinkedQ ...

  4. U3D中的 Coroutine程序 解析

    今天咱就说说协同程序coroutine. 什么是协同程序 先说说啥是协程:它的表现形式非常像线程,对线程有过接触的朋友可能更理解我这句话的意思,你没接触过线程,那么理解它会有一些难度.但是它不存在线程 ...

  5. 阅读《LEARNING HARD C#学习笔记》知识点总结与摘要四

    又是一个周末,刚好有时间,又继续复习与总结了,希望能让大家受益,不足之处欢迎指正,谢谢! 十八. Lambda 1.Lambda表达式:匿名方法的另一种表现形式,它可以包含表达式和语句,且用于创建委托 ...

  6. ASP.NET MVC系列:添加视图

    虽然在上一篇文章中我们知道通过控制器可以在浏览器输出HTML页面,但是这不是控制器主要干的事,因为页面上我为还要做很多好看的特效,页面展示的事情当然交给视图来做了:下面我们就来看看如何添加一个视图 添 ...

  7. 显示XML文档时排序数据

    先看XML文档: 也可拷贝下面代码另存为XMl文档: <stepList> <steps> <step> <order>1</order> ...

  8. 使用CKplayer插件在网页中嵌入视频的方法(常用笔记2)

    在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...

  9. ASP.NET中Request.RawUrl、Request.Url的区别

    如果访问的地址是: http://hovertree.com/guestbook/addmessage.aspx?key=hovertree%3C&n=myslider#zonemenu 那么 ...

  10. HTTP必知必会

    HTTP协议作为网络传输的基本协议,有着广泛的应用.HTTP协议的完整内容很多,但是其核心知识却又简单精炼.学习者应该掌握其基本结构,并且能够举一反三.这篇文章所列的,就是在实际开发中必须知道必须掌握 ...