【Ajax】XML请求

XMLHttpRequest 是一个内建的浏览器对象，它允许使用 JavaScript 发送 HTTP 请求。

现如今，我们有一个更为现代的方法叫做 fetch，它的出现使得 XMLHttpRequest 在某种程度上被弃用。

在现代 Web 开发中，出于以下三种原因，我们还在使用 XMLHttpRequest：

• 历史原因：我们需要支持现有的使用了 XMLHttpRequest 的脚本。
• 我们需要兼容旧浏览器，并且不想用 polyfill（例如为了使脚本更小）。
• 我们需要做一些 fetch 目前无法做到的事情，例如跟踪上传进度。

XMLHttpRequest 基础

要发送一个XML请求，通常有以下三步：

let xhr = new XMLHttpRequest();

xhr.open(method,URL,[async,user,password])

xhr.send([body])

监听xhr事件以获取响应：

load —— 当请求完成（即使 HTTP 状态为 400 或 500 等），并且响应已完全下载。
error —— 当无法发出请求，例如网络中断或者无效的 URL。
progress —— 在下载响应期间定期触发，报告已经下载了多少。

xhr.onload = function() {
  alert(`Loaded: ${xhr.status} ${xhr.response}`);
};

xhr.onerror = function() { // 仅在根本无法发出请求时触发
  alert(`Network Error`);
};

xhr.onprogress = function(event) { // 定期触发
  // event.loaded —— 已经下载了多少字节
  // event.lengthComputable = true，当服务器发送了 Content-Length header 时
  // event.total —— 总字节数（如果 lengthComputable 为 true）
  alert(`Received ${event.loaded} of ${event.total}`);
};

xhr中止请求

我们可以随时终止请求。调用 xhr.abort() 即可：

xhr.abort(); // 终止请求

它会触发 abort 事件，且 xhr.status 变为 0。

可恢复的文件上传

使用 fetch 方法来上传文件相当容易。

连接断开后如何恢复上传？对于大文件（如果我们可能需要恢复），可恢复的上传应该带有上传进度提示。由于 fetch 不允许跟踪上传进度，我们将会使用 XMLHttpRequest。

xhr.upload.onprogress

长轮询（Long polling）

长轮询是与服务器保持持久连接的最简单的方式，它不使用任何特定的协议，例如 WebSocket 或者 Server Sent Event。

它很容易实现，在很多场景下也很好用。

常规轮询： 就性能而言是个很大的负担

定期轮询。也就是说，定期向服务器发出请求：“你好，我在这儿，你有关于我的任何信息吗？”例如，每 10 秒一次。

长轮询 ：可以无延迟的传递消息

• 请求发送到服务器
• 服务器在有消息之前不会关闭连接
• 当消息出现时——服务器将对其请求做出响应
• 浏览器立即发出一个新的请求

浏览器发出一个请求并与服务器之间建立起一个挂起的（pending）连接的情况是标准的。仅在有消息被传递时，才会重新建立连接。

WebSocket