AJAX 原理

AJAX（Asynchronous JavaScript and XML）技术的核心是在浏览器端使用JavaScript与服务器进行数据交换，传输数据不需要重新加载页面。其主要原理如下：

1. 创建一个XMLHttpRequest对象。
2. 设置请求的URL，以及请求方式（GET、POST等）。
3. 设置请求完成的回调函数。
4. 发送请求。
5. 服务器响应请求，返回数据。
6. 客户端JavaScript接收服务器返回的数据，并更新页面内容。

以下是一个简单的AJAX示例代码：

// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 设置请求的URL与请求方式
xhr.open('GET', 'https://api.example.com/data', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为200
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理服务器返回的数据
    var response = JSON.parse(xhr.responseText);
    console.log(response);
    // 更新页面内容
    document.getElementById('content').innerHTML = response.data;
  }
};
 
// 发送请求
xhr.send();

这段代码创建了一个AJAX请求，从服务器的https://api.example.com/data获取数据，并在获取数据后更新页面上ID为content的元素内容。