理解 Ajax 的核心概念与基本用法

Ajax（Asynchronous JavaScript and XML）是一种可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。它使网页能够异步地请求和接收数据，从而实现更流畅和动态的用户体验。Ajax 广泛应用于 Web 开发中，尤其是单页面应用（SPA）中。

1. Ajax 的核心概念

1.1 异步请求

传统的 Web 页面刷新需要重新加载整个页面，而 Ajax 通过异步请求的方式向服务器发送数据并接收响应，允许网页在不重新加载的情况下更新页面内容。

异步意味着 JavaScript 代码在向服务器发送请求时，不会阻塞其他操作的进行，而是继续执行后续代码，直到请求返回。

1.2 XMLHttpRequest 对象

XMLHttpRequest（XHR）是 Ajax 的核心，负责与服务器进行异步通信。通过该对象，客户端能够发送请求到服务器并处理响应。

1.3 JSON 数据格式

虽然 Ajax 初期常使用 XML 格式传输数据，但现在更常用 JSON（JavaScript Object Notation）格式，因为 JSON 更简洁且易于与 JavaScript 对象相互转换。

2. 基本用法

在 Ajax 中，我们通过 JavaScript 中的 XMLHttpRequest 对象来发送请求，并处理响应。以下是一个使用 XMLHttpRequest 的基本例子。

2.1 发送一个简单的 GET 请求

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 配置请求方式：GET，指定请求的 URL
xhr.open('GET', 'https://api.example.com/data', true);

// 设置响应的回调函数
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理响应数据
    var responseData = JSON.parse(xhr.responseText);
    console.log(responseData); // 打印返回的数据
  }
};

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

代码解析：

new XMLHttpRequest()：创建 XMLHttpRequest 对象。
xhr.open('GET', 'https://api.example.com/data', true)：设置请求方法为 GET，指定请求的 URL，第三个参数 true 表示异步请求。
xhr.onreadystatechange：注册回调函数，监听请求状态变化，readyState === 4 表示请求完成，status === 200 表示请求成功。
xhr.responseText：获取服务器返回的响应内容。
JSON.parse(xhr.responseText)：将 JSON 字符串转换为 JavaScript 对象。

2.2 发送一个 POST 请求

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 配置请求方式：POST，指定请求的 URL
xhr.open('POST', 'https://api.example.com/submit', true);

// 设置请求头，告诉服务器我们发送的数据格式是 JSON
xhr.setRequestHeader('Content-Type', 'application/json');

// 设置响应的回调函数
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理响应数据
    var responseData = JSON.parse(xhr.responseText);
    console.log(responseData); // 打印返回的数据
  }
};

// 构造发送的数据
var data = {
  username: 'JohnDoe',
  password: '12345'
};

// 发送请求，并将数据转换为 JSON 字符串
xhr.send(JSON.stringify(data));

代码解析：

xhr.open('POST', 'https://api.example.com/submit', true)：设置请求方法为 POST，指定请求的 URL。
xhr.setRequestHeader('Content-Type', 'application/json')：设置请求头，告知服务器数据类型为 JSON。
xhr.send(JSON.stringify(data))：将数据对象转换为 JSON 字符串并发送。

3. jQuery 中的 Ajax 使用

在使用原生 XMLHttpRequest 时，代码较为繁琐，使用 jQuery 可以简化 Ajax 的调用。jQuery 提供了 $.ajax() 方法，可以更方便地发送请求。

3.1 使用 jQuery 发送 GET 请求

$.ajax({
  url: 'https://api.example.com/data',  // 请求的 URL
  method: 'GET',                       // 请求方法
  success: function(response) {        // 请求成功的回调函数
    console.log(response);             // 打印返回的数据
  },
  error: function(error) {             // 请求失败的回调函数
    console.error(error);              // 打印错误信息
  }
});

代码解析：

$.ajax() 是 jQuery 提供的 Ajax 请求方法，简化了请求的配置和回调处理。
url：指定请求的 URL。
method：请求方法（GET、POST 等）。
success：请求成功时的回调函数。
error：请求失败时的回调函数。

3.2 使用 jQuery 发送 POST 请求

$.ajax({
  url: 'https://api.example.com/submit',  // 请求的 URL
  method: 'POST',                        // 请求方法
  contentType: 'application/json',       // 请求头，发送 JSON 数据
  data: JSON.stringify({
    username: 'JohnDoe',
    password: '12345'
  }),                                    // 发送的数据
  success: function(response) {          // 请求成功的回调函数
    console.log(response);               // 打印返回的数据
  },
  error: function(error) {               // 请求失败的回调函数
    console.error(error);                // 打印错误信息
  }
});