前后端交互Ajax

在前后端交互中使用Ajax通常涉及到以下几个步骤：

1. 创建一个XMLHttpRequest对象（或使用现代浏览器支持的fetch API）。
2. 配置请求，包括指定请求的方法（GET、POST等）、URL以及是否异步。
3. 设置请求头（如需要）。
4. 发送请求，并处理响应。

以下是使用原生JavaScript的XMLHttpRequest对象发送Ajax请求的示例代码：

// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'http://example.com/api/data', true);
 
// 发送请求
xhr.send();
 
// 处理服务器响应
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    // 请求已完成并且响应已就绪
    if (xhr.status === 200) {
      // 成功响应
      console.log(xhr.responseText);
    } else {
      // 错误响应
      console.error('请求失败，状态码：', xhr.status);
    }
  }
};

如果使用fetch API，代码会更简洁：

// 发送GET请求
fetch('http://example.com/api/data')
  .then(response => {
    if (response.ok) {
      return response.json(); // 如果期望得到JSON数据
    }
    throw new Error('网络问题');
  })
  .then(data => {
    // 处理数据
    console.log(data);
  })
  .catch(error => {
    // 错误处理
    console.error('请求失败：', error);
  });

以上两种方式都是前端常用的发送Ajax请求的方法，使用fetch API是现代浏览器推荐的方式，因为它提供了更好的异步处理和更多的优点。