本文讲述了在网页动态加载中遇到的问题，通过分析网络面板详细解释了JS和Fetch/XHR的区别，以及如何处理网页数据中的16进制编码。作者探讨了爬虫技术中遇到的挑战，包括反爬措施和数据解析技巧。
完蛋 蚌埠住了
引言
日常吐槽
今天剪辑好了一个视频
英文版
Boss说语速太快，让我调慢
说看视频的人母语很多不是英语
我用的是AI的正常语速
哪里快了（一直都是这样的好不啦）
这么多年了，你应该找找自己的问题（李主播上身）
是的咧
这视频就应该为您量身打造
你印象中的客户都跟您一样
绝了
视频越改
质量越差
当然
我自己也不是科班
拍的也不是很好
有哪个大佬指条明路呀
言归正传
不是要爬取这个什么值得买吗
我就爬，昨天也发了文章（问篇）
然
发现一堆问题
我们一步步解决
一步步来
所以
这是一个多集
会详细且细致的一步步分析
搞清楚里面的前因后果
爬虫与反爬知识
遂
你觉得深入好
还是把代码直接搞出来发布好呢?
步骤一
分析网页
一般之前爬取的都是直接加载在html上面
可是这个不一样
他会动
看到没
他是通过JS加载的（后面发现不是 XX）
如果我们直接爬取页面数据
最多也就第一页20个数据
后面加载的数据我们就爬取不到
遂
分析网络加载
我们按F12，调出浏览器的开发工具
我用的是谷歌浏览器
之前的文章不是介绍我用的三大浏览器嘛
（找了一下 发现，MD在草稿箱，文章还没写完）
我爬虫用的开发者工具主要也是用谷歌
简洁 兼容性最好
开发工具记住这三个按钮
- 选择网络面板
- 清空网络日志
- 录制网络日志
你打开网站然后
就会有网络日志
遂
你先用2清理一下
然后
到达指定位置
再用3开启记录
记录完之后
避免有新的日志干扰
遂
记得在点击3关闭录制
详细说说网络面板
Network（网络）面板是用于监控和分析网页加载时所有的网络请求和响应情况的一个重要功能区。当用户访问网页或在网页上执行任何导致发送网络请求的操作（如点击链接、提交表单、加载图片等），Network面板都会捕获并显示这些HTTP/HTTPS请求及其详细信息。
具体来说，Network面板可以用来：
- 查看请求列表：展示所有页面加载过程中发起的网络请求的时间顺序和状态。
- 检查请求详细信息：包括请求方法（GET、POST等）、请求URL、HTTP头信息、请求体内容以及响应头信息、返回的状态码、响应体内容（JSON、HTML、CSS、JavaScript等）和加载时间。
- 性能分析：通过Timeline视图了解资源加载的详细时间线，帮助诊断性能瓶颈，如DNS查询时间、TCP连接建立时间、TLS握手时间、首字节时间、内容下载完成时间等。
- 缓存控制：查看哪些资源是从缓存中加载的，哪些是重新从服务器获取的。
- 数据筛选与排序：可以根据请求类型（XHR、Fetch、Doc、Stylesheet、Image等）、文件大小、加载时间等多种条件进行筛选和排序。
- 模拟不同网络环境：开发者还可以利用Network面板模拟不同的网络状况，如限制带宽、增加延迟等，以测试网页在各种网络条件下的加载效果。
实际操作
下滑到要加载新数据的地方，但是还没加载，或者直接
清空网络日志
开启录制
下滑网页，加载新的数据
加载完记得再点一下 关闭录制
文件类型过滤，只看JS（只熟悉JS）
没有 心里苦
再点点别的（Fetch？XHR）
耶，有！快看看
双击数据，点击响应
发现都是这种码 \uXXXX
这是16进制数，看了下英文没问题，只有中文编码不对
不过这个 数据应该就是我们要的商品数据了
因为里面有article_id 这些关键信息
点击（Headers）看看
看到最后面得这个page,带有页码的更能说明是我们要的数据
应该可以推断，后面加载的数据可以通过改边页码来获取
我们继续下拉
看看请求头都有什么
居然有Cookie，但我没登录呀
先不理
最后把Referer 和 User-Agent Copy 一下
测试代码
import requests # 导入requests库
url = "https://faxian.smzdm.com/json_more?filter=h3s0t0f163c5&page=2" # 设置请求的URL地址
headers = {
'Referer': 'https://faxian.smzdm.com/h3s0t0f163c5p1/', # 设置请求头的Referer字段
'User-Agent': 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36' # 设置请求头的User-Agent字段
}
# 模拟请求
response = requests.get(url, headers=headers) # 发送GET请求，并将返回的响应存储在response变量中
print(response.status_code) # 打印响应的状态码
print(response.text) # 打印响应的文本内容
测试结果
没有问题
返回的状态码正常
返回的文本内容跟响应也是一样的
然
怎么这么多16进制数？
怎么办？
其中有两个问题我们还留着
知识点
JS和Fetch/XHR是什么？有什么关联？
JavaScript (JS) 是一种广泛应用于网页和网络应用开发的高级、动态、弱类型脚本语言。在浏览器环境中，JavaScript 能够与用户交互，处理DOM操作，执行异步编程，以及实现前后端通信。
XMLHttpRequest (XHR) 是一个由W3C标准定义的API，它允许JavaScript在不刷新页面的情况下发送HTTP（或HTTPS）请求到服务器并接收数据。自AJAX（Asynchronous JavaScript and XML）技术流行以来，XHR一直是浏览器中实现异步通信的核心技术之一，它使得Web应用程序能够动态加载内容，并且更新页面部分而无需完全刷新整个页面。
Fetch API 是一个现代的、基于Promise的、用于取代传统XHR的网络请求API。Fetch提供了更简洁、易于使用的接口来获取资源，支持各种HTTP方法、请求头、响应体处理以及可选的缓存策略等。Fetch同样可以用来进行异步数据交换，但其语法更加现代化且符合ES6 Promise规范。
关联：
- Fetch 和 XHR 都是用于在浏览器环境下进行客户端与服务器之间数据交换的技术。
- Fetch 是对 XMLHttpRequest 的改进和简化，提供了一种更接近现代JavaScript编程风格的API。
- Fetch 返回的是Promise对象，这使得它可以无缝集成到异步流程控制如async/await中，提高了代码的可读性和错误处理能力。
- Fetch 对某些情况下的错误处理和状态判断需要开发者手动检查
Response.ok属性，而XHR通过事件回调机制处理这些状态。 - Fetch 提供了更好的流处理支持，包括ReadableStream和Blob等。
- Fetch 相比于传统的XHR，在某些旧版浏览器中可能没有很好的兼容性，因此在实际项目中可能需要polyfill或者降级回退到XHR方案。
清晰明了，整理成表格
| 技术名称 | 描述 | 关键特性 |
|---|---|---|
| JavaScript (JS) | 一种高级、动态、弱类型脚本语言，广泛应用于网页和网络应用开发。支持DOM操作、事件处理、异步编程等功能，允许在客户端与服务器之间进行数据交互。 | - 动态类型系统 - 异步编程（Promise, async/await） - DOM操作和事件驱动 - 客户端脚本语言 |
| XMLHttpRequest (XHR) | W3C定义的API，用于浏览器环境下的HTTP(S)请求，是AJAX技术的核心组成部分。通过XMLHttpRequest对象，JavaScript可以发送同步或异步请求至服务器并接收响应数据，实现页面无刷新更新。 | - 同步/异步请求 - 支持多种HTTP方法（GET, POST等） - 自定义请求头和响应处理 - 需要手动管理请求状态和回调函数 |
| Fetch API | 现代化的网络请求API，旨在简化并替代传统的XHR。基于Promise设计，提供更简洁、灵活的接口以获取资源，并兼容现代JavaScript编程范式。 | - 基于Promise - 更简洁的语法 - 支持Request/Response对象 - 可配置缓存策略 - 需要手动检查 Response.ok来判断请求成功与否 |
关联性：
- JavaScript 是执行 Fetch 和 XHR 请求的基础环境。
- XHR 是较早的浏览器内置API，用于异步通信。
- Fetch API 是对 XHR 的现代化改进，提供了更符合现代编程习惯的API设计和更好的错误处理机制。
更加清晰啦
这告诉我们
能用图别用字
网页数据的中文为什么是16进制数，以及如何判断？
这种形式（\uXXXX）在JSON、JavaScript以及一些编程语言中用来表示Unicode字符，主要基于以下原因：
-
编码兼容性：Unicode是一种国际标准的字符集，包含了世界上几乎所有的字符和符号。使用
\uXXXX转义序列可以确保文本数据在不同系统、平台和编码环境间传输时保持一致。 -
JSON规范要求：JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它规定字符串中的非ASCII字符必须以
\u0000到\uFFFF之间的十六进制转义序列表示。\uXXXX表示一个4字节的Unicode字符码点。 -
JavaScript语法：在JavaScript字符串字面量中，也可以用
\uXXXX来表示Unicode字符，以便于在代码中插入特殊或非英文字符。
判断方法：
-
当你在解析JSON或JavaScript字符串时，如果看到
\u后面跟着四个十六进制数字，就可以断定它是Unicode转义序列，代表一个特定的Unicode字符。 -
在Python中，你可以尝试将这样的字符串解码为普通文本，例如通过
json.loads()函数加载JSON字符串，或者直接将\uXXXX转换为对应的Unicode字符（在Python 3中，普通的字符串就能直接处理Unicode字符，无需额外转换）。
# 解析JSON字符串
import json
data = '{"name": "\u4eac\u4eab\u7ea2\u5305"}'
json_data = json.loads(data)
print(json_data["name"]) # 输出："京享红包"
通过以上方式，你可以识别并正确处理这类Unicode转义序列形式的文本数据。
结尾
不知不觉
一个步骤一就有这么多东西
细节和问题还是蛮多的
暂时打住
否则要变成裹脚布（又臭又长）了
且待我解决16进制数码的这个问题
再来发文哈
如果各位有什么高招也可以知会我下
道友在此谢过！！！
那么
有缘再见
扫一扫
702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
