XMLHttpRequest (XHR)

原理

XMLHttpRequest (XHR) 是一种在客户端和服务器之间进行异步数据交换的技术，它允许浏览器向服务器发送HTTP请求，获取数据并更新部分网页内容，而无需刷新整个页面。XHR 是现代Web开发中常用的一种技术，用于实现AJAX（Asynchronous JavaScript and XML）请求和数据交互。

以下是XMLHttpRequest的详细介绍：

1. 创建XMLHttpRequest对象：在JavaScript中，可以通过调用new XMLHttpRequest()来创建一个XMLHttpRequest对象。
2. 设置请求参数：通过XMLHttpRequest对象的属性和方法，可以设置请求的参数，包括请求方法（GET、POST等）、请求URL、是否异步、请求头信息、请求体等。
3. 发送请求：通过调用XMLHttpRequest对象的open()方法来初始化请求，并通过send()方法发送请求。如果是POST请求，可以在send()方法中传递请求体数据。
4. 监听状态变化：可以通过XMLHttpRequest对象的onreadystatechange属性来设置状态变化的回调函数，当请求状态发生变化时，会触发相应的回调函数。
5. 处理响应：当请求成功返回时，可以通过XMLHttpRequest对象的status属性来获取HTTP状态码，通过responseText或responseXML属性来获取服务器返回的数据。
6. 异步处理：由于XMLHttpRequest是异步请求，因此在发送请求后，不会阻塞页面其他操作，可以继续执行其他JavaScript代码。一旦请求完成，会触发相应的回调函数处理响应数据。
7. 错误处理：可以通过XMLHttpRequest对象的onerror属性来设置错误回调函数，处理请求失败或发生错误的情况。
8. 取消请求：可以通过调用XMLHttpRequest对象的abort()方法来取消正在进行的请求。

XHR的优势在于它可以在不刷新整个页面的情况下获取服务器数据并更新页面，从而实现更加流畅的用户体验。它在Web开发中广泛用于实现动态内容加载、表单提交、数据交互等功能。但也需要注意，由于XHR可以跨域请求数据，可能会涉及到安全性问题，因此在使用XHR时需要谨慎处理跨域请求和防止XSS攻击。

用法

使用XMLHttpRequest进行简单的GET请求示例：

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

// 设置请求参数
xhr.open('GET', 'https://api.example.com/data', true); // true表示异步请求

// 监听状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成
    if (xhr.status === 200) { // 成功返回
      console.log(xhr.responseText); // 获取服务器返回的数据
    } else {
      console.error('请求失败，状态码：' + xhr.status);
    }
  }
};

// 发送请求
xhr.send();

使用XMLHttpRequest进行POST请求示例：

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

// 设置请求参数
xhr.open('POST', 'https://api.example.com/submit', true);

// 设置请求头信息（可选）
xhr.setRequestHeader('Content-Type', 'application/json');

// 监听状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成
    if (xhr.status === 200) { // 成功返回
      console.log(xhr.responseText); // 获取服务器返回的数据
    } else {
      console.error('请求失败，状态码：' + xhr.status);
    }
  }
};

// 发送请求
var data = { name: 'John', age: 30 };
xhr.send(JSON.stringify(data)); // 将请求体数据作为参数发送

由于现代Web开发中更常使用fetch或axios等工具库来进行网络请求，因此XMLHttpRequest已逐渐被废弃，但它仍然是一种重要的基础知识，理解其原理和用法有助于更好地理解现代的网络请求技术。

fetch

fetch 是一种现代的用于进行网络请求的API，它是基于Promise的，提供了一种更简洁和灵活的方式来发送和处理网络请求。

使用 fetch 进行GET请求示例：

// 发送GET请求
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // 解析响应数据为JSON格式
  })
  .then(data => {
    console.log(data); // 处理获取到的数据
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

使用 fetch 进行POST请求示例：

// 设置请求参数
var requestOptions = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 30 }) // 请求体数据作为参数
};

// 发送POST请求
fetch('https://api.example.com/submit', requestOptions)
  .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('Fetch error:', error);
  });

fetch 的优点：

1. 使用Promise，支持链式调用，代码更加简洁和易读。
2. 默认不会携带Cookie等身份验证信息，避免了潜在的安全问题。
3. 支持跨域请求。
4. 更好地处理请求错误。

需要注意的是，fetch 在某些情况下可能不会像XMLHttpRequest那样自动处理HTTP错误状态（如 4xx 和 5xx 错误），所以需要手动检查响应的 ok 属性，并通过 response.json()、response.text() 等方法解析响应数据。

虽然 fetch 是现代Web开发的推荐用法，但也需要考虑兼容性问题。在一些旧版本的浏览器中可能不支持 fetch，可以考虑使用 polyfill 或者使用其他网络请求库（如axios）来实现类似功能。

XMLHttpRequest (XHR)与fetch区别

XMLHttpRequest 和 fetch 都是用于在前端发送网络请求的API，但它们有一些区别。

1. API设计：XMLHttpRequest: 是一个旧的、基于事件的API，使用起来相对复杂，需要手动注册事件监听器来处理异步请求的结果。fetch: 是基于Promise的现代API，更加简洁和易用，支持链式调用，通过then方法处理异步请求的结果。
2. 请求返回：XMLHttpRequest: 请求的返回值是 XMLHttpRequest 对象，需要通过 responseText 或 responseXML 等属性来获取响应数据。fetch: 请求的返回值是一个 Response 对象，需要通过 response.json()、response.text() 等方法来解析响应数据。
3. 跨域请求：XMLHttpRequest: 在发送跨域请求时，需要设置 withCredentials 属性为 true 才能携带Cookie等身份验证信息。fetch: 在默认情况下不会携带Cookie等身份验证信息，如果要发送跨域请求并携带身份验证信息，需要手动设置 credentials 选项为 'include'。
4. 错误处理：XMLHttpRequest: 需要手动检查响应的状态码和状态信息，并通过事件处理函数来处理错误。fetch: 默认情况下只会在网络错误的情况下抛出异常，不会自动处理HTTP错误状态（如 4xx 和 5xx 错误）。需要手动检查响应的 ok 属性，然后使用 response.json()、response.text() 等方法解析响应数据。
5. Promise支持：XMLHttpRequest: 不支持Promise，需要使用回调函数处理异步请求的结果。fetch: 支持Promise，可以通过 then 方法链式处理异步请求的结果。

由于fetch是一个现代API，它更加简洁和易用，并且提供了更好的Promise支持。在新的Web开发中，推荐使用fetch来代替XMLHttpRequest。但需要注意的是，fetch在某些情况下可能不会像XMLHttpRequest那样自动处理HTTP错误状态，需要手动检查和处理响应的状态码和状态信息。