XMLHttpRequest 支持同步和异步通信。但是,一般来说,出于性能原因,异步请求应优先于同步请求。

同步请求阻止代码的执行,这会导致屏幕上出现“冻结”和无响应的用户体验。

异步请求

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

例子:在控制台输出页面源文件

这个例子演示了如何进行一个简单的异步请求。

var xhr = new XMLHttpRequest();
xhr.open("GET", "/bar/foo.txt", true);
xhr.onload = function (e) {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  }
};
xhr.onerror = function (e) {
  console.error(xhr.statusText);
};
xhr.send(null);

第2行中指定第三个参数为true表示该请求应该以异步模式执行。

第3行创建一个事件处理函数对象,并将其分配给请求的onload属性。此处理程序查看请求的readyState,以查看事务是否在第4行完成,如果是,并且HTTP状态为200,则转储接收到的内容。如果发生错误,则显示错误消息。

第15行实际上启动了请求。只要请求的状态发生变化,就会调用回调程序。

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

在一些需求情况下,必须读取多个外部文件. 这是一个标准的函数. 该函数使用XMLHttpRequest对象进行异步请求.而且可以为每个文件读取完成后指定不同的回调函数.

function xhrSuccess() { 
    this.callback.apply(this, this.arguments); 
}

function xhrError() { 
    console.error(this.statusText); 
}

function loadFile(url, callback /*, opt_arg1, opt_arg2, ... */) {
    var xhr = new XMLHttpRequest();
    xhr.callback = callback;
    xhr.arguments = Array.prototype.slice.call(arguments, 2);
    xhr.onload = xhrSuccess;
    xhr.onerror = xhrError;
    xhr.open("GET", url, true);
    xhr.send(null);
}

用法:

function showMessage(message) {
    console.log(message + this.responseText);
}

loadFile("message.txt", showMessage, "New message!\n\n");

实用函数loadFile的签名声明(i)要读取的目标URL(通过HTTP GET),(ii)成功完成XHR操作时执行的函数,以及(iii)任意列表的附加参数“通过“XHR对象到成功回调函数。

第1行声明XHR操作成功完成时调用的函数。它又调用已经分配给XHR对象(第7行)属性的loadFile函数(本例中为函数showMessage)的调用中指定的回调函数。提供给调用函数loadFile的附加参数(如果有的话)被“应用”到回调函数的运行中。

第5行声明XHR操作无法成功完成时调用的函数。

第7行存储XHR对象,成功回调函数作为loadFile的第二个参数给出。

第12行将参数赋给loadFile的调用。从第三个参数开始,收集所有剩余的参数,分配给变量xhr的arguments属性,传递给成功回调函数xhrSuccess,最终提供给函数调用的回调函数(在本例中为showMessage) xhrSuccess。

第15行为其第三个参数指定了true,表示该请求应该被异步处理。

第16行实际启动请求。

例子:使用超时

你可以使用一个超时设置,来避免你的代码为了等候读取请求的返回数据长时间执行.超时毫秒数可以通过为XMLHttpRequest对象的timeout 属性赋值来指定:

function loadFile(url, timeout, callback) {
    var args = Array.prototype.slice.call(arguments, 3);
    var xhr = new XMLHttpRequest();
    xhr.ontimeout = function () {
        console.error("The request for " + url + " timed out.");
    };
    xhr.onload = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                callback.apply(xhr, args);
            } else {
                console.error(xhr.statusText);
            }
        }
    };
    xhr.open("GET", url, true);
    xhr.timeout = timeout;
    xhr.send(null);
}

你还可以为timeout事件的ontimeout事件句柄指定事件处理函数。

用法:

function showMessage (message) {
    console.log(message + this.responseText);
}

loadFile("message.txt", 2000, showMessage, "New message!\n");

如上,我们指定的超时时间为 2000 ms。

timeout属性添加于Gecko 12.0  Gecko 12.0

同步请求

注意:从Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27),Blink 39.0和Edge 13开始,主线程上的同步请求由于对用户体验的负面影响而被弃用。

同步XHR通常会导致网络挂起。但开发人员通常不会注意到这个问题,因为在网络状况不佳或服务器响应速度慢的情况下,挂起只会显示同步XHR现在处于弃用状态。建议开发人员远离这个API。

同步XHR不允许所有新的XHR功能(如timeoutabort)。这样做会调用InvalidAccessError

例子:HTTP 同步请求

这个例子演示了如何进行一个简单的同步请求.

var request = new XMLHttpRequest();
request.open('GET', 'http://www.mozilla.org/', false); 
request.send(null);
if (request.status === 200) {
  console.log(request.responseText);
}

第一行实例化一个XMLHttpRequest对象.第二行使用该对象打开一个HTTP请求,并指定使用HTTP GET方法来获取Mozilla.org主页内容,操作模式为同步.

第三行发送这个请求.参数为null表示GET请求不需要请求实体.

第四行为请求结束之后,检查请求状态码.如果状态码为200, 表示该请求成功,请求到的页面源文件会输出到控制台上.

例子: 在 Worker 中使用HTTP 同步请求

Worker中使用XMLHttpRequest时,同步请求比异步请求更适合.

example.html (主页):

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDN Example</title>
<script type="text/javascript">
  var oMyWorker = new Worker("myTask.js");  
  oMyWorker.onmessage = function(oEvent) {  
    alert("Worker said: " + oEvent.data);
  };

  oMyWorker.postMessage("Hello");
</script>
</head>
<body></body>
</html>

myFile.txt ( XMLHttpRequest对象同步请求的文件):

Hello World!!

myTask.js (包含了Worker代码):

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了解更多详情。

将同步XHR用例调整到Beacon API

在某些情况下,XMLHttpRequest的同步使用是不可替代的,就像在window.onunloadwindow.onbeforeunload事件期间一样。 您应该考虑使用带有Keepalive标志的fetchAPI。 当keepalivefetch不可用时,可以考虑使用navigator.sendBeacon API可以支持这些用例,通常在提供良好UX的同时。

以下示例(来自sendBeacon文档)显示了一个理论分析代码,该代码尝试通过在卸载处理程序中使用同步XMLHttpRequest将数据提交给服务器。 这导致页面的卸载被延迟。

window.addEventListener('unload', logData, false);

function logData() {
    var client = new XMLHttpRequest();
    client.open("POST", "/log", false); // third parameter indicates sync xhr. :(
    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
    client.send(analyticsData);
}

使用sendBeacon()方法,当用户代理有机会的时候,数据将被异步传输到Web服务器,而不会延迟卸载或影响下一个导航的性能。

以下示例显示了使用sendBeacon()方法将数据提交给服务器的理论分析代码模式。

window.addEventListener('unload', logData, false);

function logData() {
    navigator.sendBeacon("/log", analyticsData);
}

参见

文档标签和贡献者

标签: 
此页面的贡献者: zhangchen, Lby876176278, xgqfrms-GitHub, ziyunfei
最后编辑者: zhangchen,