AJAX 示例 - JavaScript

AJAX(Aynchronous JavaScript and XML) 是一种基于 JavaScript 和 XML 技术的异步传输数据的技术。AJAX 可以在不重新加载整个页面的情况下，与服务器异步地交换数据并更新部分页面。下面我们将介绍一些使用 AJAX 的 JavaScript 示例：

发送一个简单的 AJAX 请求

使用 XMLHttpRequest 对象，我们可以向服务器发送简单的 AJAX 请求：

let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    console.log(this.responseText);
  }
};
xhttp.open("GET", "https://jsonplaceholder.typicode.com/users/1", true);
xhttp.send();

上面的代码向 https://jsonplaceholder.typicode.com/users/1 发送了一条 GET 请求，并打印出了服务器返回的数据。

发送 POST 数据

除了 GET 请求，我们还可以使用 AJAX 向服务器发送 POST 数据：

let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 201) { // 成功创建一条新的记录
    console.log(this.responseText);
  }
};
xhttp.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
xhttp.setRequestHeader("Content-type", "application/json");
let data = JSON.stringify({ title: "foo", body: "bar", userId: 1 });
xhttp.send(data);

上面的代码向 https://jsonplaceholder.typicode.com/posts 发送了一条 POST 请求，并发送了一些 JSON 数据。当我们在服务器端成功创建了一条新的记录时，会返回一个 HTTP 状态码 201。

处理 JSON 数据

当我们使用 AJAX 从服务器获取数据时，通常会得到一个 JSON 格式的响应。我们可以将这个响应转换成 JavaScript 对象，以便在客户端使用这些数据：

let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    let data = JSON.parse(this.responseText);
    console.log(data.name);
  }
};
xhttp.open("GET", "https://jsonplaceholder.typicode.com/users/1", true);
xhttp.send();

上面的代码从 https://jsonplaceholder.typicode.com/users/1 获取了一个 JSON 响应，并将其转换成了一个 JavaScript 对象。我们可以访问这个对象的属性，例如 data.name。

处理错误

当一个 AJAX 请求发生错误时，我们需要能够处理它。我们可以监听 onerror 和 ontimeout 事件：

let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState === 4) {
    if (this.status === 200) {
      console.log(this.responseText);
    } else {
      console.log("Error: " + this.status);
    }
  }
};
xhttp.onerror = function() {
  console.log("Network error");
};
xhttp.ontimeout = function() {
  console.log("Timeout error");
};
xhttp.open("GET", "https://jsonplaceholder.typicode.com/users/1", true);
xhttp.send();

上面的代码中，我们监听了 onerror 和 ontimeout 事件，分别处理网络错误和超时错误。

使用 jQuery 发送 AJAX 请求

jQuery 是一个流行的 JavaScript 库，它提供了一个简单的方式来使用 AJAX。下面是一个使用 jQuery 发送 AJAX 请求的示例：

$.ajax({
  url: "https://jsonplaceholder.typicode.com/users/1",
  type: "GET",
  success: function(data) {
    console.log(data.name);
  },
  error: function(xhr, status, error) {
    console.log("Error: " + status);
  }
});

上面的代码使用了 jQuery 的 $.ajax() 函数来发送 AJAX 请求。我们需要指定请求的 URL、请求类型、成功回调函数和错误回调函数。当成功获取数据时，我们可以访问 data.name 属性来使用数据。