效果如图所示，可以拦截网页中所有的http请求并获取响应体内容，将里面的信息都打印到控制台显示出来，这个可以用于注入任何网页里面，例如使用浏览器插件注入这个代码，就可以获取网页的所有数据，还是很厉害的
具体的代码讲解逻辑
XMLHttpRequest.prototype.open 和 XMLHttpRequest.prototype.send 是 XMLHttpRequest 对象的两个核心方法，用于发起 HTTP 请求。它们的作用如下：
1. XMLHttpRequest.prototype.open
作用：
open 方法用于初始化一个 HTTP 请求。它指定请求的方法（如 GET、POST）、URL 以及是否异步执行请求。
语法：
ini
xhr.open(method, url[, async[, user[, password]]]);参数：
-
method：xml<ul> <li>请求的 HTTP 方法，例如 <code>"GET"</code>、<code>"POST"</code>、<code>"PUT"</code>、<code>"DELETE"</code> 等。</li> <li>必须是大写字符串。</li> </ul> </li> <li> <p><strong><code>url</code></strong>：</p> <ul> <li>请求的目标 URL。</li> <li>可以是相对路径（如 <code>"/api/data"</code>）或绝对路径（如 <code>"https://example.com/api/data"</code>）。</li> </ul> </li> <li> <p><strong><code>async</code>（可选）</strong>：</p> <ul> <li>是否异步执行请求。默认为 <code>true</code>（异步）。</li> <li>如果设置为 <code>false</code>，请求会同步执行，浏览器会阻塞直到请求完成（不推荐使用，已弃用）。</li> </ul> </li> <li> <p><strong><code>user</code>（可选）</strong>：</p> <ul> <li>用于认证的用户名。</li> </ul> </li> <li> <p><strong><code>password</code>（可选）</strong>：</p> <ul> <li>用于认证的密码。</li> </ul> </li>
示例：
arduino
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data", true);2. XMLHttpRequest.prototype.send
作用：
send 方法用于发送 HTTP 请求。如果请求是 GET 或 HEAD，通常不需要传递参数；如果是 POST 或 PUT，可以传递请求体数据。
语法：
ini
xhr.send([body]);参数：
-
body（可选） ：xml<ul> <li>请求体数据。可以是以下类型： <ul> <li><code>FormData</code>：用于上传表单数据。</li> <li><code>Blob</code>：用于上传二进制数据。</li> <li><code>ArrayBuffer</code>：用于上传二进制数据。</li> <li><code>string</code>：用于上传文本数据。</li> <li><code>null</code> 或省略：用于 <code>GET</code> 或 <code>HEAD</code> 请求。</li> </ul> </li> </ul> </li>
示例：
-
GET 请求：
xml<pre>const xhr = new XMLHttpRequest(); xhr.open("GET", "example.com/api/data", true); xhr.send(); -
POST 请求：
xml<pre>const xhr = new XMLHttpRequest(); xhr.open("POST", "example.com/api/data", true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.send(JSON.stringify({ name: "1024小神" }));
3. open 和 send 的工作流程
-
初始化请求：
xml<ul> <li>使用 <code>open</code> 方法初始化请求，设置请求方法、URL 和是否异步。</li> <li>例如： <pre>xhr.open("GET", "example.com/api/data", true); -
设置请求头（可选）：
xml<ul> <li>如果需要，可以在 <code>send</code> 之前设置请求头。</li> <li>例如： <pre>xhr.setRequestHeader("Content-Type", "application/json"); -
发送请求：
xml<ul> <li>使用 <code>send</code> 方法发送请求。</li> <li>如果是 <code>POST</code> 或 <code>PUT</code> 请求，可以传递请求体数据。</li> <li>例如： <pre>xhr.send(JSON.stringify({ name: "1024小神" })); -
监听响应：
xml<ul> <li>通过事件监听器处理响应。</li> <li>例如： <pre>xhr.onload = function() { if (xhr.status === 200) { console.log("Response:", xhr.responseText); } };
4. 完整示例
以下是一个完整的 XMLHttpRequest 使用示例：
javascript
const xhr = new XMLHttpRequest();
// 初始化请求
xhr.open("POST", "https://example.com/api/data", true);
// 设置请求头
xhr.setRequestHeader("Content-Type", "application/json");
// 监听响应
xhr.onload = function() {
if (xhr.status === 200) {
console.log("Response:", xhr.responseText);
} else {
console.error("Request failed with status:", xhr.status);
}
};
// 发送请求
xhr.send(JSON.stringify({ name: "1024小神" }));5. 注意事项
-
异步 vs 同步：
xml<ul> <li>异步请求（<code>async: true</code>）不会阻塞浏览器，推荐使用。</li> <li>同步请求（<code>async: false</code>）会阻塞浏览器，已弃用。</li> </ul> </li> <li> <p><strong>请求头设置</strong>：</p> <ul> <li>必须在 <code>open</code> 之后、<code>send</code> 之前设置请求头。</li> </ul> </li> <li> <p><strong>跨域请求</strong>：</p> <ul> <li>如果请求的目标 URL 是跨域的，需要服务器支持 CORS（跨域资源共享）。</li> </ul> </li> <li> <p><strong>错误处理</strong>：</p> <ul> <li>可以通过 <code>xhr.onerror</code> 监听请求错误。</li> </ul> </li>
总结
open：初始化请求，设置方法、URL 和是否异步。send：发送请求，可选传递请求体数据。- 两者结合使用，可以完成 HTTP 请求的发送和响应的处理。