一、XHR

1、概念

XHR，全称XMLHttpRequest，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它允许网页的JavaScript代码与服务器进行异步通信，即在发送请求后，浏览器不会阻塞用户的后续操作，而是等待服务器响应后再处理数据。XHR是AJAX（Asynchronous JavaScript and XML）技术的核心，尽管名称中包含“XML”，但实际上它并不限于传输XML数据，也可以传输JSON、HTML、纯文本等多种格式的数据。

2、工作原理

• 创建XHR对象：首先，JavaScript代码需要创建一个XHR对象。在现代浏览器中，这通常通过new XMLHttpRequest()来实现。
• 配置请求：接下来，使用XHR对象的open()方法来配置请求，包括请求的类型（如GET、POST）、请求的URL以及是否异步处理请求等。
• 发送请求：配置完成后，通过调用XHR对象的send()方法来发送请求。对于POST请求，可以在send()方法中传递请求的主体数据。
• 处理响应：在请求发送后，可以通过监听XHR对象的readystatechange事件或检查其readyState属性来确定请求的状态。当请求完成并成功接收响应时，可以读取responseText或responseXML属性来获取响应数据。
• 处理错误：如果在请求过程中发生错误，可以通过监听error事件或检查XHR对象的status属性来处理错误情况。

3、XHR断点

3.1、概念

XHR断点是一种用于调试前端开发中的XMLHttpRequest（XHR）请求的功能。XHR断点允许开发人员在发送和接收XHR请求时暂停代码执行，以便检查请求和响应的详细信息，以及对其进行调试和分析。

3.2、设置XHR断点

打开网页开发者面板，切换到"源代码"页签，可以设置XHR断点，如下：

3.3、断点触发位置

XHR断点会在XHR请求被分派时中断代码执行。也就是说，当浏览器准备发送或接收一个XHR请求时，如果该请求与设置的断点条件匹配，代码执行就会暂停。

示例：通过XHR断点观察请求头与载荷信息