AJAX 入门与 Axios 基本使用

---

AJAX 入门与 Axios 基本使用

在 Web 开发中，AJAX（Asynchronous JavaScript and XML）是一种能够让网页在不重新加载的情况下从服务器获取数据的技术。它通过浏览器和服务器之间的异步交互，提高了用户体验和网页的响应速度。通过 AJAX，开发者可以实现动态更新网页内容，而无需完全刷新页面，这对于现代 Web 应用的交互性至关重要。

在这篇文章中，我们将带你了解 AJAX 的基本概念，以及如何使用 Axios（一个基于 Promise 的 HTTP 客户端库）来发送 AJAX 请求。

1. 什么是 AJAX？

AJAX 是一种通过 JavaScript 向服务器发送请求并接收响应的技术。它使得网页能够在不重新加载的情况下与服务器进行数据交换。AJAX 允许网页与服务器之间进行异步交互，用户可以在不等待页面加载完成的情况下继续进行其他操作。

AJAX 使用了以下几种技术：

• XMLHttpRequest：是传统的 JavaScript 对象，用于与服务器交换数据。
• JSON：现代的 AJAX 请求通常使用 JSON 格式作为数据交换格式。
• JavaScript：通过 JavaScript 控制网页和服务器之间的交互。

⚡ 2. 使用 AJAX 发送请求

2.1 基本的 XMLHttpRequest 使用

在 AJAX 的早期，XMLHttpRequest 是实现 AJAX 请求的主要方式。下面是一个简单的例子，展示了如何使用 XMLHttpRequest 来发送一个 GET 请求。

示例：使用 XMLHttpRequest 发送 GET 请求

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);  // 初始化请求

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理响应数据
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

xhr.send();  // 发送请求

在这个例子中：

• xhr.open() 初始化一个 GET 请求。
• xhr.onreadystatechange 监听请求状态的变化，并检查请求是否成功完成（readyState === 4 并且 status === 200）。
• xhr.responseText 存储服务器返回的响应内容，我们将其解析为 JSON 格式并打印到控制台。

2.2 使用 Fetch API 发送请求

fetch() 是一个现代的 JavaScript API，它使用 Promise 来简化异步操作，替代了 XMLHttpRequest。fetch() 更加简洁和灵活，特别是在处理 JSON 数据时非常方便。

示例：使用 fetch() 发送 GET 请求

fetch("https://api.example.com/data")
  .then(response => response.json())  // 解析响应数据
  .then(data => console.log(data))    // 处理数据
  .catch(error => console.error('Error:', error));  // 错误处理

在这个例子中：

• fetch() 返回一个 Promise，代表异步操作。
• response.json() 用于将响应的 JSON 数据解析成 JavaScript 对象。
• 如果发生错误，catch() 会捕获并处理错误。

⚡ 3. 使用 Axios 发送请求

虽然 XMLHttpRequest 和 fetch() 在处理异步请求时都非常有效，但在实际开发中，Axios 更受欢迎。Axios 是一个基于 Promise 的 HTTP 客户端库，它提供了更简单的 API，且具有更多的功能，比如自动解析 JSON、请求和响应拦截器等。

3.1 安装 Axios

你可以通过 npm 安装 Axios，或者通过 CDN 引入它。

通过 npm 安装

npm install axios

通过 CDN 引入

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">script>

3.2 基本的 Axios 使用

示例：使用 Axios 发送 GET 请求

// 引入 Axios
const axios = require('axios');

// 发送 GET 请求
axios.get('https://api.example.com/data')
  .then(response => {
    // 处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 错误处理
    console.error('Error:', error);
  });

在这个示例中：

• axios.get() 发送一个 GET 请求，参数为请求的 URL。
• .then() 用于处理成功的响应，response.data 中包含了服务器返回的数据。
• .catch() 用于处理错误。

示例：使用 Axios 发送 POST 请求

const axios = require('axios');

const data = {
  name: "John",
  age: 30
};

// 发送 POST 请求
axios.post('https://api.example.com/submit', data)
  .then(response => {
    console.log('Response:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这个示例中：

• axios.post() 发送一个 POST 请求，第二个参数为请求体，通常是一个对象或 JSON 数据。
• 处理响应和错误的方式与 GET 请求类似。

3.3 配置请求和响应

Axios 允许你在请求和响应中进行一些配置，比如设置请求头、请求超时、响应拦截等。

示例：配置 Axios 请求头

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer your-token-here'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这个例子中，我们为请求添加了一个 Authorization 头部，用于携带认证信息。

示例：请求拦截器和响应拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  console.log('Request:', config);
  return config;
}, function (error) {
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  console.log('Response:', response);
  return response;
}, function (error) {
  return Promise.reject(error);
});

在这个示例中，我们使用 Axios 的 interceptors 来拦截请求和响应，查看它们的内容，或者对它们做出修改。

4. 总结

关键点回顾：

• AJAX 是一种使网页能够在不重新加载的情况下从服务器获取数据的技术。
• 使用传统的 XMLHttpRequest 或现代的 fetch() 方法可以实现 AJAX 请求。
• Axios 是一个基于 Promise 的 HTTP 客户端，简化了 AJAX 请求的过程，支持更多的功能，如请求和响应拦截器、自动解析 JSON 等。

通过 Axios，你可以更轻松地与服务器进行数据交互，提升开发效率。如果你正在开发一个需要频繁进行 HTTP 请求的前端应用，Axios 无疑是一个非常方便的工具。