Ajax 笔记—— Ajax 原理

Ajax（Asynchronous JavaScript and XML）技术的核心是XMLHttpRequest对象。这个对象在浏览器中发起异步的HTTP请求，可以向服务器发送请求并处理响应，而不会影响页面的其他部分。

Ajax的工作原理如下：

1. 创建XMLHttpRequest对象。
2. 配置请求，包括设置请求方法（GET、POST等）、URL和异步（true表示异步）。
3. 设置请求状态变化的回调函数（例如：onreadystatechange）。
4. 发送请求。
5. 服务器响应，回调函数被触发。
6. 在回调函数中根据readyState和status检查请求是否成功完成。
7. 处理服务器返回的数据（可能是XML、JSON或纯文本）。

以下是使用XMLHttpRequest发送GET请求的示例代码：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置请求
var url = "your-server-endpoint";
xhr.open("GET", url, true);
 
// 设置回调函数
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功完成，处理响应
    var response = xhr.responseText;
    console.log(response);
  }
};
 
// 发送请求
xhr.send();

在现代前端开发中，由于Ajax的复杂性和Promise的出现，我们通常会使用fetch API来替代XMLHttpRequest。fetch使用Promise来处理异步操作，使得代码更简洁易懂。以下是使用fetch发送GET请求的示例代码：

// 发送GET请求
fetch("your-server-endpoint")
  .then(response => {
    if (response.ok) { // 确认响应成功
      return response.text(); // 解析文本内容
    }
    throw new Error('Network response was not ok.');
  })
  .then(text => {
    console.log(text); // 处理响应文本
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error); // 捕获错误
  });

以上两种方式都可以实现Ajax请求，但fetch API是目前较为现代和推荐的方法。