前端 AJAX 原理与动态页面爬虫实战思路

AJAX 深度解析

什么是 AJAX

全称 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）。它不是新语言，而是一种组合技术，让网页在不刷新整个页面的情况下与服务器交换数据。

注意：虽然名字带 XML，但现代开发中几乎都用 JSON 替代，因为更轻量易读。

核心特点

• 异步：发请求后浏览器不阻塞，用户还能操作页面，响应回来再处理。
• 局部更新：只替换需要变化的部分，体验流畅。
• 无刷新：用户感知不到页面重载。

典型场景包括电商无限滚动、微博实时流、搜索建议联想等。

传统请求 vs AJAX

传统流程是：点击 -> 请求 -> 返回完整 HTML -> 页面刷新。 AJAX 流程是：触发 -> JS 后台请求 -> 返回数据 (JSON/HTML) -> JS 局部更新。

代码实现方式

原生 XMLHttpRequest

这是最基础的实现，虽然现在用得少，但理解原理很重要。

// 1. 创建对象
const xhr = new XMLHttpRequest();
// 2. 配置请求：GET 方式，目标地址，是否异步
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
// 3. 监听状态变化
xhr.onreadystatechange = function() {
  // readyState=4 完成，status=200 成功
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log('请求成功：', data);
    // 4. 更新页面内容
    document.getElementById('result').innerHTML = `
      <p>任务标题：${data.title}</p>
      <p>是否完成：${data.completed ? '是' : '否'}</p>
    `;
  }
};
// 5. 发送请求
xhr.send();

现代方案 Fetch API

ES6+ 引入，基于 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 对爬虫的影响在于数据不再直接存在于初始 HTML 中，而是通过 JS 异步加载。如果直接请求 URL，拿到的往往是空壳。

第一步：判断是否使用了 AJAX

打开浏览器开发者工具（F12），切换到 Network 标签。

1. 过滤 XHR 或 Fetch。
2. 刷新页面（Ctrl+R）。
3. 观察特征：
   • 如果看到大量 Type 为 xhr 或 fetch 的请求，且路径常含 /api/、/v2/ 等。
   • 预览数据能看到列表或详情，而原始 HTML（Ctrl+U）里找不到这些数据。
   • 时间线上，Document 先加载，随后出现一堆 XHR 请求。

第二步：解决方案

根据接口情况，优先级从高到低选择方案。

方案 1：直接调用 API（最优）

在 Network 面板找到对应的 XHR/Fetch 请求，复制接口地址和请求头。

• 无鉴权：直接请求即可。

import requests
url = "https://api.xxx.com/gold"
res = requests.get(url).json()
print(res)

• 需 Headers：复制 User-Agent、Referer、Cookie 等。

headers = {
    "User-Agent": "...",
    "Referer": "...",
    "Cookie": "..."
}
requests.get(url, headers=headers)

• 有加密参数：若存在 sign、token 等加密字段，通常需要逆向 JS 算法还原逻辑。

方案 2：模拟浏览器执行 JS

当接口加密复杂或逻辑分散时，使用自动化工具。

• Selenium / Playwright：让爬虫真正运行 JavaScript，渲染页面后再提取数据。

第三步：WebSocket 协议抓取

除了 AJAX，部分实时数据（如股票行情、直播弹幕）使用 WebSocket 传输。这是一种全双工通信，建立连接后双方可随时互发数据。

如何识别

在 F12 Network 面板切换到 WS 标签，刷新页面。若出现 ws:// 或 wss:// 连接且状态为 101 Switching Protocols，即为 WebSocket。

抓取方法

• 推荐：Playwright / Puppeteer 能自动处理握手和 Cookie，适合新手。

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("目标网址")
    
    # 监听 WebSocket 消息
    def handle_message(msg):
        print("收到 WS 数据:", msg)
    
    page.on("websocket", lambda ws: ws.on("framereceived", handle_message))
    input("按回车结束...")

• 轻量级：Python websocket-client 已知地址时使用，需手动构造连接参数。

import websocket

def on_message(ws, message):
    print("实时数据:", message)

ws = websocket.WebSocketApp(
    "wss://xxx.com/socket",
    header={"Cookie": "你的 cookie"},
    on_message=on_message
)
ws.run_forever()

注意：部分网站 WS 连接参数也加密，此时建议结合 Playwright 更稳妥。