JavaScript 中 Ajax 原理？

Ajax（Asynchronous JavaScript and XML）是一种使用前端JavaScript和后端服务器进行数据交换的技术，能够在不刷新整个页面的情况下向服务器发送请求并获取数据。

Ajax 原理：

1. 创建 XMLHttpRequest 对象：
   JavaScript中的XMLHttpRequest对象是执行Ajax的核心。通过创建XMLHttpRequest对象，可以在后台与服务器进行数据交换。

2. 发送请求：
   使用XMLHttpRequest对象的open()方法指定HTTP请求的类型（GET、POST等）、URL和是否异步发送请求。

3. 接收响应：
   通过XMLHttpRequest对象的onreadystatechange事件处理程序，当请求状态发生变化时（比如从服务器接收到响应），可以处理返回的数据。

4. 处理响应：
   当XMLHttpRequest对象的readyState属性值变为4时，表示请求完成。可以通过status属性获取HTTP状态码，如果状态码为200，则表示请求成功。接着可以使用responseText或responseXML属性获取服务器响应的数据。

5. 更新页面（可选）：
   获取到服务器响应的数据后，可以使用JavaScript更新页面的内容，例如动态改变HTML元素、显示数据等。

示例代码：

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

// 监听状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // 处理服务器响应的数据
      console.log(xhr.responseText);
    } else {
      console.error('请求失败');
    }
  }
};

// 发送请求
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

这个示例演示了一个简单的Ajax请求过程。通过XMLHttpRequest对象发送GET请求，当状态变为4时表示请求完成，在这里通过控制台输出服务器返回的响应数据。

现代的JavaScript开发中，除了XMLHttpRequest，还有fetch API和基于Promise的axios等工具，它们提供了更便捷、更灵活的方式来执行Ajax请求。