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应用程序。