使用 jQuery 的 ajax()函数处理异步 HTTP 请求

什么是 AJAX？

AJAX 即 "Asynchronous JavaScript and XML"（异步的 JavaScript 和 XML），它是一种创建交互式网页应用的网页开发技术。通过 AJAX，网页应用能够实现在不刷新整个页面的情况下，异步更新部分页面内容，实现无需等待全页面加载而带来等待时间的问题，给用户更好的体验。

为什么使用 jQuery 的 ajax() 函数？

尽管现代浏览器已经支持原生的 AJAX 技术，但使用 jQuery 的 ajax() 函数依然是更为方便的选择。jQuery 的 ajax() 函数采用了一致的 API，跨浏览器兼容性良好，能够轻松的发送各种类型的数据和向远程服务器发出异步 HTTP 请求。

如何使用 jQuery 的 ajax() 函数?

jQuery 的 ajax() 函数实现异步请求的代码如下：

$.ajax({
  type: "GET",
  url: "/api/users",
  success: function(response) {
    // 请求成功的回调函数
    console.log(response);
  },
  error: function(xhr, textStatus, error) {
    // 请求失败的回调函数
    console.log(xhr.statusText);
    console.log(textStatus);
    console.log(error);
  }
});

这里使用了一个 GET 请求来获取 '/api/users' 的数据。

其中：

• type：请求类型，这里是 GET 请求。

• url：请求的 URL 地址。

• success：请求成功的回调函数，其中 response 参数是从服务器返回的响应数据。

• error：请求失败的回调函数，其中 xhr 参数是 XMLHttpRequest 对象，textStatus 参数是异常信息，error 参数是可选的异常对象。

如果我们需要发送 POST 请求来提交数据，可以将 type 参数设置为 POST，并通过 data 参数传入需要提交的数据，代码如下：

$.ajax({
  type: "POST",
  url: "/api/users",
  data: {
    name: "Tom",
    age: 20
  },
  success: function(response) {
    console.log(response);
  },
  error: function(xhr, textStatus, error) {
    console.log(xhr.statusText);
    console.log(textStatus);
    console.log(error);
  }
});

结语

jQuery 的 ajax() 函数给开发者提供了一种方便快捷的方式来实现异步 HTTP 请求，它兼容主流浏览器，并且有着完善的请求参数配置和回调函数获取机制，是一款非常实用的函数。