如何从 JavaScript 进行 ajax 调用？

什么是 ajax？

在说如何调用前，我们先了解一下什么是 ajax。AJAX（Asynchronous JavaScript and XML）是一种创建交互式 Web 应用程序的方法。它使得页面能够在不刷新的情况下更新，并同时从服务器加载数据。

如何进行 ajax 调用？

1. 使用原生 XMLHttpRequest 对象

我们可以使用 XMLHttpRequest 对象来从服务器获取数据并更新页面。以下是一个简单的示例：

let xhr = new XMLHttpRequest();
xhr.open("GET", "/some/url");
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText); // 这里打印获取到的数据
  }
};
xhr.send();

在这个示例中，我们使用了 XMLHttpRequest 对象的 open() 方法打开了一个 GET 请求，并将其发送到服务器。然后，我们添加了一个 onload() 监听器，当请求状态为 200 时，打印了我们从服务器获取到的响应数据。

2. 使用 jQuery 的 $.ajax() 方法

jQuery 是一种流行的 JavaScript 库，它内置了一个方便的 $.ajax() 方法，可以帮助我们轻松地进行 ajax 调用。以下是一个示例：

$.ajax({
  url: "/some/url",
  method: "GET",
  success: function(data) {
    console.log(data); // 这里打印获取到的数据
  }
});

在这个示例中，我们使用了 $.ajax() 方法，并将需要发送到服务器的参数传递给它。我们可以指定哪种 HTTP 方法使用、哪个 URL 发送请求，并在成功时执行一个回调函数来处理响应数据。

3. 使用 fetch() 方法

fetch() 方法是一种较新的方式，提供了一种更简单的方式来进行 ajax 调用。以下是一个示例：

fetch("/some/url")
  .then(response => {
    console.log(response); // 这里打印获取到的响应数据对象
    return response.json(); // 解析获取到的 JSON 数据
  })
  .then(data => console.log(data)) // 这里打印解析后的数据
  .catch(error => console.error(error)); // 这里处理发生的错误

在这个示例中，我们使用了 fetch() 方法，并将需要发送到服务器的 URL 传递给它。我们使用 then() 来处理从服务器获取到的响应数据，并使用 catch() 来处理错误。

总结

这里介绍了三种从 JavaScript 进行 ajax 调用的方式：使用原生 XMLHttpRequest 对象、使用 jQuery 的 $.ajax() 方法和使用 fetch() 方法。每种方法都有其适用的场景，我们可以根据具体情况选择相应的方法来进行调用。