在现代Web开发中，前端页面经常通过JavaScript动态加载数据，其中XHR（XMLHttpRequest）是最常用的异步数据请求方式之一。很多页面的核心数据并不直接写在HTML源码里，而是通过XHR请求从后端接口获取后，由JavaScript动态插入到DOM中。如果要提取这类页面的嵌入式数据，就需要绕过XHR的限制，找到数据加载和嵌入的规律。
XHR的工作原理与数据嵌入流程
XHR是浏览器提供的用于客户端和服务器之间传输数据的接口，允许网页在不重新加载页面的情况下，向服务器发送请求并获取响应数据。典型的数据嵌入流程如下：
- 页面加载完成后，JavaScript代码触发XHR请求，向后端接口发送数据请求
- 后端返回JSON、XML等格式的响应数据
- 前端JavaScript解析响应数据，将其插入到对应的DOM节点中，完成页面内容的渲染
提取嵌入式数据的常用方法
1. 拦截XHR请求直接获取数据
如果目标数据是通过XHR请求返回的，最直接的方式是拦截XHR请求，获取接口返回的原始数据。以浏览器环境为例，可以通过重写XMLHttpRequest的原型方法实现拦截：
// 保存原始的XMLHttpRequest send方法
const originalSend = XMLHttpRequest.prototype.send;
// 重写send方法
XMLHttpRequest.prototype.send = function (body) {
// 监听请求加载完成事件
this.addEventListener('load', function () {
// 判断请求是否为目标XHR接口
if (this.responseURL.includes('/api/data')) {
console.log('拦截到XHR响应数据:', this.responseText);
// 这里可以对响应数据进行处理，提取需要的内容
}
});
// 调用原始的send方法
originalSend.call(this, body);
};
2. 模拟执行JavaScript获取渲染后的DOM数据
如果数据已经被嵌入到DOM中，也可以通过无头浏览器模拟执行JavaScript，等待页面渲染完成后提取DOM中的数据。以下是使用Puppeteer的示例代码：
const puppeteer = require('puppeteer');
async function extractData() {
// 启动浏览器
const browser = await puppeteer.launch();
const page = await browser.newPage();
// 访问目标页面
await page.goto('https://ipipp.com/dynamic-page');
// 等待目标数据所在的DOM节点加载完成
await page.waitForSelector('.data-container');
// 提取DOM中的嵌入式数据
const data = await page.evaluate(() => {
const container = document.querySelector('.data-container');
return container.innerText;
});
console.log('提取到的嵌入式数据:', data);
await browser.close();
}
extractData();
3. 分析接口参数直接请求数据接口
如果XHR请求的接口没有复杂的加密校验，也可以直接分析接口的请求参数，模拟发送请求获取数据。以下是使用Node.js的axios库发送请求的示例：
const axios = require('axios');
async function fetchDataFromApi() {
try {
const response = await axios.get('https://ipipp.com/api/data', {
params: {
page: 1,
size: 10
},
headers: {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
}
});
console.log('接口返回的数据:', response.data);
} catch (error) {
console.error('请求接口失败:', error);
}
}
fetchDataFromApi();
注意事项
在提取嵌入式数据时，需要注意以下几点：
- 遵守目标网站的robots协议，不要过度频繁请求，避免给服务器造成压力
- 如果XHR接口有签名、token等校验机制，需要先分析校验逻辑，再模拟请求参数
- 部分页面的XHR请求是动态生成的，需要结合页面的JavaScript逻辑分析请求触发的时机
提取嵌入式数据的核心是理解页面的数据加载逻辑，根据实际场景选择合适的方法，才能高效准确地获取目标数据。
XHRJavaScript数据提取页面爬取修改时间：2026-07-15 20:09:11