详解XMLHttpRequest（一）同步请求和异步请求

前言

当我们在浏览器中使用AJAX技术的时候，需要用到XMLHttpRequest对象，也就是我们常说的XHR对象。XHR对象能够支持异步请求和同步请求。

接下来，我们将详细介绍XHR对象的异步和同步请求的区别。

异步请求

首先我们看一下如何使用XHR对象进行异步请求。

创建XHR对象

var xhr = new XMLHttpRequest();

发送异步请求

xhr.open('GET', 'http://example.com', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

以上代码中，我们使用了XHR对象进行了一个GET请求，并且通过onreadystatechange事件监听XHR对象状态的变化。当XHR对象的状态为4（已完成）并且响应状态码为200（成功）时，我们将获取到的响应数据打印在控制台中。

在以上代码中，第三个参数是异步标志，设置为true时，表示使用异步请求方式。XHR对象会在请求发送后立即返回，之后会异步地接收和处理服务器的响应数据。

示例说明

以下是一个例子，我们通过XHR对象异步请求一个json文件：

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

当我们执行以上代码时，XHR对象会异步地请求data.json文件，当请求完成时，会调用onreadystatechange事件回调函数。

同步请求

接下来我们看一下如何使用XHR对象进行同步请求。

创建XHR对象

同样是创建XHR对象：

var xhr = new XMLHttpRequest();

发送同步请求

xhr.open('GET', 'http://example.com', false);
xhr.send();
if (xhr.readyState === 4 && xhr.status === 200) {
  console.log(xhr.responseText);
}

在以上代码中，第三个参数是异步标志，设置为false时，表示使用同步请求方式。XHR对象会在请求发送后一直处于pending状态，直到接收到服务器的响应，才继续执行下面的代码。

示例说明

以下是一个例子，我们通过XHR对象同步请求一个json文件：

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

当我们执行以上代码时，XHR对象会同步地请求data.json文件，并在接收到服务器的响应之后，才执行后面的代码。

总结

以上是XHR对象同步请求和异步请求的详细讲解，异步请求可以使网页更加流畅，因为在等待服务器响应的过程中，JS代码可以继续执行，但是同步请求也有其特殊的应用场景，比如JS混淆器需要同步请求文件。

参考

• XMLHttpRequest MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

• W3C XMLHttpRequest规范：https://www.w3.org/TR/XMLHttpRequest/