XMLHttpRequest同步和异步请求

待我称王封你为后i 2023-10-01 19:02 34阅读 0赞

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

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

### [异步请求][Link 1] ###

如果你使用`XMLHttpRequest`发送异步请求,那么当请求的响应数据完全收到之时，会执行一个指定的回调函数，而在执行异步请求的同时,浏览器会正常地执行其他事务的处理。

#### [例子：在控制台输出页面源文件][Link 2] ####

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

Copy to Clipboard

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

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

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

#### [例子：创建一个标准的方法来读取外部文件][Link 3] ####

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

Copy to Clipboard

用法：

function showMessage(message) {
        console.log(message + this.responseText);
    }
    
    loadFile("message.txt", showMessage, "New message!\n\n");

Copy to Clipboard

实用函数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行实际启动请求。

#### [例子：使用超时][Link 4] ####

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

Copy to Clipboard

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

用法：

function showMessage (message) {
        console.log(message + this.responseText);
    }
    
    loadFile("message.txt", 2000, showMessage, "New message!\n");

Copy to Clipboard

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

`timeout`属性添加于Gecko 12.0 Gecko 12.0。

### [同步请求][Link 5] ###

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

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

同步XHR不允许所有新的XHR功能（如`timeout`或`abort`）。这样做会调用`InvalidAccessError`。

#### [例子：HTTP 同步请求][HTTP] ####

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

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

Copy to Clipboard

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

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

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

#### [例子: 在 Worker 中使用HTTP 同步请求][_ 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>

Copy to Clipboard

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

Copy to Clipboard

**注意：**由于使用了`Worker`，所以该请求实际上也是异步的。

可以使用类似的方法，让脚本在后台与服务器交互,预加载某些内容。查看[使用web workers][web workers]了解更多详情。

#### [将同步XHR用例调整到Beacon API][XHR_Beacon API] ####

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

以下示例（来自[sendBeacon][navigator.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);
    }

Copy to Clipboard

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

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

window.addEventListener('unload', logData, false);
    
    function logData() {
        navigator.sendBeacon("/log", analyticsData);
    }

Copy to Clipboard

### [参见][Link 6] ###

*  [XMLHttpRequest][]
 *  [Using XMLHttpRequest][]
 *  [AJAX][]
 *  `navigator.sendBeacon`

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#%E5%BC%82%E6%AD%A5%E8%AF%B7%E6%B1%82
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#%E4%BE%8B%E5%AD%90%EF%BC%9A%E5%9C%A8%E6%8E%A7%E5%88%B6%E5%8F%B0%E8%BE%93%E5%87%BA%E9%A1%B5%E9%9D%A2%E6%BA%90%E6%96%87%E4%BB%B6
[Link 3]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#%E4%BE%8B%E5%AD%90%EF%BC%9A%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%A0%87%E5%87%86%E7%9A%84%E6%96%B9%E6%B3%95%E6%9D%A5%E8%AF%BB%E5%8F%96%E5%A4%96%E9%83%A8%E6%96%87%E4%BB%B6
[Link 4]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#%E4%BE%8B%E5%AD%90%EF%BC%9A%E4%BD%BF%E7%94%A8%E8%B6%85%E6%97%B6
[Link 5]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#%E5%90%8C%E6%AD%A5%E8%AF%B7%E6%B1%82
[HTTP]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#%E4%BE%8B%E5%AD%90%EF%BC%9Ahttp_%E5%90%8C%E6%AD%A5%E8%AF%B7%E6%B1%82
[_ Worker _HTTP]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#%E4%BE%8B%E5%AD%90_%E5%9C%A8_worker_%E4%B8%AD%E4%BD%BF%E7%94%A8http_%E5%90%8C%E6%AD%A5%E8%AF%B7%E6%B1%82
[web workers]: https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers
[XHR_Beacon API]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#%E5%B0%86%E5%90%8C%E6%AD%A5xhr%E7%94%A8%E4%BE%8B%E8%B0%83%E6%95%B4%E5%88%B0beacon_api
[window.onunload]: https://developer.mozilla.org/zh-CN/docs/Web/API/WindowEventHandlers/onunload
[window.onbeforeunload]: https://developer.mozilla.org/zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload
[navigator.sendBeacon]: https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon
[Link 6]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#%E5%8F%82%E8%A7%81
[XMLHttpRequest]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
[Using XMLHttpRequest]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
[AJAX]: https://developer.mozilla.org/en-US/docs/AJAX