在学习爬虫的过程中,发现需要补充通信和关于网页的相关知识,所以看了《图解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请求格式化等等。