web前端常识之浏览器原理

一、HTTP协议定义

URL的组成

例如：http://www.alimama.com/membersvc/index.htm。它的含义如下：

• http://：代表超文本传输协议，通知baidu.com服务器显示Web页，通常不用输入；
• www：代表一个Web（万维网）服务器；
• alimama.com/：这是装有网页的服务器的域名，或站点服务器的名称；
• membersvc/：为该服务器上的子目录，就好像我们的文件夹；
• index.htm：index.htm是文件夹中的一个HTML文件（网页）。

HTTP 协议的基本特点：

• 支持客户 / 服务器模式。
• 简单快速 ： 客户向服务器请求服务时 ， 只需传送请求方法和路径 。 请求方法常用的有 GET 、 POST 。 每种方法规定了客户与服务器联系的类型不同 。 由于 HTTP 协议简单 ， 使得 HTTP 服务器的程序规模小，因而通信速度很快。
• 灵活： HTTP 允许传输任意类型的数据对象。正在传输的类型由 Content-Type 加以标记。
• 无连接 ： 无连接的含义是限制每次连接只处理一个请求 。 服务器处理完客户的请求 ， 并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
• 无状态： HTTP 协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面 ， 在服务器不需要先前信息时它的应答就较快。

Internet的基本协议是TCP/IP协议，然而在TCP/IP模型最上层的是应用层（Application layer），它包含所有高层的协议。高层协议有：文件传输协议FTP、电子邮件传输协议SMTP、域名系统服务DNS、网络新闻传输协议NNTP和HTTP协议等。

HTTP协议（HyperText Transfer Protocol，超文本传输协议）是用于从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等。

二、HTTP协议通信过程

当我们在浏览器的地址栏输入“www.baidu.com”然后按回车，这之后发生了什么事，我们直接看到的是打开了对应的网页，那么内部客户端和服务端是如何通信的呢？

基于HTTP协议的客户/服务器模式的信息交换过程，它分四个过程：建立连接、发送请求信息、发送响应信息、关闭连接。

1. URL自动解析 HTTP URL包含了用于查找某个资源的足够信息，基本格式如下：HTTP://host[“:”port][abs_path]，其中HTTP表示桶盖HTTP协议来定位网络资源；host表示合法的主机域名或IP地址，port指定一个端口号，缺省80；abs_path指定请求资源的URI；如果URL中没有给出abs_path，那么当它作为请求URI时，必须以“/”的形式给出，通常这个工作浏览器自动帮我们完成。例如：输入www.taobao.com;浏览器会自动转换成：http://www.taobao.com/
2. 获取IP，建立TCP连接 浏览器地址栏中输入”HTTP://www.xxx.com/”并提交之后，首先它会在DNS本地缓存表中查找，如果有则直接告诉IP地址。如果没有则要求网关DNS进行查找，如此下去，找到对应的IP后，则返回会给浏览器。当获取IP之后，就开始与所请求的Tcp建立三次握手连接，连接建立后，就向服务器发出HTTP请求。
3. 客户端浏览器向服务器发出HTTP请求 一旦建立了TCP连接，Web浏览器就会向Web服务器发送请求命令，接着以报头信息的形式向Web服务器发送一些别的信息，之后浏览器发送了一空白行来通知服务器，它已经结束了该头信息的发送。http请求由三部分组成，分别是：请求行、消息报头、请求正文。
4. Web服务器应答，并向浏览器发送数据 客户机向服务器发出请求后，服务器会客户机回送应答，HTTP/1.1 200 OK应答的第一部分是协议的版本号和应答状态码，正如客户端会随同请求发送关于自身的信息一样，服务器也会随同应答向用户发送关于它自己的数据及被请求的文档。Web服务器向浏览器发送头信息后，它会发送一个空白行来表示头信息的发送到此为结束，接着，它就以Content-Type应答头信息所描述的格式发送用户所请求的实际数据
5. Web服务器关闭TCP连接 一般情况下，一旦Web服务器向浏览器发送了请求数据，它就要关闭TCP连接，然后如果浏览器或者服务器在其头信息加入了这行代码Connection:keep-aliveTCP连接在发送后将仍然保持打开状态，于是，浏览器可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间，还节约了网络带宽。

四、实例分析HTTP通信

先介绍一个工具，HTTP Analyzer ，为一款实时分析 HTTP/HTTPS 数据流的工具。它可以实时捕捉HTTP/HTTPS 协议数据，可以显示许多信息（包括：文件头、内容、Cookie、查询字符窜、提交的数据、重定向的URL地址），可以提供缓冲区信息、清理对话内容、HTTP状态信息和其他过滤选项。同时还是一个非常有用的分析、调试和诊断的开发工具。

下面我们访问http://www.google.cn/ ，HTTP analyzer将抓包来分析访问浏览器和服务器通信的过程。
1、 运行HTTP Analyzer，选择菜单Action—start开始抓包；
2、 浏览器中输入 http://www.google.cn/，网页打开后，在HTTP Analyzer中选择Action—stop停止抓包；工具已经详细列出了访问的数据包信息。通过截图见到了解下抓包信息。

抓包结果和文件头信息（下图）

一次请求的html正文内容（下图）

本次请求是否存在cookies信息（下图）

一次请求的整个数据包信息，包括头信息和正文(下图)。

你会发现浏览器中只点击了一个超级链接，却发送了多个数据包。那是因为,我们请求的网页文件中有很多图片、音乐、电影等信息时，服务器返回的信息中并不直接包含图片数据，而只是保存该图片的链接，当浏览器进行解释的时候，遇到图片的url时,才向服务器发出对图片的请求信息。

下面我们来详细分析HTTP的请求和响应信息：

HTTP请求消息

当客户端和服务端建立TCP连接后，客户端就会向服务器发送一个请求信息。http 请求由三部分组成，分别是：请求行、消息报头、请求正文，如：
[1]GET / HTTP/1.1
[2]Accept: image/gif, image/x-xbitmap, imag
e/jpeg, image/pjpeg, application/x-shockwave-flash, application/x-silverlight, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */* 客户端可识别的内容类型列表。
[3]Accept-Language: zh-cn 客户端所能解释的语言：简体中文
[4]UA-CPU: x86
[5]Accept-Encoding: gzip, deflate 客户端可以解释的类型
[6]User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; EmbeddedWB 14.52 from: http://www.bsalsa.com/ EmbeddedWB 14.52; .NET CLR 2.0.50727; InfoPath.1; CIBA) 客户端浏览器型号
[7]Host: http://www.google.cn/ 提交请求页面
[8]Connection: Keep-Alive TCP连接保持打开
[9]

该请求信息主要由4部分组成：
请求方法URI协议/版本：以上代码第[1]行“GET”表示请求方法，，“HTTP/1.1代表协议和协议的版本，HTTP请求可以使用多种请求方法，最常用的为GET和POST方法
请求报头：[2]-[8]行，包含许多有关客户端环境和请求正文的有用信息。
空行 ：[9] 请求报头和请求正文之间是一个空行，这个行非常重要，表示请求报头已经结束，接下来是正文，这个行非常重要，它表示请求报头已经结束，接下来是请求正文。
请求正文：请求正文中可以包含客户提交的查询字符串信息，如用户名和密码等。这里没有。

这里有一点值得说明的是:请求方法中的GET和POST方法；
GET方法是默认的HTTP请求方法，我们日常用GET方法来提交表单数据，然而用GET方法提交的表单数据只经过了简单的编码，同时它将作为URL的一部分向Web服务器发送，因此，如果使用GET方法来提交表单数据就存在着安全隐患上，同时这个URL长度还有限制，不允许超过1k。

POST方法是GET方法的一个替代方法，它主要是向Web服务器提交表单数据，尤其是大批量的数据。POST方法克服了GET方法的一些缺点。通过POST方法提交表单数据时，数据不是作为URL请求的一部分而是作为标准数据传送给Web服务器，这就克服了GET方法中的信息无法保密和数据量太小的缺点。因此，出于安全的考虑以及对用户隐私的尊重，通常表单提交时采用POST方法。

HTTP响应消息

响应跟请求类似，HTTP 响应也是由三个部分组成，分别是：状态行、消息报头、响应正文，如：
[1]HTTP/1.1 200 OK
[2]Cache-Control: private, max-age=0
[3]Date: Fri, 27 Feb 2009 07:53:36 GMT
[4]Expires: -1
[5]Content-Type: text/html; charset=UTF-8
[6]Set-Cookie: PREF=ID=cc4a31ab6792ef2c:NW=1:TM=1235721216:LM=1235721216:S=q1hQBu-1KdamAWK-; expires=Sun, 27-Feb-2011 07:53:36 GMT; path=/; domain=.google.cn
[7]Cont
ent-Encoding: gzip
[8]Server: gws
[9]Transfer-Encoding: chunked
[10]
[11]ddc

该响应信息也以对应的4部分组成：

协议状态描述，HTTP/1.1表示协议版本，200 OK表示服务器已经成功处理了客户端发出的请求。200表示HTTP的应答码成功。HTTP应答码由3位数字构成，其中首位数字定义了应答码的类型：
1XX－信息类(Information),表示收到Web浏览器请求，正在进一步的处理中
2XX－成功类（Successful）,表示用户请求被正确接收，理解和处理例如：200 OK
3XX-重定向类(Redirection),表示请求没有成功，客户必须采取进一步的动作。
4XX-客户端错误(Client Error)，表示客户端提交的请求有错误 例如：404 NOT Found，意味着请求中所引用的文档不存在。
5XX-服务器错误(Server Error)表示服务器不能完成对请求的处理：如 500

响应报头：跟请求报头一样，它指出服务器的功能，标识出响应数据的细节。
空行：也是属于响应报头和响应正文之间必须存在的一个空行，表示响应报头结束，接下来是响应正文
响应正文：也就是服务器返回的网页内容。
根据上文的描述，再结合工具实际验证一回，相信应该能对HTTP协议和其通信流程有个大致的了解。

五、扩展知识

高层协议有：文件传输协议 FTP 、电子邮件传输协议 SMTP 、域名系统服务 DNS 、网络新闻传输协议NNTP 和 HTTP 协议等。

中介由三种：代理 (Proxy) 、网关 (Gateway) 和通道 (Tunnel) ，一个代理根据 URI 的绝对格式来接受请求，重写全部或部分消息，通过 URI 的标识把已格式化过的请求发送到服务器。网关是一个接收代理，作为一些其它服务器的上层，并且如果必须的话，可以把请求翻译给下层的服务器协议。一个通道作为不改变消息的两个连接之间的中继点 。 当通讯需要通过一个中介 ( 例如 ： 防火墙等 ) 或者是中介不能识别消息的内容时，通道经常被使用。

• 代理 (Proxy)：一个中间程序 ， 它可以充当一个服务器 ， 也可以充当一个客户机 ， 为其它客户机建立请求。请求是通过可能的翻译在内部或经过传递到其它的 服务器中。一个代理在发送请求信息之前，必须解释并且如果可能重写它 。 代理经常作为通过防火墙的客户机端的门户 ， 代理还可以作为一个帮助应用来通过协议处理没有被用户代理完成的请求。
• 网关 (Gateway)：一个作为其它服务器中间媒介的服务器。与代理不同的是，网关接受请求就好象对被请求的资源来说它就是源服务器；发出请求的客户机并没有意识到它在同网关打交道。 网关经常作为通过防火墙的服务器端的门户 ， 网关还可以作为一个协议翻译器以便存取那些存储在非HTTP 系统中的资源。
• 通道 (Tunnel)：是作为两个连接中继的中介程序。一旦激活，通道便被认为不属于 HTTP 通讯，尽管通道可能是被一 个 HTT P 请求初始化的 。 当被中继的连接两端关闭时，通道便消失 。 当一个门户 (Portal)必须存在或中介 (Intermediary) 不能解释中继的通讯时通道被经常使用。