XMLHttpRequest 介绍

XMLHttpRequest 是一种在浏览器端创建 HTTP 请求的 API，可以用来获取服务器上的数据并在页面上进行展示。作为一名程序员，在前端开发中需要了解 XMLHttprequest 的基本使用。

XMLHttpRequest 异步请求

XMLHttpRequest 的最大特点是通过异步的方式发送 HTTP 请求，也就是说，发送完请求后，我们可以继续执行代码，交给浏览器去处理响应结果。为了响应服务器的请求，我们需要处理 readyStatechange 事件，其中 readyState 是 XMLHttpRequest 的一个状态码，表示请求的当前状态。下面是一个基本的发送 GET 请求的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

设置请求头

有时我们需要向服务器发送一个特定格式的数据，或者需要带上一些认证信息。在这种情况下，我们需要设置一些请求头来包装我们的请求数据。可以通过 setRequestHeader 方法来设置请求头，下面是一个实现带有认证头的 POST 请求的例子：

var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/data');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(JSON.stringify({ id: 1, name: 'John' }));

监听上传进度

有些时候，我们需要监听文件或者图片的上传进度，以便在上传过程中实时更新进度条或者其他提示信息。这时，我们可以通过监听 upload 对象来实现，upload 对象与 xhr 对象操作基本相同，只是 upload 对象专用于上传相关的操作，下面是一个上传进度监听的实例代码：

var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/data');
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.upload.onprogress = function(e) {
  var progress = (e.loaded / e.total * 100).toFixed(2);
  console.log(progress + '%');
}
xhr.send(formData);

结语

XMLHttpRequest 是 Web 开发必备的一个工具，使我们可以从服务器获取数据，也可以像上传文件和表单数据等高级操作，向后端发送请求，是实现前后端分离模式的关键技术之一。通过学习本篇介绍，相信大家已经能够熟练使用 XMLHttpRequest ，更好地开发 Web 应用。