AJAX基础知识

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 的核心概念和操作。