AJAX（Asynchronous JavaScript and XML）是一种技术，用于在网页加载时从服务器异步获取数据，而无需重新加载整个页面。它允许在后台与服务器进行通信，提升网页的交互性和用户体验。AJAX 通常结合 JavaScript 和 XML（或 JSON）使用，但数据格式不限于 XML。

1. XMLHttpRequest 对象

• 创建对象:

  var xhr = new XMLHttpRequest();

• 设置请求:

  xhr.open('GET', 'https://api.example.com/data', true);
  

  • GET 是 HTTP 请求方法，https://api.example.com/data 是请求的 URL，true 表示请求是异步的。

• 处理响应:

  xhr.onload = function () {if (xhr.status >= 200 && xhr.status < 300) {console.log(xhr.responseText);} else {console.error('Request failed with status: ' + xhr.status);}
  };
  

  • xhr.responseText 包含服务器响应的数据。
  • xhr.status 是 HTTP 状态码，200 表示成功。

• 发送请求:

  xhr.send();

  • 对于 POST 请求，可能需要设置请求头和发送数据：

    xhr.open('POST', 'https://api.example.com/submit', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({ key: 'value' }));
    

2. Fetch API

• 发送请求:

  fetch('https://api.example.com/data').then(response => response.json())  // 解析 JSON 数据.then(data => console.log(data))    // 处理数据.catch(error => console.error('Error:', error));  // 错误处理
  

• POST 请求:

  fetch('https://api.example.com/submit', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ key: 'value' })
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
  

3. 异步操作

• AJAX 允许页面在后台完成数据请求和处理，而无需刷新整个页面。
• XMLHttpRequest 和 fetch 默认都是异步的，即在请求发出后，JavaScript 代码继续执行，不会等待服务器响应。

4. 回调函数

• XMLHttpRequest: 使用 onload、onerror 等事件处理响应。

  xhr.onload = function () {if (xhr.status === 200) {// 成功处理}
  };
  xhr.onerror = function () {// 错误处理
  };
  

• Fetch: 使用 then 和 catch 处理响应和错误。

5. 数据格式

• JSON: 最常用的数据格式。解析和生成 JSON 使用 JSON.parse 和 JSON.stringify。

  var jsonData = JSON.parse(xhr.responseText);  // 解析
  var jsonString = JSON.stringify({ key: 'value' });  // 转换为 JSON 字符串
  

• XML: 较少使用，但可以通过 responseXML 访问。

  var xmlDoc = xhr.responseXML;
  var elements = xmlDoc.getElementsByTagName('tagName');
  

6. 错误处理

• XMLHttpRequest: 使用 onerror 事件处理网络错误。

  xhr.onerror = function () {console.error('Network Error');
  };
  

• Fetch: 使用 catch 方法处理错误。

  fetch('https://api.example.com/data').then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json();}).then(data => console.log(data)).catch(error => console.error('Error:', error));

这涵盖了 AJAX 的核心概念和操作。