在学习爬虫的过程中，发现需要补充通信和关于网页的相关知识，所以看了《图解HTTP》，发现一点计算机基础都没有的我看起来相当吃力，但是感觉不是很难，所以想结合书籍和百度对审查元素功能进行学习，第一篇原创的来由。
本文的审查元素功能学习是以火狐浏览器中的有道翻译为对象，主要是学习网络（Network）模块。
以调用翻译模块为例：
第一行显示了审查元素的几个模块，其中网络模块是可以看到网络信息的传输等信息的内容。
1、状态栏
状态栏下面是状态码，状态码是表示客户端HTTP请求的返回结果、标记服务器端的处理是否正常、通知出现错误等工作。状态码的响应类别有五种，常用的状态码大概有十四种。
1.1 5种响应类别
1XX：接收的请求正在处理
2XX：请求正常处理完毕
3XX：需要进行附加操作完成请求
4XX：服务器无法处理请求
5XX：服务器处理请求出错
1.2 常用状态码
200：ok
在响应的报文内，随状态码一起返回的信息会因为方法的不同而不同。
get方法：对应请求资源的实体会作为响应返回。
head方法：响应中只返回首部，不会返回实体的主体部分
POST: 响应的消息体中包含此次请求的结果。
TRACE: 响应的消息体中包含服务器接收到的请求信息。
204：HTTP协议中204 No Content成功状态响应码表示目前请求成功，但客户端不需要更新其现有页面。204 响应默认是可以被缓存的。在响应中需要包含头信息ETag。
使用惯例是，在PUT请求中进行资源更新，但是不需要改变当前展示给用户的页面，那么返回 204 No Content。如果新创建了资源，那么返回201Created。如果页面需要更新以反映更新后的资源，那么需要返回200。
404:服务器没有资源并拒绝访问
2、方法
在HTTP/1.1中主要有:GET、 POST 、HEAD 、DELETE、 OPTIONS 、TRACE 、CONNECT。
GET:获取资源， 请求访问已被URI识别的资源。指定的资源经过服务器端解析后返回响应的内容，文本保持原样，CGI则执行后输出。
POST：主要用于传输实体的主体
PUT/DELETE：不带验证机制的传输/删除文件，所以一般网站不使用该方法
HEAD:与GET一样，不返回报文的主体，用于确认URI的有效性和资源的更新时间
OPTIONS：查询针对请求URI的指定资源支持方法
TRACE：让服务器端将之前的请求通信返回给客户端
CONNECT：使用加密的隧道传输
3、文件
文件指从响应端即服务器传输过来的文件，文件主要可以有HTML、CSS、JS、XHR、字体、图像、媒体、Flash、WS来筛选。
HTML，或者超文本标记语言，主要是为了提供一种创建结构化科学文档的方法。HTML可以嵌入诸如PHP或JavaScript之类的脚本语言来影响web页面的行为和内容。万维网联盟(W3C)维护了HTML和CSS标准。
CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间。
JSON(JavaScriptObject Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于ECMAScript(w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
很多人搞不清楚 JSON 和 Js 对象的关系，甚至连谁是谁都不清楚。其实，可以这么理解：
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。如
varobj = {a:'Hello', b:'World'};//这是一个对象，注意键名也是可以使用引号包裹的
varjson ='{"a": "Hello", "b": "World"}';//这是一个 JSON 字符串，本质是一个字符串
JSON 和 JS 对象互转
要实现从对象转换为 JSON 字符串，使用 JSON.stringify() 方法：
varjson = JSON.stringify({a:'Hello', b:'World'});//结果是 '{"a": "Hello", "b": "World"}'
要实现从 JSON 转换为对象，使用 JSON.parse() 方法：
varobj = JSON.parse('{"a": "Hello", "b": "World"}');//结果是 {a: 'Hello', b: 'World'}
XHR诞生前，网页要获取客户端和服务器的任何状态更新，都需要刷新一次，在XHR诞生后就可以完全通过JS代码异步实现这一过程。XHR的诞生也使最初的网页制作转换为开发交互应用，拉开了WEB2.0的序幕。
XHR是一种浏览器API，极大简化了异步通信的过程，开发者并不需要关注底层的实现，因为浏览器会为我们完成这些工作，如连接管理、协议协商、HTTP请求格式化等等。
网友评论