XMLHttpRequest（XHR）是一种用于客户端和服务器之间进行数据传输的技术，也称为 AJAX（异步 JavaScript 和 XML）。在 Web 开发中，XHR 是非常重要的工具，因为它可以使我们轻松地实现数据异步传输。

HTML 页面是在浏览器中呈现的，浏览器是客户端，而服务器则是 Web 应用程序的主机。 当用户请求网页时，浏览器会向服务器发送一个请求，以获取相关资源。但是，传统的 Web 技术必须依次加载所有页面的内容，如果页面内容很多，这个过程就很慢。XHR 可以让应用程序在不刷新整个页面的情况下，请求和接收数据，从而让用户获得更快的反应速度和更好的用户体验。

XHR 是在 JavaScript 中使用的，因此它非常灵活。XHR 使 JavaScript 能够在后台向服务器发送请求和接收响应，而无需干扰用户正在浏览的页面。

在本文中，我们将深入理解 XMLHttpRequest，学习如何使用它在网页中传输数据。

1. 创建 XMLHttpRequest

在使用 XHR 之前，需要先创建一个 XMLHttpRequest 对象。以下是创建 XMLHttpRequest 对象的代码：

```

var xhttp = new XMLHttpRequest();

```

这个代码在 JavaScript 中创建了一个名为 XHR 的变量，并通过 new 运算符创建了新的 XMLHttpRequest 对象。现在，你可以使用 xhttp 来调用 XHR 的方法和属性。

2. 发送请求

一旦创建了 XMLHttpRequest 对象，就可以使用它来向服务器发送请求。以下是发送 GET 请求的代码：

```

xhttp.open("GET", "http://example.com/", true);

xhttp.send();

```

这个代码向 example.com 发送一个 GET 请求，并使用 send() 方法提交请求。第一个参数是请求方法（GET），第二个参数是 URL。

第三个参数，true，表示异步请求。如果这个参数设置为 false，那么请求将是同步的，并且代码在发送请求和接收响应期间将被阻塞，直到请求完成并返回结果。

3. 接收响应

一旦服务器返回响应，XHR 就会触发一个事件。使用 XHR 时，通常监听 load 事件来处理请求的响应。

以下是处理 XHR 响应的示例代码：

```

xhttp.onload = function() {

if (xhttp.status === 200) {

console.log(xhttp.responseText);

} else {

console.log('请求失败');

}

};

```

这个代码定义了一个 function，当 XHR 接收到响应时，就会触发 onload 事件。代码检查了响应的状态代码，并根据状态代码执行相应操作。如果状态码是 200，则表示成功获取到了响应，并将响应文本打印到控制台中。

4. 异常处理

在发送 XHR 请求期间，可能会发生错误。以下是一种处理错误的方法：

```

xhttp.onerror = function() {

console.log('发生错误');

};

```

这个代码定义了一个 function，在 XHR 出现错误时触发。例如，如果 URL 无效或服务器未响应，则会触发 onerror 事件。

5. 取消请求

如果在 XHR 请求发送后，需要取消请求，则可以使用 XHR 的 abort() 方法。

以下是取消 XHR 请求的示例代码：

```

xhttp.abort();

```

这个代码将会停止正在发送的 XHR 请求。

总结

XMLHttpRequest 使我们能够轻松地实现数据异步传输，并在后台向服务器发送请求和接收响应，从而提高了网站的性能和用户体验。通过通过以上的这些示例代码，你可以创建 XHR 对象，发送请求，并在触发 onload 事件时处理响应。此外，你还可以使用 XHR 的响应事件、异常处理和取消请求方法等，来掌握更多有用的 XHR 技巧。