【爬虫】分析天气网后，整理的一点理论上的理解

消息头/请求头 —— 你的自我介绍：

里面有请求头和响应头。
当浏览器向服务器发送请求时，会附带一个“自我介绍”信封，告诉服务器一些基本信息。这就是请求头，所以请求头是我发给服务器的，里面会包括一些重要的信息，比如：

• Referrer：是告诉服务器，你从哪个链接跳转过来的，所以一定要有，不然就相当于没有护照的人想出境，肯定会被打回的。
• User-agent：是告诉服务器，你使用的操作系统、设备型号、浏览器，也是确保你不是爬虫的信息。
• Cookie：你的身份凭证和会话信息（非常重要！）。
• Content-Type：告诉服务器你发送的数据是什么格式（如JSON、表单）。

所以请求头我们自己要写好！

---

Cookie

相当于你的身份证：

• 身份识别：比如你登录了网站，服务器就用Cookie来记住你是张三而不是李四。

• 个性化设置：你的语言偏好、主题设置等。

在“网络”面板的Cookie标签里，你可以看到这个请求携带了哪些Cookie，以及服务器通过Set-Cookie让你设置哪些新的Cookie。

请求标签：你对服务器说的话，提的要求

显示的是你发送给服务器的所有数据，在get方法下请求的所有参数都附在URL里面了，所以请求体是空的，是无有效载荷的，只有在post方法下才能有“有效载荷”

响应标签：服务器对你说的话，返回给你的数据

响应给我的数据就是我要爬取的数据。
响应头【消息头里】是告诉我返回的数据是什么类型，比如
Content-Type：application/javascript
响应体【响应标签里】给我的是数据。

找post请求的数据：

1. 可以在**消息头【标签】**里面看，Content-Type 通常是 application/json 或
   application/x-www-form-urlencoded。
2. 在请求标签里面看载荷，会有具体的数据内容，而不是无有效载荷。

---

不只有XHR或Fetch，也有JSONP这种技术。

所以如果【网络 - XHR标签】里面看不到数据，可以看下JS，JSONP是把JSON数据包装在了js函数调用里面了。

为什么某条请求在【网络 - XHR标签】里看不到，却在JS标签里看到了？

• XHR标签：主要捕获由 XMLHttpRequest 对象发起的请求。这是一种比较“传统”的异步请求方式。

• JS标签：捕获的是通过【script】标签加载的JavaScript文件。

搜索“北京”时，浏览器是通过动态创建一个【script】标签来获取数据的，而不是用XHR，这正是 JSONP技术的典型特征。

那如何确认是哪种技术呢？

看方法是GET 类型是JS ，是JSONP

看响应标签也可以看到 callback 和 JSONP

XHR返回的是纯数据JSON，而JSONP返回的是一段可执行的JavaScript代码，看 消息头的响应头的Content-Type 也可以

1. XHR 是什么？

XHR 是 “XMLHttpRequest” 的缩写。

• 是什么：它是浏览器提供的一个JavaScript对象，可以让网页在不重新加载整个页面的情况下，向服务器发送请求和接收数据。

• 做什么用：这实现了页面的局部更新。比如你在搜索框输入“北京”，下面出现下拉推荐列表，这个列表数据就是通过XHR请求获取的。

• 在哪里：在“网络”面板中，XHR过滤器会只显示这类用于动态获取数据的请求。

在中国天气网的例子：
当你在搜索框输入“北京”时，那个用来获取城市列表的请求，就是一个XHR请求。

优点：支持所有HTTP方法，功能强大，错误处理完善，更安全。

补充：有的浏览器只能看到XHR，看不到Fetch。是因为在一些版本中，Fetch 请求被合并显示在 XHR 分类下了。可以直接勾选 XHR，它通常会同时显示传统的XHR和现代的Fetch请求。

2. JSONP是什么？

它是一种技术方案。它返回的是一段JavaScript代码，这段代码必然是由服务器端的某种语言（可能是Java、PHP、Python等）动态生成的。

简单说：服务器用Java/PHP生成了一个JSON字符串，然后把它包装成 callback(JSON字符串) 这样的JavaScript代码返回给浏览器。

缺点：只支持GET方法，错误处理困难，有安全风险。

3. 为什么有的网站用 JSONP 而不是 XHR/Fetch？

这是一个历史遗留问题，核心是为了绕过**“同源策略”**。

• 同源策略：浏览器出于安全考虑，默认禁止一个域名下的网页向另一个域名发送XHR/Fetch请求。
• JSONP的漏洞：【script】 标签的 src 属性不受同源策略限制。JSONP就利用了这个特性来实现跨域数据获取。
• 现代解决方案：现在有了 CORS 技术，服务器可以主动告诉浏览器允许哪些域来访问自己。因此，现代Web应用普遍采用更强大、更安全的
  XHR/Fetch + CORS 方案。

结论：中国天气网是一个比较老的系统，或者为了兼容老旧的浏览器，仍然采用了JSONP这种 “古老”的技术。

4.XHR和JSONP都要用到JS吗？
是的， 它们都是 “前端JavaScript与后端服务器通信” 的技术。但是，它们的依赖程度和工作方式有本质区别：

JSONP 更像是JS和HTML的混合技术，它严重依赖浏览器处理 script 标签的固有行为。XHR/Fetch 是纯粹的JavaScript编程接口，给了开发者更精细的控制权。

5. 什么是API端口

API端点 就是一个 “专门处理特定任务的服务器地址”。

一个生动的比喻：
把服务器想象成一家银行，API端点就是银行里不同的服务窗口。

https://api.bank.com/balance -> “查询余额”窗口https://api.bank.com/transfer -> “转账汇款”窗口https://api.bank.com/loan -> “申请贷款”窗口

每个窗口（端点）都有特定的职责，你去了对应的窗口，才能办成对应的事。

在技术上的体现：

它就是你在“网络”面板里看到的那个请求URL。比如中国天气网的 .../search?cityname=北京 就是一个“城市搜索”端点。比如DeepSeek的 .../api/v0/chat/completion 就是一个“聊天补全”端点。

所以，API端点 = 一个具体的URL，对应服务器上一个特定的功能。

每个API就相当于一个数据接口，它只负责验证和返回结果，不负责跳转。跳转是由前端逻辑决定的。【不像以前负责功能（验证）又负责跳转，现在就是实现了前后端的分离，API只负责验证】

后端：只提供数据API。API端点的核心职责：处理业务逻辑并返回数据状态（比如“登录成功”、“查询到的城市列表”）。前端：负责“显示和交互”，核心职责是：根据API返回的数据状态，决定如何更新界面（是跳转页面、显示数据还是弹出错误提示）。

form表单的默认方法是 GET！除此之外，几乎其他所有需要提交数据的场景，默认都是 POST。

如果HTML表单没有指定 method=“POST”，那么它提交时就会使用 GET 方法。

核心原则：

GET 是“读”操作——像在图书馆查书，可以反复做，不影响书籍本身。POST 是“写”操作——像在借书单上签字，做了就会改变状态。

所以，我们看到的 登录、注册、下单、付款 这些按钮时，它们触发的请求几乎肯定是 POST。

const 是 ES6 中声明变量的关键字，意思是【“常量引用”】，而非“常量值”

JavaScriptconst name = "张三";
name = "李四"; // 错误！会报错，因为const变量不能重新赋值const user = { name: "张三" };
user.name = "李四"; // 正确！因为user指向的对象没变，只是对象内部的属性变了
user = { name: "王五" }; // 错误！因为试图改变user变量本身的指向