跳到主要内容前端 AJAX 详解与动态页面爬虫实战思路 | 极客日志JavaScript大前端算法
前端 AJAX 详解与动态页面爬虫实战思路
综述由AI生成前端三大核心及 AJAX 技术原理,包括 XMLHttpRequest 和 Fetch API 的使用。重点讲解了 AJAX 对传统爬虫的影响,提供了通过浏览器开发者工具判断 AJAX 请求的方法。针对 AJAX 和 WebSocket 数据抓取,给出了直接调用 API、模拟浏览器(Selenium/Playwright)及使用 websocket-client 等解决方案,并包含代码示例。
全栈工匠37 浏览 目前 80% 的网站都使用了 AJAX 技术,那么传统的爬虫通过 HTML 来获取数据就不行了,总结一下 AJAX 相关知识。
1、前端三大核心
前端开发的三大核心基础是 HTML、CSS 和 JavaScript。
- HTML 负责搭建网页的结构与内容(结构)
- CSS 负责网页的样式、布局和视觉效果(表现)
- JavaScript 负责网页的交互、逻辑和数据处理(行为)
HTML(结构层)
本质上是标记语言(Markup Language),通过标签描述页面元素。
常见标签:
<h1>标题</h1><p>段落</p><a href="https://example.com">链接</a><img src="image.jpg"><div></div>
页面结构示例:
<!DOCTYPE html>
<html>
<head><title>网页标题</title></head>
<body>
<h1>Hello World</h1>
<p>这是一个网页</p>
</body>
</html>
CSS(表现层)
h1{color: red;font-size: 30px;}
<h1 class="title">Hello</h1>
JavaScript(行为层)
<button onclick="changeText()">点击</button><p id="text">Hello</p>
function changeText(){
document.getElementById("text").innerText="Hello JS";
}
<button id="btn">点击</button>
<style>
button{ background:red; color:white;}
</style>
<script>
document.getElementById("btn").onclick=function(){ alert("点击成功");}
</script>
2、AJAX
AJAX 是什么
全称:Asynchronous JavaScript and XML(异步 JavaScript 和 XML)。它不是一种新的编程语言,而是一种 Web 开发技术组合,用于让网页在不重新加载整个页面的情况下与服务器交换数据并更新部分页面内容。
⚠️ 补充:虽然名字里带 XML,但现在实际开发中几乎都用 JSON(更轻量、易读)代替 XML,AJAX 只是沿用了历史名称。
核心特点
- 异步(Asynchronous):发送请求后,浏览器不用等着服务器响应,可以继续做其他事(比如用户还能点击按钮、输入内容),响应回来后再处理;
- 局部更新:只更新网页需要变化的部分,不是整个页面重新加载,体验更流畅;
- 无刷新:用户看不到浏览器的刷新动作,交互感更自然。
- 在电商页面下滑,自动加载更多商品
- 微博 / 抖音无限滚动加载新内容
- 输入关键词,实时出搜索建议
和传统请求对比
- 用户点击按钮 / 提交表单
- 浏览器向服务器发送请求
- 服务器返回完整 HTML
- 整个页面刷新
- 用户触发操作
- JavaScript 在后台发送 HTTP 请求
- 服务器返回数据(JSON / XML / HTML)
- JavaScript 只更新页面的一部分
简单代码示例(两种常用方式)
方式 1:原生 XMLHttpRequest(AJAX 基础实现)
const xhr = new XMLHttpRequest();
xhr.open('GET','https://jsonplaceholder.typicode.com/todos/1',true);
xhr.onreadystatechange=function(){
if(xhr.readyState ===4&& xhr.status ===200){
const data =JSON.parse(xhr.responseText);
console.log('请求成功,返回数据:', data);
document.getElementById('result').innerHTML =` <p>任务标题:${data.title}</p> <p>是否完成:${data.completed ?'是':'否'}</p> `;
}
};
xhr.send();
方式 2:现代方案 fetch API(更简洁,推荐)
原生 fetch 是 ES6+ 新增的 AJAX 方案,语法更简洁,支持 Promise:
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response=>{
if(!response.ok){throw new Error('请求失败:'+ response.status);}
return response.json();
})
.then(data=>{
console.log('fetch 请求成功:', data);
document.getElementById('result').innerHTML =` <p>任务 ID:${data.id}</p> <p>任务标题:${data.title}</p> `;
})
.catch(error=>{
console.error('请求出错:', error);
document.getElementById('result').innerHTML ='<p>请求失败,请重试</p>';
});
AJAX 的实际应用场景
- 实时表单验证:比如注册时输入用户名,立刻检查是否已被占用(不用提交整个表单);
- 滚动加载:比如刷朋友圈、抖音,下滑自动加载更多内容;
- 搜索建议:输入关键词时,实时弹出相关搜索提示(如百度搜索);
- 实时数据展示:比如股票行情、天气信息、聊天消息的实时更新。
AJAX 对爬虫的影响
AJAX 对爬虫的影响,本质是改变了'数据出现的位置和时机'。
传统爬虫思路:请求 URL → 拿到 HTML → 用 XPath / 正则提取数据。
AJAX 页面:你直接请求 URL,拿到的 HTML 是空壳、没有数据,数据全是 JS 后来异步加载的。
如何判断是否使用了 AJAX
1、浏览器开发者工具(F12)
- 按 F12(或右键 → 检查)
- 切换到 Network(网络) 标签
- 在 Filter(过滤器)里输入 XHR 或 Fetch(或者直接勾选 XHR/Fetch 复选框)
- 刷新页面(Ctrl + R)
- 如果看到一大堆 JSON 请求(Type 列显示 xhr 或 fetch),而且请求路径带 /api/、/v2/、/feed 等等 → 就是 AJAX!
- 这些请求返回的数据正是页面显示的内容(预览里能直接看到列表/详情)
- 同时 Ctrl+U 查看原始 HTML 几乎是空的(只有
<div></div>)→ 确认是 JS 通过 AJAX 加载数据
- 时间线上看:页面 HTML 先加载(Document),然后才出现一堆 XHR → 典型 AJAX 特征
Document 就是你最开始请求的那个网页 HTML
浏览器先把整个页面的骨架(html、head、body、空的 div)一次性下载完,这一步叫 Document 加载完成。
- 如果 Filter 里什么都没有,只有静态 CSS/JS → 不是 AJAX(可能是 SSR 直出)
2、对比'原始源码' vs '真实页面'
- 右键页面 → 查看网页源代码(Ctrl+U)
- 搜索你肉眼看到的数据(如商品标题、文章内容)
- 搜不到 → 数据不在 HTML 里 → 一定是 AJAX(或 WebSocket)
- 如果 Network 里又有 XHR JSON → 100% 是 AJAX
AJAX 页面爬虫的解决方案
方法 1:直接调用 API(最优方案)
- 打开浏览器
- F12 → Network
- 找 Fetch/XHR 请求
- 复制接口
判断 API 是否可以直接爬
cookie token sign authorization
情况 1:无鉴权(最简单)
import requests
url ="https://api.xxx.com/gold"
res = requests.get(url).json()
print(res)
User-Agent Referer Cookie
headers ={"User-Agent":"...","Referer":"...","Cookie":"..."}
requests.get(url, headers=headers)
情况 3:接口有加密
sign=md5(timestamp+secret)
方法 2:模拟浏览器
3、WebSocket
除了 AJAX,还有一种传统爬虫无法直接抓取数据的情况,就是使用了 WebSocket 协议传输数据。
WebSocket 是一种基于 TCP 的全双工双向通信协议,和我们熟悉的 HTTP 有本质区别:
- HTTP:客户端主动发请求 → 服务端响应 → 连接关闭(请求 - 响应模式,单向 / 被动);
- WebSocket(WS):客户端与服务端完成一次握手后,建立持久连接,双方可以随时互相发送数据(实时、双向)。
WebSocket 连接建立时,必须先通过 HTTP 协议进行握手(HTTP Upgrade)。客户端发送一个 HTTP 请求,请求升级协议。
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: xxxxx
Sec-WebSocket-Version: 13
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
后续通信就 不再使用 HTTP,而是 WebSocket 帧协议
WebSocket = HTTP 握手 + 独立通信协议
| 协议 | 默认端口 |
|---|
| HTTP | 80 |
| HTTPS | 443 |
| WS | 80 |
| WSS | 443 |
- 实时股票/行情(雪球、东方财富、同花顺)
- 直播弹幕/聊天(抖音直播、B 站直播、淘宝直播)
- 体育比分、电竞数据
- 在线监控、推送通知(某些银行风控页、游戏对战)
- 某些 IM 类应用
特点:数据不是一次性加载,而是持续推送。页面初始 HTML 可能完全没数据(或只有骨架),所有内容靠 WS 实时进来。
如何判断网站用了 WebSocket?
- 切换到 WS 标签(WebSocket)
- 刷新页面 → 如果出现 ws:// 或 wss:// 的连接,且状态是 101 Switching Protocols → 就是 WS!
2、看 Initiator:很多是 main.js 或 socket.js 发起的持久连接
如何爬取 WebSocket 数据
方法 1:Playwright / Puppeteer(最推荐,新手首选)
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
page = browser.new_page()
page.goto("目标网址")
page.on("websocket",lambda ws:print("WS 连接:", ws.url))
def handle_message(msg):
print("收到 WS 数据:", msg)
page.on("websocket",lambda ws: ws.on("framereceived", handle_message))
input("按回车结束...")
优点:自动处理握手、Cookie、反爬,几乎零逆向。
方法 2:纯 Python websocket-client(轻量,适合已知 WS 地址)
import websocket
def on_message(ws, message):
print("实时数据:", message)
ws = websocket.WebSocketApp("wss://xxx.com/socket",
on_message=on_message,
header={"Cookie":"你的 cookie"}
)
ws.run_forever()
部分网站 WS 连接参数加密(token、sign、device_id),需要先逆向 JS 才能构造 ws url。这时通常结合 Playwright 更稳。
相关免费在线工具
- 加密/解密文本
使用加密算法(如AES、TripleDES、Rabbit或RC4)加密和解密文本明文。 在线工具,加密/解密文本在线工具,online
- Gemini 图片去水印
基于开源反向 Alpha 混合算法去除 Gemini/Nano Banana 图片水印,支持批量处理与下载。 在线工具,Gemini 图片去水印在线工具,online
- Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
- Escape 与 Native 编解码
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
- JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
- JavaScript 压缩与混淆
Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online