AJAX 简介

它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分内容。这使得网页能够实现更流畅、动态的交互体验。

使用步骤：

1. 创建 XMLHttpRequest 对象：

const xhr = new XMLHttpRequest();

2. 设置回调函数来监听状态变化：

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {  // 4 表示请求已完成
    if (xhr.status >= 200 && xhr.status < 300) {  // 成功状态码范围
      // 处理成功的响应数据
      const response = xhr.responseText;
      console.log(response);
    } else {
      // 处理错误情况
      console.error('请求出错');
    }
  }
};

3. 打开请求：

xhr.open('GET', 'http://example.com/data', true);  // 方法、地址、是否异步

4. 发送请求：

xhr.send();

一些要点：

• 可以根据需要设置请求头信息。

• 除了 GET 方法，还可以使用 POST 等其他方法。

• 响应数据可以是文本、JSON 等多种格式，根据实际情况处理。

案例：

比如一个实时搜索功能，当用户在输入框输入时，通过 AJAX 向后端发送请求获取实时的搜索建议并显示在页面上。

const searchInput = document.getElementById('searchInput');

searchInput.addEventListener('keyup', function() {
  const query = this.value;
  const xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const suggestions = JSON.parse(xhr.responseText);
      // 在这里处理并显示搜索建议
    }
  };

  xhr.open('GET', `http://example.com/search?s=${query}`, true);
  xhr.send();
});

这只是一个简单的示例，实际应用中 AJAX 可以与各种技术和框架紧密结合，实现更复杂和强大的功能