《Python网络爬虫基础教程》课件 第2章 网页请求原理

第2章网页请求原理《Python网络爬虫基础教程》学习目标/Target了解并能够复述浏览器加载网页的完整过程。熟悉HTTP的基础知识，能够归纳URL格式、HTTP请求格式和HTTP响应格式熟悉网页的基础知识，能够归纳网页的开发技术、结构、分类和数据格式掌握HTTP抓包工具Fiddler的使用方法，能够独立安装并使用Fiddler工具熟悉浏览器开发者工具的使用方法，能够该工具分析网页结构和监控网络请求章节概述/Summary网络爬虫模拟了浏览器访问网页的过程，这个过程涉及浏览器与服务器的请求-响应交互机制，具体而言，浏览器向目标服务器发送请求，服务器接收并处理该请求后，将相应的网页数据返回给浏览器。因此，了解浏览器与服务器之间的通信方式和交互过程，理解网页的组成、结构、分类、数据格式，能加深对网络爬虫的理解。本章将针对网页请求原理的相关知识进行讲解。目录/Contents2.12.22.3浏览器加载网页的完整过程HTTP基础网页基础2.4HTTP抓包工具——Fiddler2.5浏览器开发者工具浏览器加载网页的完整过程2.1了解并能够复述浏览器加载网页的过程学习目标2.1浏览器加载网页的完整过程当我们在浏览器的地址栏中输“”，按Enter键后可以看到浏览器中显示了百度首页。那么，在按Enter键之后究竟发生了哪些事情呢？2.1浏览器加载网页的完整过程2.1浏览器加载网页过程（1）浏览器通过DNS服务器将域名转换为对应的IP计算机能够识别的IP地址。（2）浏览器通过IP地址向对应的Web服务器发送请求。（3）Web服务器接收到请求后对其进行处理，并将响应内容[通常是HTML（HypertextMarkupLanguage，超文本标记语言）文档]返回给浏览器。（4）浏览器对HTML文档进行渲染并呈现给用户。HTTP基础2.2熟悉HTTP的基本知识，能够归纳URL格式、HTTP请求格式和HTTP响应格式学习目标2.2.1URL简介2.2.1URL简介URL又称URL地址，用于指定因特网上某个资源的位置。URL地址的语法格式如下。scheme://[user]:[password]@host:[port]/path;[params]?[query]#[frag]2.2.1URL简介选项说明scheme表示方案，用于标识采用哪种传输协议访问服务器资源user表示用户，用于标识访问服务器资源时需要的用户名password表示密码，通常位于用户名后，两者以“:”分隔host表示主机地址，也就是存放资源的服务器主机名或IP地址port表示端口号，也就是存放资源的服务器监听的端口号path用于指定本次请求资源在服务器中的位置params表示访问资源时使用的协议参数，参数之间以“;”分隔query表示查询字符串，用于指定查询的资源，一般使用“?”与URL的其余部分进行分隔。查询字符串没有通用的格式，通常会以”&”连接多个参数，每个参数的名称与值使用“=”连接，如/?ie=utf-8&wd=pythonfrag表示片段，用于指定访问资源时某一部分资源的名称URL地址语法格式中各选项的说明2.2.1URL简介URL地址中比较重要的选项有scheme、host、port和path。host2.2.1URL简介传输协议说明示例File用于访问本地计算机的资源file:///Users/itcast/Desktop/basic.htmlFTP文件传输协议，用于访问共享主机的文件资源/moviesHTTP超文本传输协议，用于访问远程网络资源/static/interface/img/logo.pngHTTPS超文本传输安全协议，用于访问远程网络资源/channel/wallpaperMailto用于访问电子邮件地址mailto:null@scheme选项用于规定如何访问指定资源的主要标识符，它会告诉负责解析URL的应用程序应该使用什么传输协议。scheme2.2.1URL简介host指存放资源的主机名或者IP地址。它用于标识互联网上的唯一一台计算机，以保证用户可以高效地从成千上万台联网的计算机中找到这台计算机。IP地址分为IPv4（互联网协议第4版）和IPv6（互联网协议第6版）。目前较通用的IP地址是IPv4，通常表示为“a.b.c.d”的形式，如7就是一个IP地址。由于IP地址不方便人们记忆，因此人们发明了域名，并通过DNS服务器将域名和IP地址相互映射，例如.就是7对应的域名。host2.2.1URL简介port用于标识在一台计算机上运行的不同程序，它与主机地址以“:”进行分隔。每个网络程序都对应一个或多个特定的端口号，例如，采用HTTP协议的程序默认使用的端口号为80，采用HTTPS协议的程序默认使用的端口号为443。port2.2.1URL简介path是由0个或多个“/”符号隔开的字符串，一般用于指定本次请求的资源在服务器中的位置。path熟悉HTTP和HTTPS协议，能够说明HTTP和HTTPS协议的作用学习目标2.2.2HTTP和HTTPS当用户通过浏览器访问网站时，浏览器会向目标Web服务器发送请求，Web服务器接收并处理请求后，将响应结果返回浏览器。为了保证在浏览器和Web服务器之间传输数据的可靠性，浏览器和Web服务器必须遵守特定的通信协议。网络爬虫在抓取网页数据时，主要使用的是HTTP和HTTPS这两种协议。2.2.2HTTP和HTTPSHTTP用于在Web服务器和浏览器之间传输超文本资源。该协议采用请求-响应模式，能够高效、准确地完成超文本资源的传输。不过，HTTP协议采用无连接的设计方式，每次连接只能处理一个请求，服务器返回响应后立即断开连接，后续请求需要重新建立新的连接。2.2.2HTTP和HTTPSHTTPHTTPS协议在HTTP的基础上增加了安全套接字层（SecureSocketLayer，SSL），数据在传输过程中主要通过数字证书、加密算法、非对称密钥等技术完成互联网数据传输加密，实现互联网传输的安全保护。2.2.2HTTP和HTTPSHTTPS熟悉HTTP请求格式，能够说明HTTP请求格式中各字段的作用学习目标2.2.3HTTP请求格式2.2.3HTTP请求格式浏览器向Web服务器发送的信息是一个HTTP请求，每个HTTP请求由请求行、请求头、空行以及请求数据（有的也称为请求体）这4个部分组成。2.2.3HTTP请求格式1GET/item/Python/407313HTTP/1.12Host:3Connection:keep-alive4Pragma:no-cache5Cache-Control:no-cache……18Cookie:zhishiTopicRequestTime=1626326884529;......19通过浏览器访问百度百科页面中的词条python时发送的请求信息，具体如下。第1行代码是请求行，第2～18行代码是请求头，第19行是空行。需要注意的是，即使请求信息中没有请求体，也必须在末尾加上空行。2.2.3HTTP请求格式GET/item/Python/407313HTTP/1.1请求行的内容具体如下。在请求行中，GET表示向服务器请求网络资源时所使用的请求方法，/item/Python/407313表示请求网络资源的URL地址，HTTP/1.1表示使用的HTTP版本。请求行2.2.3HTTP请求格式常用的请求方法包括GET和POST，其中GET方法用于向服务器请求指定资源，POST方法用于向服务器提交数据，比如表单内容或文件上传，这些数据会被包含在请求体中进行传输。请求方法GET和POST的区别主要体现在两个方面，具体如下。GET方法通过请求参数传输数据，最多只能传输2KB的数据；POST方法通过请求体传输数据，传输的数据大小没有限制。传输数据大小GET方法的参数信息会在URL中明文显示，安全性比较低；POST方法传递的数据会隐藏在请求体中，用户看不到，安全性更高。安全性请求行值得一提的是，不同HTTP版本支持的请求方法有所不同。以目前使用较为广泛的HTTP1.0和HTTP1.1为例，HTTP1.0完善了请求/响应模型，并补充定义了GET、POST、HEAD等3种请求方法；HTTP1.1在HTTP1.0的基础上进行了更新，新增了OPTIONS、PUT、DELETE、TRACE、CONNECT等5种请求方法。2.2.3HTTP请求格式请求行请求行紧挨的部分就是若干个请求头信息，请求头主要用于说明服务器要使用的附加信息，如客户端可以接收的数据类型、压缩方法、客户端可以接受的字符集类型。每一个请求头均由一个头部字段名和值构成，头部字段名与值之间以冒号分隔。2.2.3HTTP请求格式请求头2.2.3HTTP请求格式HostHost是强制要求的字段，用于指定被请求资源服务器的主机名和端口号。当多个主机名共享同一个IP地址时（虚拟主机），服务器依赖此字段来确定客户端实际请求的是哪个网站。User-AgentUser-Agent用于标识客户端身份，包含浏览器类型、版本号、操作系统等重要信息。通常页面会根据不同的User-Agent信息自动作出适配，甚至返回不同的响应内容。AcceptAccept用于指定浏览器或其他客户端可以接受的多用途互联网邮件扩展文件类型。服务器据此实施内容协商，在所支持多种格式的资源中选择最合适的返回。RefererReferer用于标识当前请求的来源页面URL，即表示当前页面是通过此来源页面里的链接进入的。请求头2.2.3HTTP请求格式请求头Accept-CharsetAccept-Charset用于指定客户端支持的字符编码。由于UTF-8已成为Web标准编码，因此现在的浏览器已默认不再发送此字段。字符集信息现在主要通过Content-Type字段的charset参数指定，例如Content-Type:text/html;charset=utf-8。CookieCookie是在浏览器中寄存的小型数据体，它可以记载和服务器相关的用户信息，也可以用来实现模拟登录。Content-TypeContent-Type用于指定请求体的MIME类型，例如，text/html代表HTML格式，image/gif代表GIF图片，application/json代表JSON类型，更多文件类型可以查看Content-Type对照表。熟悉HTTP响应格式，能够说明HTTP响应格式中各字段的作用学习目标2.2.4HTTP响应格式Web服务器发送给浏览器的响应信息由4个部分组成，分别是状态行、响应头、空行、以及响应正文。2.2.4HTTP响应格式1HTTP/1.1200OK2Connection:keep-alive3Content-Encoding:deflate4Content-Security-Policy-Report-Only:default-srchttps:......……1011<html>12<head>13<metacharset="UTF-8">14<metahttp-equiv="X-UA-Compatible"content="IE=Edge"/>......通过浏览器访问百度百科中词条python时，Web服务器返回的响应信息，具体内容如下。第1行代码是状态行，第2～9行代码是响应头，第10行是空行，第11～14行代码是响应正文。需要注意的是，即使响应信息中没有响应正文，也必须在末尾加上空行。2.2.4HTTP响应格式HTTP/1.1200OK状态行的内容具体如下。在状态行中，HTTP/1.1表示HTTP协议的版本号，200表示响应状态码，OK表示响应状态码的简短描述。2.2.4HTTP响应格式状态行响应状态码代表服务器的响应状态，它的作用是告知浏览器请求Web资源的结果，如请求成功、请求异常、服务器处理错误等。响应状态码说明100~199表示服务器成功接收部分请求，要求浏览器继续提交剩余请求才能完成整个处理过程200~299表示服务器成功接收请求并已完成整个处理过程。常见状态码为200，表示Web服务器成功处理了请求300~399表示未完成请求，要求浏览器进一步细化请求。常见的状态码有302（表示请求的页面临时转移至新地址）、307（表示请求的资源临时从其他位置响应）和304（表示使用缓存资源）400~499表示浏览器发送了错误的请求，常见的状态码有404（表示服务器无法找到被请求的页面）和403（表示服务器拒绝访问，权限不够）500~599表示Web服务器出现错误，常见的状态码为500，表示本次请求未完成，原因在于服务器遇到不可预知的情况2.2.4HTTP响应格式状态行状态行下面的部分便是若干个响应头信息，关于响应头中的常用字段以及常用值的介绍如下。Cache-Control表示服务器告知浏览器当前的HTTP响应是否可以缓存。Connection表示浏览器是否使用持久HTTP连接。Content-Encoding表示服务器对特定媒体类型的数据进行压缩。Content-Type表示服务器告知浏览器实际返回的内容的内容类型。2.2.4HTTP响应格式响应头响应正文是服务器返回给客户端的具体数据，位于响应头之后的空行下方，数据的格式和编码方式由响应头中Content-Type字段明确指定。例如，响应消息中的Content-Type:text/html;charset=UTF-8，表示响应正文是一个采用UTF-8字符编码的HTML文档。2.2.4HTTP响应格式响应正文浏览器在接收到HTTP响应后，会根据响应正文的不同类型进行不同的处理。如果响应正文是DOC文档，那么浏览器会借助安装在本机的Word程序打开这份文档；如果响应正文是RAR压缩文件，那么浏览器会弹出一个下载窗口让用户下载解压软件；如果响应正文是HTML文档，那么浏览器会在自身的窗口中展示该文档。2.2.4HTTP响应格式响应正文网页基础2.3熟悉网页基础知识，能够归纳网页的开发技术学习目标2.3.1网页开发技术网页可以看作承载各种网站应用和信息的容器，它包含文字、图像、超链接、音频、视频以及动画等内容。通过查看网页的源代码可知，网页实际上是一个HTML文件。该文件包含了一些特殊符号和文本，可通过特殊符号和文本对文字、图片、表格、声音等进行描述。常用的网页开发技术包括HTML、CSS和JavaScript。其中，HTML用于描述网页中的内容，比如文本、图片等；CSS用于控制网页的样式和布局，比如颜色、排版和响应式设计；JavaScript用于实现网页的交互功能，如表单验证、动态内容更新等。2.3.1网页开发技术HTML是一种用于创建网页的标准标记语言。一个HTML文档由一系列的HTML元素组成，HTML元素指的是从开始标签到结束标签的所有代码，用于告诉浏览器如何显示内容。2.3.1网页开发技术HTML开始标签、内容、结束标签组合在一起便构成了一个完整的HTML元素。开始标签：标识元素的起始位置，由一对尖括号及元素名称构成，如图中的<h1>。尖括号内除了元素名称外，还可以包含一个或多个属性，这些属性以键值对的形式出现，用于为元素提供附加信息或功能，例如<ahref="https://exa"target="_blank">中的href和target属性。属性与元素名称之间以及多个属性之间需要用空格分隔，属性

值通常用引号引起来，以确保兼容性。内容：表示元素的内容，位于开始标签和结束标签之间，如图中的“学向勤中得，萤窗万卷书。”元素的内容既可以是纯文本，也可以是HTML元素。结束标签：标识元素的结束位置，其结构与开始标签相似，但在元素名称前必须添加一个斜线（/）作为结束标记，如图中的</h1>。结束标签不需要也不能包含任何属性，只需与对应的开始标签保持完全相同的元素名称。2.3.1网页开发技术HTML标签说明<html>HTML文档的根元素，用于定义整个HTML文档的结构<h1>~<h6>标题元素，用于定义HTML文档中的各级标题，其中<h1>的等级最高，<h6>的等级最低<img>图像标签，用于在HTML文档中嵌入图像<p>段落标签，用于定义HTML文档中的文本段落<a>链接标签，用于创建HTML文档中的超链接2.3.1网页开发技术HTML标签说明<title>标题元素，用于定义HTML文档在浏览器标签页中显示的标题<script>脚本元素，用于在HTML文档中嵌入或引用JavaScript代码<style>样式元素，用于在HTML文档中定义CSS样式信息<div>区块元素，用于将HTML文档中的其他元素组合成逻辑区块<textarea>多行文本输入框元素，用于在网页表单中创建可编辑的多行纯文本输入区域2.3.1网页开发技术HTML值得一提的是，HTML中存在一类特殊的空元素，比如<br>、<input>等，这些元素不需要包含任何内容，因此在标准HTML中可以直接使用单个标签表示。然而，在XHTML（eXtensibleHyperTextMarkupLanguage，可扩展超文本标记语言）和XML（eXtensibleMarkupLanguage，可扩展标记语言）等更严格的标记语言中，所有元素都必须显式闭合。为了确保代码的跨平台兼容性和规范性，推荐采用自闭合语法，比如<br/>，即在开始标签末尾添加斜线。2.3.1网页开发技术HTMLCSS是一种专门用于控制网页外观表现的样式语言，它通过为HTML元素设置样式规则来精确控制文本（字体、大小、颜色、间距）、图像（尺寸、边框、位置）以及整体页面布局等视觉呈现效果。作为与HTML配合使用的核心技术，CSS不仅能够实现内容与样式的分离，还支持响应式设计，可以根据不同设备和屏幕尺寸自动调整显示效果，同时提供丰富的选择器机制和层叠特性，允许开发者灵活地创建统一且多样化的网页界面风格。2.3.1网页开发技术CSS通过CSS控制登录页面中文字的大小、字体和背景颜色，如图所示。2.3.1网页开发技术CSSJavaScript是一种轻量级的解释型脚本语言，主要用于为网页添加交互功能和动态效果。作为Web开发的三大核心技术之一，它可以直接嵌入HTML文档，在浏览器端执行，实现表单验证、事件处理、异步通信等功能。例如，在登录页面中，当用户未填写用户名或密码就点击“登录”按钮时，JavaScript可以实时检测并弹出提示信息，提醒用户必须输入完整信息才能继续操作，如图所示。2.3.1网页开发技术JavaScript2.3.2网页的结构熟悉网页基础知识，能够归纳网页的结构学习目标2.3.2网页的结构如果想要深入了解一个网页的底层结构，可以通过浏览器提供的开发者工具进行查看。以Chrome浏览器为例，在百度首页右击，在弹出的快捷菜单中选择“检查”，即可打开开发者工具查看完整的网页结构，具体如图所示。百度首页的源代码包含了众多HTML元素。这些HTML元素是互相嵌套的，具有明显的层级关系，例如，<head>元素与<body>元素属于同级关系，<body>元素与<script>元素存在父子关系。HTML文档采用文档对象模型（DocumentObjectModel，DOM）这一重要的编程接口来描述其层次结构。DOM出现的目的是将JavaScript和HTML文档的内容联系起来，通过使用DOM可以在HTML文档中添加、移除和操作各种元素。根据互联网联盟（WorldWideWebConsortium，W3C）的HTMLDOM标准，HTMLDOM由节点组成，HTML文档的所有内容都被抽象为节点，整个HTML文档是一个文档节点，每个HTML元素是元素节点，每个HTML属性是属性节点，每个注释是注释节点。2.3.2网页的结构2.3.2网页的结构把一个HTML文档中的所有节点按照严格的层级关系组织在一起，就构成一棵HTMLDOM树。HTMLDOM节点树通过父、子以及兄弟等家族关系术语来精确描述节点之间的关联。2.3.3网页的分类熟悉网页基础知识，能够归纳网页的分类学习目标网页根据内容生成方式可以分为静态网页和动态网页两种类型，它们在技术实现、功能特点和爬取难度上存在显著差异。2.3.3网页的分类2.3.3网页的分类静态网页包含诸如文本、图像、Flash动画、超链接等内容，这些内容在服务器端以固定HTML文件形式存储，内容在源代码编写阶段就已确定。除非网页源代码被重新修改，否则这些内容不会发生变化。例如，某艺术设计部落网站的首页就是一个静态网页，具体如图所示。静态网页2.3.3网页的分类静态网页如要进行内容更新，需手动修改源代码，维护工作量大。维护成本上传至服务器后内容永久保存，不受访问行为影响。内容稳定性缺乏后台程序支持，功能扩展性差。交互局限响应速度快，无需数据库查询等后端处理。访问性能静态网页具有以下几个特点。需要注意的是，静态网页展示的内容并非是完全静止的，它也可以具有各种视觉上的动态效果，如GIF动图、Flash动画、滚动字幕等。2.3.3网页的分类相比静态网页，动态网页依托数据库和服务器端程序动态生成内容，能根据用户请求参数（如登录状态、搜索条件等）返回差异化内容。例如，登录某网站后查询百度公司信息的页面是一个动态网页，如图所示。动态网页2.3.3网页的分类动态网页动态网页具有以下几个特点。依赖数据库和服务器端的编程语言，比如PHP、Python等。实时生成响应内容，服务器没有独立的网页文件存储。支持用户认证系统、数据交互、表单提交等一些复杂功能。同一URL请求可能因用户权限、会话状态或实时数据变化返回不同内容。对于网络爬虫来说，静态网页的内容全部包含在HTML源代码中，可以直接从源代码中解析提取，抓取比较容易；而动态网页的内容往往需要用户登录认证后通过JavaScript异步加载或接口获取，不仅需要处理防爬虫措施，还可能涉及参数加密等复杂的技术，显著增加了抓取难度。2.3.3网页的分类多学一招动态网页通过JavaScript脚本实现数据动态加载与页面更新，打破了传统网页“一刷新全页更新”的限制，极大提升用户体验。动态网页上使用的技术主要包括AJAX、FetchAPI、前端框架、WebSocket。动态网页的核心技术多学一招AJAX（AsynchronousJavaScriptandXML）是一种可以在不刷新整个网页的情况下实现异步数据交互的核心技术，它借助XMLHttpRequest对象在后台与服务器通信，获取JSON、XML等格式数据后，通过JavaScript动态更新页面局部内容。由于AJAX的异步特性，网页在数据请求过程中不会出现卡顿或空白，显著提升了交互流畅性。例如，用户浏览社交媒体动态时，页面会随着滚动自动加载更多内容，无需手动点击翻页。这种无限滚动设计通过AJAX在后台请求下一页数据，动态插入到当前页面底部，保持了流畅的浏览体验。动态网页的核心技术多学一招AJAX的示例代码如下。动态网页的核心技术constxhr=newXMLHttpRequest();xhr.open('GET','/api/data',true);//异步请求xhr.onload=function(){if(xhr.status===200){constdata=JSON.parse(xhr.responseText);document.getElementById('content').innerHTML=data.html;//动态更新DOM}};xhr.send();多学一招FetchAPI是现代浏览器提供的用于取代XMLHttpRequest的新一代网络请求接口，它基于Promise对象设计，语法更简洁且功能更强大。开发者只需调用全局的fetch()方法即可发起GET、POST等多种请求，并支持自定义请求头、请求体及响应处理。相较于传统AJAX，FetchAPI的链式调用和语法使异步代码更易读、维护，且原生支持流式响应处理，已成为现代前端开发的主流选择。动态网页的核心技术多学一招FetchAPI的示例代码如下。动态网页的核心技术fetch('/api/data').then(res=>res.json()).then(data=>document.getElementById('content').innerText=data.message);<scripttype="text/javascript"src="/w/mini/static_2015/js/jquery-1.11.1.min.js?v=201512181512"></script>多学一招前端框架通过组件化设计与数据驱动渲染将网页拆分为可复用的功能模块，开发者只需关注数据状态的变化，框架会自动更新对应的DOM元素，实现动态渲染。以Vue为例，它采用简洁的模板语法和响应式系统，通过声明式的指令绑定数据和事件，极大提高了开发效率和代码可维护性，常用于构建单页应用、复杂交互界面等。动态网页的核心技术多学一招WebSocket是一种在单个TCP（TransmissionControlProtocol，传输控制协议）连接上实现全双工通信的网络协议，打破了传统HTTP请求响应模式的单向限制，支持客户端与服务器之间的实时双向数据传输。与需要客户端频繁轮询的HTTP不同，WebSocket建立持久连接后，服务器可主动向客户端推送数据，具有低延迟、高吞吐量的优势。这种特性使其成为在线聊天（如微信网页版）、实时数据监控（如股票行情监控）、协同编辑（如多人在线文档）等对实时性要求严苛场景的理想选择，通过减少通信开销和延迟，显著提升了交互式应用的用户体验。动态网页的核心技术2.3.4网页数据的格式熟悉网页基础知识，能够归纳网页的格式学习目标互联网数据从结构特征上可分为两大类型，分别是非结构化数据和结构化数据。非结构化数据是指数据结构不规则或不完整，没有预定义数据模型，难以用数据库二维表结构表示的数据，包括文本、图片、HTML文档等；结构化数据则是指能够规范地用二维表结构表示，严格遵循特定数据格式和长度规范的数据，主要包括XML和JSON。2.3.4网页数据的格式2.3.4网页数据的格式XML是一种类似于HTML的通用标记语言，用来标记数据、定义数据类型。XML允许用户根据业务需求自定义标签，这一点与固定标签的HTML形成鲜明对比。虽然两者共享相似的标签语法格式，但XML专注于数据的结构化存储与传输，而HTML始终定位于网页内容的展示。XML2.3.4网页数据的格式XML在图中<employees>、<employee>、<name>、<age>都属于XML元素，<employees>元素是整个XML片段的根元素，它包含了3个<employee>子元素，每个<employee>元素又包含了<name>和<age>这2个子元素。所有XML元素都由开始标记和结束标记组成，必须是成对出现的。在XML文档中，通过元素的嵌套关系可以很准确地描述具有树状层次结构的复杂数据。2.3.4网页数据的格式JSON是一种轻量级的数据交换格式，它采用完全独立于编程语言的文本格式存储和表示数据。JSON具有简洁、清晰的语法规则，支持数组、嵌套对象等复杂数据结构，便于人们阅读和编写。与XML相比，JSON没有冗余的标签闭合，数据体积更小，解析速度更快，现已成为Web应用中前后端数据交互的主流格式，广泛应用于API接口、配置文件等领域。JSON2.3.4网页数据的格式大括号用于定义对象，中括号用于定义数组。JSON对象是键值对集合，它严格遵循“键:值”的格式，如“name”:“小红”、“age”:20等，其中键名必须用双引号包裹，值可以是字符串、数字等，其中字符串类型的值需要双引号包裹，而数字类型的值直接书写。由左图可知，最外层是一个JSON对象，对象的键为employees，值为一个数组。该数组内部又包含3个JSON对象，每个JSON对象内部包含两个键值对。JSONHTTP抓包工具——Fiddler2.4熟悉Fiddler的工作原理，能够定义Fiddler的工作原理学习目标2.4HTTP抓包工具——Fiddler网络爬虫的核心原理是模拟浏览器向Web服务器发送请求并解析响应内容。对于静态网页来说，我们可以直接分析URL参数来构造有效请求，然而面对采用动态加载技术的动态网页，仅靠URL分析往往难以获取完整的请求信息。因此我们需要捕获浏览器和服务器之间的完整通信，深度剖析请求的细节，这个过程通常称为抓包。目前主流的抓包工具有Fiddler、Charles、Wireshark等，其中Fiddler凭借其出色的易用性和强大的调试功能，在Windows平台上应用比较广泛。2.4.1Fiddler的工作原理2.4.1Fiddler的工作原理Fiddler是一款专业的HTTP或HTTPS抓包与调试工具，它能够完整记录浏览器和Web服务器之间的所有通信数据，并提供强大的数据包截获、分析、修改和重发功能。相较于浏览器内置的开发者工具（如Chrome浏览器的F12工具）相比，Fiddler在HTTP调试方面具有更专业的特性和更强大的功能。Fiddler具有以下特点。支持监听所有基于HTTP和HTTPS协议流量，完整捕获浏览器发起的各类网络请求。01提供详细的请求信息或响应信息查看功能，包括头部、参数、内容等。02支持伪造客户端请求和服务端响应，是前后端联调的高效工具。03可对网站性能进行全面分析，包括请求耗时、数据大小等指标。04具备HTTPS会话解密能力，可查看加密通信内容（需安装信任证书）。05支持第三方插件扩展，显著提升工作效率。052.4.1Fiddler的工作原理Fiddler以代理服务器的模式运行，在浏览器和Web服务器之间建立中间代理层来监控网络通信，默认使用:8888作为代理地址。Fiddler启动时会自动配置系统代理，退出时自动清除配置，确保不影响其他程序的正常运行。2.4.1Fiddler的工作原理Fiddler代理服务器位于浏览器和Web服务器之间，它完整记录所有的请求和响应。图中箭头的流向可知，浏览器发送的请求先经过Fiddler代理服务器，Fiddler代理服务器捕获后会根据需求对请求做一些处理，处理完以后再转发给Web服务器；Web服务器返回的响应也先经过Fiddler代理服务器，Fiddler代理服务器捕获后会根据需求对响应做一些处理，处理完以后再转发给浏览器。掌握Fiddler的下载与安装，能够完成Fiddler的下载与安装学习目标2.4.2Fiddler的下载与安装2.4.2Fiddler的下载与安装步骤1步骤2步骤3步骤4访问Fiddler官网打开浏览器，在百度首页的搜索框中输入关键字“Fiddler”，进入Fiddler官网首页。在该页面中将鼠标移动到顶部菜单栏“FIDDLERTOOLS”的上方，弹出下拉菜单展示所有产品。Fiddler官网提供了FiddlerEverywhere、FiddlerClassic、FiddlerEverywhereReporter和FiddlerCore共4款产品，其中FiddlerClassic是专门为Windows平台订制的免费社区版本，具有完整的抓包、请求修改、性能分析、HTTPS解密等功能，能够满足教学需求，因此在这里选择下载FiddlerClassic这款产品。2.4.2Fiddler的下载与安装步骤2步骤1步骤3步骤4访问FiddlerClassic产品主页在官网中单击“FiddlerClassic”，进入FiddlerClassic产品主页。2.4.2Fiddler的下载与安装步骤3步骤1步骤2步骤4FiddlerClassic下载页面单击产品主页中的“TryForFree”按钮，进入FiddlerClassic产品的下载页面。第1个下拉列表框中选择FiddlerClassic的用途，在第2个文本框中填写电子邮箱，在第3个下拉列表框中选择国家或地区，并且勾选“IaccepttheFiddlerEndUserLicenseAgreement”复选框，接受用户许可协议。2.4.2Fiddler的下载与安装步骤4步骤1步骤2步骤3下载安装文件单击“DownloadForWindows*”按钮，开始下载安装程序FiddlerSetup.5.0.20253.3311-latest.exe至指定的目录。下载完成后，双击FiddlerSetup.5.0.20253.3311-latest.exe弹出Fiddler用户协议界面。2.4.2Fiddler的下载与安装步骤5步骤6选择安装路径单击“IAgree”按钮，进入选择Fiddler安装路径的界面。2.4.2Fiddler的下载与安装步骤6步骤5安装完成保持默认配置，单击“Install”按钮开始安装Fiddler，此时会以进度条的形式提示当前安装进度，直至打开网页并展示“Installationwassuccessful!”，则说明Fiddler安装成功。熟悉Fiddler的界面，能够说明Fiddler界面常用功能的作用学习目标2.4.3Fiddler界面详解2.4.3Fiddler界面详解Fiddler操作界面共划分为7个区域，它们分别为菜单栏、工具栏、会话面板、请求面板、响应面板、命令行面板和状态栏。其中，工具栏、会话面板、请求面板、响应面板包含了众多功能选项。2.4.3Fiddler界面详解图标说明作用Windows配置配置Fiddler可抓到哪些应用程序发送的请求备注为当前会话添加备注回放再次发送某个请求清除界面信息清除会话窗口列表的全部或部分请求bug调试单击该按钮可继续执行断点后的代码模式切换切换Fiddler的工作模式（默认是缓冲模式）解压请求对HTTP请求的内容进行解压会话保存设置保存会话的数量（默认是保存所有）工具栏2.4.3Fiddler界面详解图标说明作用过滤请求设置只捕获某一客户端发送的请求，拖拽该图标到该客户端的任意一个请求后会创建一个过滤器，右击该图标会清除之前设置的过滤器查找查找特定内容会话保存将所有会话保存到SAZ文件中截取屏幕既可以立即截取屏幕，也可以计时后截取屏幕计时器提供计时功能浏览器若选中某个会话，则可以使用IE浏览器或Chrome浏览器打开该会话清除缓存清空WinINET缓存。按下CTRL键并单击该按钮还会清除WinINET中保存的永久cookie工具栏2.4.3Fiddler界面详解图标说明作用编码和解码对文本进行编码和解码窗体分离将一个窗体分离显示MSDN搜索在微软开发者社区搜索帮助在浏览器中打开Fiddler的帮助界面显示系统状态显示当前系统是在线还是离线状态。如果是在线状态，将鼠标悬停在该按钮上方时，会显示本地主机名和IP地址删除工具栏删除工具栏（如果要恢复显示工具栏，可以在菜单栏中选择“View”→“ShowBar”）工具栏2.4.3Fiddler界面详解会话面板作为Fiddler的核心工作区域，位于操作界面的中央位置，以表格形式实时显示所有捕获到的基于HTTP或HTTPS的会话，每个会话占据一行。这里的会话是指浏览器与服务器之间的一次独立通信过程，包括从浏览器发起的请求到服务器返回的响应全过程。会话面板顶部设有多个标题。名称说明#会话序号，按照捕获的顺序自动生成Result响应状态码Protocol当前会话使用的协议类型Host请求的服务器、主机名和端口号URL请求的URL路径、文件和查询字符串Body显示响应正文的大小，单位字节数Caching显示与缓存相关的信息，通常为响应头中的Cache-Control或Expires字段的值Content-Type显示请求或响应的MIME类型，标识数据格式Proecess显示发起请求的客户端进程名称及进程IDComments显示用户为该会话添加的自定义注释，可通过右键会话→“Comments”手动编辑Custom显示用户添加的自定义键值对，可通过右键会话→“Custom”手动添加会话面板2.4.3Fiddler界面详解会话面板中可以使用不同的图标标记Fiddler捕获的会话信息，包括HTTP状态、响应类型、数据流类型等。图标说明通用的成功响应请求使用CONNECT方法，使用该方法构建传送加密的HTTPS数据流通道响应是JSON文件响应状态是HTTP/304，表示客户端缓存的副本已经是最新的响应是JavaScript脚本请求使用的是POST方法会话面板2.4.3Fiddler界面详解图标说明响应是图像文件会话被客户端、Fiddler或服务器中止响应的是CSS文件响应的是XML文件响应是服务器错误响应状态码为300、301、302、303或307会话面板中可以使用不同的图标标记Fiddler捕获的会话信息，包括HTTP状态、响应类型、数据流类型等。会话面板2.4.3Fiddler界面详解请求面板默认选择了“Inspectors”选项，该选项对应的面板会实时显示当前选定会话的详细请求信息。“Inspectors”选项的面板上方显示了一排菜单。名称说明Headers用分级视图显示由客户端发送到服务器的HTTP请求的请求头部信息，包括客户端信息、Cookie、传输状态等TextView以文本的形式显示POST请求的请求数据SyntaxView对特定格式的文本进行语法高亮和树形折叠WebForms直观显示GET请求的URL参数或POST请求的请求数据，仅支持Content-Type的值为application/x-www-form-urlencoded或multipart/form-data的情况HexView用十六进制格式显示二进制数据Auth显示请求头中的Proxy-Authorization（代理身份验证）和Authorization（授权）信息Cookies显示请求消息中的Cookie信息Raw显示完整的原始请求信息JSON显示JSON格式的文件XML将选中的请求和响应解释成一个XML格式的字符串，显示XML文档节点的树形图请求面板2.4.3Fiddler界面详解响应面板会实时显示当前选定会话的详细响应信息。该面板上方也显示了一排菜单，这些菜单的功能说明如表所示。名称说明Transformer显示响应的编码信息Headers用分级视图显示服务器返回响应的响应头信息TextView以文本的形式显示响应数据SyntaxView根据多个指定规则高亮显示多种类型的响应文本ImageView如果请求的是图片资源，则显示响应的图片HexView用十六进制数据显示响应响应面板2.4.3Fiddler界面详解名称说明WebView显示响应在Web浏览器中的预览效果Auth显示响应头部中的Proxy-Authorization和Authorization信息Caching显示本次请求的缓存信息Cookies显示任何发送出出去的请求的Cookie中的内容Raw以纯文本形式显示响应信息JSON显示JSON格式的文件XML如果响应体是XML格式，就是用分级的XML树形图来显示它响应面板会实时显示当前选定会话的详细响应信息。该面板上方也显示了一排菜单，这些菜单的功能说明如表所示。响应面板熟悉Fiddler的界面，能够说明Fiddler界面常用功能的作用学习目标2.4.4Fiddler捕获HTTPS页面的设置观察会话面板中每个会话的协议类型可知，Fiddler捕获的会话都是基于HTTP协议的，另外请求面板上方有个警告提示："HTTPSdecryptionisdisabled.Clicktoconfigure"，翻译后的意思是“HTTPS解密功能已禁用，点击此处配置”。之所以出现这种情况，是因为Fiddler出于安全考虑，默认不拦截基于HTTPS协议加密的会话。如果希望Fiddler能够对HTTPS会话进行解密，还需要对Fiddler工具做一些设置。2.4.4Fiddler捕获HTTPS页面的设置步骤1步骤2步骤3步骤4打开Options对话框在Fiddler的Tools菜单中选择Options选项，弹出Options窗口对话框。2.4.4Fiddler捕获HTTPS页面的设置步骤2步骤1步骤3步骤4切换至HTTPS选项的Options对话框2.4.4Fiddler捕获HTTPS页面的设置在Options对话框中选择“HTTPS”选项卡。CaptureHTTPSCONNECTs和DecryptHTTPStraffic，其中CaptureHTTPSCONNECTs复选框用于设置Fiddler工具是否捕获HTTPS连接，默认为勾选状态；DecryptHTTPStraffic复选框用于解密HTTPS通信，默认为未勾选状态。步骤3步骤1步骤2步骤4勾选DecryptHTTPStraffic复选框后的Options对话框2.4.4Fiddler捕获HTTPS页面的设置勾选HTTPS选项中的DecryptHTTPStraffic复选框，在该复选框的下方增加了若干选项。...fromallprocesses表示从所有进程捕获。Ignoreservercertificateerrors（unsafe）复选框用于设置是否忽略服务器证书错误。步骤4步骤1步骤2步骤3设置HTTP选项勾选Ignoreservercertificateerrors（unsafe），忽略服务器证书错误。2.4.4Fiddler捕获HTTPS页面的设置步骤5步骤6步骤7步骤8单击Actions按钮为Fiddler配置Windows信任根证书以解决安全警告，单击Actions按钮弹出选项列表。2.4.4Fiddler捕获HTTPS页面的设置步骤6步骤5步骤7步骤8确认信任Fiddler根证书在弹出的选项列表中选择TrustRootCertificate（受信任的根证书），弹出确认是否信任Fiddler根证书的对话框。2.4.4Fiddler捕获HTTPS页面的设置步骤7步骤5步骤6步骤8切换至Connections选项的Options窗口单击“Yes”按钮，确认信任根证书，跳转回设置好HTTP选项的Options对话框。在Options对话框中单击“Connections”选项，切换至Connections选项的Options对话框。2.4.4Fiddler捕获HTTPS页面的设置步骤8步骤5步骤6步骤7设置允许远程连接勾选Allowremotecomputerstoconnect复选框，设置允许远程连接，弹出EnablingRemoteAccess对话框。2.4.4Fiddler捕获HTTPS页面的设置配置完成单击“确定”按钮跳转回Connections选项的Options对话框，此时该对话框中的Allowremotecomputerstoconnect复选框已经被勾选。2.4.4Fiddler捕获HTTPS页面的设置单击“OK”按钮完成配置。为了使配置生效还需重启Fiddler。步骤9熟悉Fiddler的使用方法，能够使用Fiddler完成对有道翻译请求的捕获学习目标2.4.5Fiddler的基本使用了解了Fiddler的工作原理、界面、捕获HTTP页面的设置之后，接下来以“腾讯翻译君”网站为例，为大家演示如何使用Fiddler工具捕获翻译单词的会话。2.4.5Fiddler的基本使用步骤1步骤2步骤3步骤4访问腾讯翻译君首页在浏览器中打开腾讯翻译君网站的首页，首页中央有两块区域，其中左侧区域用于输入要翻译的文本，右侧区域用于展示对文本进行翻译后的结果。例如，在左侧区域中输入webcrawler，输入完成后可以看到右侧区域展示了webcrawler的翻译结果。2.4.5Fiddler的基本使用步骤2步骤1步骤3步骤4使用Fiddler捕获请求启动Fiddler工具，清空会话面板中的会话列表。在腾讯翻译君首页的左侧区域中单击文本，再次按下回车键，切换到Fiddler后可以看到捕获的所有会话，如图所示。2.4.5Fiddler的基本使用步骤3步骤1步骤2步骤4查看请求信息和响应信息双击选中的会话，可以看到Fiddler右侧的请求面板和响应面板中分别显示了该会话的请求信息与响应信息，如图所示。2.4.5Fiddler的