XMLHttpRequest (XHR) 与 fetch

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)