Ajax请求解密:XMLHttpRequest和axios详解

XMLHttpRequest 和 axios：发送 Ajax 请求的利器

XMLHttpRequest：Ajax 请求的基础

XMLHttpRequest（XHR）是 Web 浏览器中内置的一个构造函数，允许 JavaScript 代码与服务器进行异步通信，实现 Ajax（异步 JavaScript 和 XML）技术。Ajax 是一种使 Web 应用程序能够在不重新加载整个页面的情况下与服务器交互的方法，从而实现部分刷新和交互。

XMLHttpRequest 的使用方法

使用 XHR 发送 Ajax 请求需要四个步骤：

1. 创建一个 XHR 对象。
2. 使用 XHR.open() 方法指定请求类型和 URL。
3. 使用 XHR.send() 方法发送请求。
4. 监听 XHR.load 事件，以便在请求完成时执行操作。

代码示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data');
xhr.send();

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.response);
  }
};

axios：XMLHttpRequest 的封装

axios 是一个基于 XHR 的第三方库，它简化了发送 Ajax 请求的过程。axios 提供了一组简单易用的方法，例如 axios.get()、axios.post() 和 axios()，只需提供 URL 和参数即可轻松发送请求。

代码示例：

axios.get('https://example.com/api/data')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

发送 GET 请求携带参数

GET 请求可以使用 URL 查询字符串携带参数。查询字符串是 URL 中问号 (?) 之后的字符串，包含参数和值对，用等号 (=) 分隔，用 & 符号连接。例如：

https://example.com/api/data?id=123&name=John%20Doe

常见问题解答

1. 如何处理 Ajax 请求中的错误？

• 在 XHR 中，可以在 xhr.onerror 事件中处理错误。在 axios 中，可以使用 try-catch 块捕获错误。

2. 如何设置请求头？

• 在 XHR 中，可以使用 xhr.setRequestHeader() 方法。在 axios 中，可以使用 axios 请求中的 headers 属性。

3. 如何发送跨域请求？

• 在 XHR 中，可以在 xhr.withCredentials 属性上设置 true。在 axios 中，可以在 axios 请求的 withCredentials 属性上设置 true。

4. 如何获取 Ajax 请求的响应数据？

• 在 XHR 中，可以在 xhr.responseText 属性中获取响应数据。在 axios 中，可以在 axios 请求的 data 属性中获取响应数据。

5. 如何知道 Ajax 请求是否完成？

• 在 XHR 中，可以在 xhr.readyState 属性中检查请求是否完成。在 axios 中，可以在 axios 请求的 status 属性中检查请求是否完成。

结论

XMLHttpRequest 和 axios 都是用于发送 Ajax 请求的强大工具。虽然 XHR 提供了更直接的控制，但 axios 提供了更简单的语法和额外的功能。根据您的特定需求和偏好，选择最适合您的工具。