目前 80% 的网站都使用了AJAX技术那么传统的爬虫通过 html 来获取数据就不行了总结一下 AJAX 相关知识。1、前端三大核心前端开发的三大核心基础是HTML、CSS和JavaScript。HTML 负责搭建网页的结构与内容结构CSS 负责网页的样式、布局和视觉效果表现JavaScript 负责网页的交互、逻辑和数据处理行为HTML结构层本质上是 标记语言Markup Language通过标签描述页面元素。常见标签:h1标题/h1p段落/pahrefhttps://example.com链接/aimgsrcimage.jpgdiv/div页面结构示例:!DOCTYPEhtmlhtmlheadtitle网页标题/title/headbodyh1Hello World/h1p这是一个网页/p/body/htmlCSS表现层主要负责颜色字体布局动画响应式设计示例h1{color:red;font-size:30px;}HTML CSSh1classtitleHello/h1.title{color:blue;}JavaScript行为层负责动态效果用户交互请求服务器数据操作DOM示例点击按钮改变文字buttononclickchangeText()点击/buttonpidtextHello/pfunctionchangeText(){document.getElementById(text).innerTextHello JS;}最后再举一个三者的例子一个按钮HTML 定义按钮 CSS 让按钮变漂亮 JS 点击按钮触发逻辑代码buttonidbtn点击/buttonstylebutton{background:red;color:white;}/stylescriptdocument.getElementById(btn).onclickfunction(){alert(点击成功);}/script2、AJAXAJAX 是什么全称Asynchronous JavaScript and XML异步 JavaScript 和 XML。它不是一种新的编程语言而是一种 Web 开发技术组合用于让网页在不重新加载整个页面的情况下与服务器交换数据并更新部分页面内容。⚠️ 补充虽然名字里带 XML但现在实际开发中几乎都用 JSON更轻量、易读代替 XMLAJAX 只是沿用了历史名称。核心特点异步Asynchronous发送请求后浏览器不用等着服务器响应可以继续做其他事比如用户还能点击按钮、输入内容响应回来后再处理局部更新只更新网页需要变化的部分不是整个页面重新加载体验更流畅无刷新用户看不到浏览器的刷新动作交互感更自然。举例在电商页面下滑自动加载更多商品微博 / 抖音无限滚动加载新内容输入关键词实时出搜索建议这些全是 AJAX。和传统请求对比传统网页请求流程用户点击按钮 / 提交表单浏览器向服务器发送请求服务器返回完整 HTML整个页面刷新AJAX 的流程用户触发操作JavaScript 在后台发送 HTTP 请求服务器返回数据JSON / XML / HTMLJavaScript 只更新页面的一部分简单代码示例两种常用方式方式 1原生 XMLHttpRequestAJAX 基础实现// 1. 创建 XMLHttpRequest 对象核心constxhrnewXMLHttpRequest();// 2. 配置请求请求方式、请求地址、是否异步默认truexhr.open(GET,https://jsonplaceholder.typicode.com/todos/1,true);// 3. 监听请求状态变化核心xhr.onreadystatechangefunction(){// readyState4 表示请求完成status200 表示响应成功if(xhr.readyState4xhr.status200){// 4. 处理服务器返回的数据JSON格式constdataJSON.parse(xhr.responseText);console.log(请求成功返回数据,data);// 5. 局部更新页面比如把数据显示到页面document.getElementById(result).innerHTMLp任务标题${data.title}/p p是否完成${data.completed?是:否}/p;}};// 4. 发送请求xhr.send();// 页面中需要有一个容器来显示结果// div idresult/div方式 2现代方案 fetch API更简洁推荐原生 fetch 是 ES6 新增的 AJAX 方案语法更简洁支持 Promise// 发起 GET 请求fetch(https://jsonplaceholder.typicode.com/todos/1)// 第一步处理响应转为 JSON 格式.then(response{if(!response.ok){thrownewError(请求失败response.status);}returnresponse.json();})// 第二步使用数据局部更新页面.then(data{console.log(fetch请求成功,data);document.getElementById(result).innerHTMLp任务ID${data.id}/p p任务标题${data.title}/p;})// 捕获请求异常.catch(error{console.error(请求出错,error);document.getElementById(result).innerHTMLp请求失败请重试/p;});AJAX 的实际应用场景实时表单验证比如注册时输入用户名立刻检查是否已被占用不用提交整个表单滚动加载比如刷朋友圈、抖音下滑自动加载更多内容搜索建议输入关键词时实时弹出相关搜索提示如百度搜索实时数据展示比如股票行情、天气信息、聊天消息的实时更新。AJAX 对爬虫的影响AJAX 对爬虫的影响本质是改变了“数据出现的位置和时机”。传统爬虫思路请求 URL → 拿到 HTML → 用 XPath / 正则提取数据。AJAX 页面你直接请求 URL拿到的 HTML 是空壳、没有数据数据全是 JS 后来异步加载的。如何判断是否使用了AJAX1、浏览器开发者工具F12按 F12或右键 → 检查切换到 Network网络 标签在 Filter过滤器里输入 XHR 或 Fetch或者直接勾选 XHR/Fetch 复选框刷新页面Ctrl R判断标准如果看到一大堆 JSON 请求Type 列显示 xhr 或 fetch而且请求路径带 /api/、/v2/、/feed 等等 → 就是 AJAX这些请求返回的数据正是页面显示的内容预览里能直接看到列表/详情同时 CtrlU 查看原始 HTML 几乎是空的只有div idapp/div→ 确认是 JS 通过 AJAX 加载数据小技巧时间线上看页面 HTML 先加载Document然后才出现一堆 XHR → 典型 AJAX 特征Document 就是你最开始请求的那个网页 HTML浏览器先把整个页面的骨架html、head、body、空的 div一次性下载完这一步叫 Document 加载完成。如果 Filter 里什么都没有只有静态 CSS/JS → 不是 AJAX可能是 SSR 直出2、对比“原始源码” vs “真实页面”右键页面 → 查看网页源代码CtrlU搜索你肉眼看到的数据如商品标题、文章内容搜不到 → 数据不在 HTML 里 → 一定是 AJAX或 WebSocket如果 Network 里又有 XHR JSON → 100% 是 AJAXAJAX 页面爬虫的解决方案方法1直接调用 API最优方案步骤打开浏览器F12 → Network找 Fetch/XHR 请求复制接口判断 API 是否可以直接爬检查 Request Headers重点看cookie token sign authorization分三种情况。情况1无鉴权最简单请求类似GET https://api.xxx.com/gold直接importrequests urlhttps://api.xxx.com/goldresrequests.get(url).json()print(res)完成。情况2需要 headers例如User-Agent Referer Cookie复制浏览器请求头headers{User-Agent:...,Referer:...,Cookie:...}requests.get(url,headersheaders)情况3接口有加密当接口存在signtoken加密参数例如signmd5(timestampsecret)需要逆向 JS 算法。方法2模拟浏览器使用SeleniumPlaywright让爬虫 执行 JavaScript。3、WebSocket除了 AJAX还有一种传统爬虫无法直接抓取数据的情况就是使用了 WebSocket 协议传输数据。WebSocket 是一种基于 TCP 的全双工双向通信协议和我们熟悉的 HTTP 有本质区别HTTP客户端主动发请求 → 服务端响应 → 连接关闭请求 - 响应模式单向 / 被动WebSocketWS客户端与服务端完成一次握手后建立持久连接双方可以随时互相发送数据实时、双向。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.1101Switching Protocols Upgrade: websocket Connection: Upgrade然后HTTP 连接升级为 WebSocket后续通信就 不再使用 HTTP而是 WebSocket 帧协议因此可以总结为WebSocketHTTP 握手 独立通信协议端口和网络兼容WebSocket 通常使用协议默认端口HTTP80HTTPS443WS80WSS443常见使用 WS 的典型场景实时股票/行情雪球、东方财富、同花顺直播弹幕/聊天抖音直播、B站直播、淘宝直播体育比分、电竞数据在线监控、推送通知某些银行风控页、游戏对战某些 IM 类应用特点数据不是一次性加载而是持续推送。页面初始 HTML 可能完全没数据或只有骨架所有内容靠 WS 实时进来。如何判断网站用了 WebSocket1、F12 → Network切换到 WS 标签WebSocket刷新页面 → 如果出现 ws:// 或 wss:// 的连接且状态是 101 Switching Protocols → 就是 WS2、看 Initiator很多是 main.js 或 socket.js 发起的持久连接如何爬取 WebSocket 数据推荐优先级从易到难方法1Playwright / Puppeteer最推荐新手首选Pythonfrom playwright.sync_apiimportsync_playwrightwithsync_playwright()asp:browserp.chromium.launch(headlessFalse)pagebrowser.new_page()page.goto(目标网址)# 监听所有 WebSocketpage.on(websocket,lambdaws:print(WS 连接:,ws.url))# 监听消息核心defhandle_message(msg):print(收到 WS 数据:,msg)# 这里就是你要的数据page.on(websocket,lambdaws:ws.on(framereceived,handle_message))input(按回车结束...)# 保持运行优点自动处理握手、Cookie、反爬几乎零逆向。方法2纯 Python websocket-client轻量适合已知 WS 地址Pythonimport websocketdefon_message(ws,message):print(实时数据:,message)# 解析 JSON 即可wswebsocket.WebSocketApp(wss://xxx.com/socket,# 从 Network 复制 ws 地址on_messageon_message,header{Cookie:你的cookie}# 带登录态)ws.run_forever()部分网站 WS 连接参数加密token、sign、device_id需要先逆向 JS 才能构造 ws url。这时通常结合 Playwright 更稳。
