AJAX 中创建 XMLHttpRequest 对象的方法和常用属性、方法

AJAX（Asynchronous JavaScript and XML）是一种用于在网页上进行异步数据交互的技术。通过 AJAX，我们可以在不重新加载整个网页的情况下，与服务器进行数据交换并更新部分页面内容。在实现 AJAX 的过程中，创建一个 XMLHttpRequest 对象是必不可少的。

XMLHttpRequest 对象简介

XMLHttpRequest 是一个 JavaScript 内置的对象，它提供了在浏览器和服务器之间进行数据交换的能力。通过 XMLHttpRequest，我们可以发送 HTTP 请求，获取服务器返回的数据，并在页面中动态地更新展示。

创建 XMLHttpRequest 对象

要创建一个 XMLHttpRequest 对象，可以使用如下代码：

var xhr = new XMLHttpRequest();

上述代码会创建一个新的 XMLHttpRequest 对象，并将其赋值给变量 xhr。我们可以通过 xhr 对象来执行各种 AJAX 相关的操作。

XMLHttpRequest 对象属性和方法

XMLHttpRequest 对象拥有一系列属性和方法，用于配置和控制 AJAX 请求。以下是一些常用的属性和方法：

属性

• onreadystatechange：用于定义当 readyState 属性发生改变时调用的函数。
• readyState：表示 XMLHttpRequest 对象的请求状态，其值为整数。
  • 0：未初始化。XMLHttpRequest 对象已创建但尚未调用 open() 方法。
  • 1：已打开。open() 方法已调用，但尚未调用 send() 方法。
  • 2：已发送。send() 方法已调用，但尚未接收到响应。
  • 3：接收中。正在接收服务器返回的数据。
  • 4：已完成。数据已接收完毕，可以通过 responseText 或 responseXML 属性获取完整的服务器响应。
• responseText：以字符串形式返回服务器响应的文本。
• responseXML：以 XML 形式返回服务器响应的文档。
• status：以数字形式返回服务器响应的 HTTP 状态码。

方法

• open(method, url[, async])：初始化一个 AJAX 请求。参数 method 表示请求的类型（GET、POST 等），url 表示请求的 URL，async 表示是否异步，默认为 true。
• send([data])：发送 AJAX 请求。参数 data 可以是要发送到服务器的数据，在 POST 请求中常用。
• abort()：取消已发送的 AJAX 请求。
• setRequestHeader(header, value)：设置请求头信息，包括 Content-Type、Accept 等。

使用 XMLHttpRequest 发送 GET 请求

现在我们来看一个使用 XMLHttpRequest 对象发送 GET 请求的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
   
  if (xhr.readyState === 4 && xhr.status === 200) {
   
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

上述代码首先创建了一个 XMLHttpRequest 对象，并使用 open() 方法初始化一个 GET 请求。然后，我们通过 onreadystatechange 事件监听器来检测请求的状态变化。当 readyState 变为 4（已完成）且 status 为 200（成功）时，表示服务器返回了有效的响应。我们可以通过 responseText 属性获取服务器返回的文本，并按需进行解析和处理。

需要注意的是，在实际使用中可能会遇到跨域请求的问题。如果请求的目标 URL 与当前页面不在同一个域下，浏览器会禁止这种跨域请求。为了解决跨域问题，可以在服务器端设置相应的 CORS（Cross-Origin Resource Sharing）头信息，或者使用 JSONP 等其他方法。

使用 XMLHttpRequest 发送 POST 请求

除了发送 GET 请求，XMLHttpRequest 对象还可以用于发送 POST 请求。下面是一个使用 XMLHttpRequest 发送 POST 请求的示例：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
   
  if (xhr.readyState === 4 && xhr.status === 200) {
   
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
var data = {
   
  username: 'john',
  password: '123456'
};
xhr.send(JSON.stringify(data));

上述代码中，我们首先使用 open() 方法初始化一个 POST 请求，并在请求头中设置了 Content-Type 为 application/json。然后，通过 send() 方法发送请求，并将需要发送的数据作为参数传递给 send() 方法。在这个示例中，我们将一个包含用户名和密码的对象进行了 JSON 序列化，并作为请求体发送到服务器。

XMLHttpRequest 异步与同步

在创建 XMLHttpRequest 对象时，可以通过第三个参数 async 来控制请求是同步还是异步的，默认为异步。异步请求是 AJAX 的主要特点之一，它允许在数据请求过程中不阻塞页面的其他操作。而同步请求则会在发送请求和接收到响应之间阻塞页面的渲染和用户交互。

通常情况下，我们推荐使用异步请求，以便提升用户体验和页面性能。但如果有特殊的需求，确实需要使用同步请求，也是可以的。只需将 async 参数设置为 false 即可，如下所示：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', false);
xhr.send();
console.log(xhr.responseText);

上述代码将请求设置为同步，其中的 console.log(xhr.responseText) 会在请求结束后立即执行。但要注意，同步请求可能导致页面卡顿和响应时间延长，因此建议谨慎使用。

总结

通过本文，我们详细介绍了 AJAX 中创建 XMLHttpRequest 对象的方法和常用属性、方法。XMLHttpRequest 是实现 AJAX 的关键，它使得在网页上实现异步数据交互成为可能。

通过创建 XMLHttpRequest 对象，我们可以发送 HTTP 请求、获取服务器的响应，并在页面上实时地更新数据和内容。无论是发送 GET 请求还是 POST 请求，XMLHttpRequest 都提供了相应的方法和属性供我们使用。

在实际开发中，我们需要根据具体需求来选择合适的请求方式和处理方式。并且要注意跨域请求、请求头设置等细节，以确保 AJAX 请求的顺利执行。