如何在 AJAX 中添加 AJAX - JavaScript

AJAX 是一项使 Web 应用程序更加动态化的技术，它可以允许在不刷新整个页面的情况下向服务器发送和接收数据。在本文中，我们将介绍如何使用 JavaScript 将 AJAX 添加到您的 Web 应用程序中。

步骤

1. 创建 XMLHttpRequest 对象

在 JavaScript 中使用 AJAX，您需要创建一个 XMLHttpRequest（XHR）对象。此对象可以使用 JavaScript 中的 XMLHttpRequest 构造函数创建。以下是创建 XHR 对象的示例代码：

var xmlhttp = new XMLHttpRequest();

2. 打开 URL

接下来，您需要使用 XMLHttpRequest 对象的 open() 方法来打开一个 URL。此方法使用三个参数：请求方法（GET 或 POST），URL 和一个表示请求是否异步执行的布尔参数。以下是一个基本的使用 open() 方法的示例：

xmlhttp.open("GET", "example.txt", true);

3. 发送请求

使用 send() 方法向服务器发送请求。对于 GET 请求，您不需要传递任何参数。在 POST 请求中，您需要传递一个包含请求参数的字符串。以下是一个基本的使用 send() 方法的示例：

xmlhttp.send();

4. 指定回调函数

使用 onreadystatechange 属性指定用于处理 AJAX 响应的回调函数。当 AJAX 请求的状态发生更改时，该函数将被调用。以下是一个基本的回调函数示例：

xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("myDiv").innerHTML = this.responseText;
  }
};

在此示例中，当状态变为 4，状态代码为 200 时，将 AJAX 响应文本设置为一个具有 ID 的 HTML 元素的内容。

示例代码

这里是使用 AJAX 从服务器获取数据的基本示例：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("myDiv").innerHTML = this.responseText;
  }
};
xmlhttp.open("GET", "example.txt", true);
xmlhttp.send();

结论

在本文中，我们讨论了如何在 JavaScript 中使用 AJAX。此技术可以使您的 Web 应用程序更加动态化，并允许您在不刷新整个页面的情况下向服务器发送和接收数据。