什么是XHR

XHR概述

XMLHttpRequest (XHR) 是浏览器中的一个 API，它允许 JavaScript 发送 HTTP 请求到服务器，然后处理服务器响应。XHR 通常被用于异步加载网页的一部分内容，也可以被用于后台获取数据等。

XHR的用途

XHR 主要用于：

• 异步加载网页的一部分内容，从而提升网页的性能和响应速度。
• 与服务器进行数据交互，如通过 AJAX 技术获取后台数据。
• 实现长轮询等技术，以实时更新网页内容。
• 实现其他需要向服务器发送请求、接收响应的功能。

XHR的过程

使用 XHR 发送请求大致的过程如下：

1. 创建 XMLHttpRequest 对象。

   var xhr = new XMLHTTPRequest();
   

2. 设置请求参数，包括请求的 URL、请求方式、请求头等。

   xhr.open('GET', '/api/data', true);
   xhr.setRequestHeader('Content-Type', 'application/json');
   

3. 监听 XHR 的 readyState 事件和 status 事件，以获得响应数据。

   xhr.onreadystatechange = function() {
     if(xhr.readyState === 4 && xhr.status === 200) {
       console.log(xhr.responseText);
     }
   }
   

4. 发送请求到服务器。

   xhr.send();
   

XHR的优缺点

优点：

• 异步请求不会阻塞页面渲染。
• 使用成熟的 http 协议，支持各种请求方式。
• 支持服务器推送技术，如长轮询等。

缺点：

• XHR 只能同源调用，不允许跨域请求。
• 对于跨域请求，需要额外配置 CORS 信息。
• 对于复杂的请求，代码量会比较多，需要 sxlajsx/jQuery 等额外工具的支持。

总结

XHR 的作用非常广泛，从异步加载网页内容到实现数据交互、服务器推送等功能都离不开它。与此同时，需要注意 XHR 的一些局限性和安全性问题，加强对其的学习和掌握，才能更好地应用它到实际项目当中。