AJAX - 创建 XMLHttpRequest 对象

AJAX - 创建 XMLHttpRequest 对象

AJAX（异步 JavaScript 和 XML）是一种在 Web 应用程序中创建快速动态更新的技术。使用 AJAX，Web 应用程序可以异步地向服务器发送和接收数据，而无需刷新整个页面。 AJAX 广泛用于 Web 应用程序中，包括社交媒体，电子商务，在线游戏等等。

XMLHttpRequest 是 AJAX 中最重要的对象。它可以向服务器发送请求并接收响应。下面是一个创建 XMLHttpRequest 对象的示例：

var xhttp = new XMLHttpRequest();

上面的代码创建了一个名为‘xhttp’的新 XMLHttpRequest 对象。现在，您可以使用该对象来发送请求和接收响应。

创建 AJAX 请求

要向服务器发送 AJAX 请求，您需要设置 XMLHttpRequest 对象的属性和方法。使用 XMLHttpRequest.open() 方法设置请求的类型，您需要指定 HTTP 方法和服务器 URL。例如：

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

上面的代码将向 http://www.example.com 发送一个 GET 请求，并设置异步标志为 true。如果您希望发送 POST 请求，则必须将第一个参数设置为’POST’。

发送 AJAX 请求

一旦您设置了 AJAX 请求并指定了服务器 URL，则可以使用 XMLHttpRequest.send() 方法向服务器发送请求。例如：

xhttp.send();

上面的代码将使用指定的请求类型和 URL 发送请求。当服务器响应请求时，XMLHttpRequest 对象的 onreadystatechange 事件将被触发。

AJAX 响应

当服务器响应 AJAX 请求时，XMLHttpRequest 对象的 onreadystatechange 事件将被触发。您可以使用该事件的 readyState 属性来检查 AJAX 请求的状态。例如：

xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 在此处处理响应
}
};

上面的代码将在响应状态为 4（已完成）和状态码为 200（响应成功）时执行相应的代码。在该代码块中，您可以使用 XMLHttpRequest.responseText 属性来访问服务器响应的原始文本数据。

AJAX 异步和同步请求

AJAX 请求可以是异步或同步。通过将 XMLHttpRequest.open() 方法的第三个参数设置为 true，您可以创建一个异步请求。如果您将 XMLHttpRequest.open() 的第三个参数设置为 false，则可以创建同步请求。同步请求将阻塞 JavaScript 代码的执行，直到响应到达为止。异步请求则不会阻塞 JavaScript 代码，并且会在响应到达后触发一个回调函数。

结论

使用 XMLHttpRequest 对象和 AJAX，您可以创建快速的动态 Web 应用程序。为了创建一个 AJAX 请求，您需要创建一个新的 XMLHttpRequest 对象，设置请求的类型和 URL，然后使用 XMLHttpRequest.send()发送请求。一旦服务器响应了请求，您可以使用 XMLHttpRequest.responseText 属性访问原始文本响应数据。通过理解 AJAX 和 XMLHttpRequest 对象，您可以创建高效和强大的 Web 应用程序。