WEB前端开发工程师的随记–黑妞HAHA

——专注web前端开发,关注用户体验

Category Archives: 网络基础

web前端常识之浏览器原理

一、HTTP协议定义

URL的组成

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

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停止抓包;工具已经详细列出了访问的数据包信息。通过截图见到了解下抓包信息。

抓包结果和文件头信息(下图)
20100319042612739

一次请求的html正文内容(下图)
20100319042640734

本次请求是否存在cookies信息(下图)
20100319042726854
一次请求的整个数据包信息,包括头信息和正文(下图)。
20100319042747598
你会发现浏览器中只点击了一个超级链接,却发送了多个数据包。那是因为,我们请求的网页文件中有很多图片、音乐、电影等信息时,服务器返回的信息中并不直接包含图片数据,而只是保存该图片的链接,当浏览器进行解释的时候,遇到图片的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) 不能解释中继的通讯时通道被经常使用。

相关链接:Yahoo给出的34条网站加速方法
推荐阅读:现代浏览器揭秘(为之漫笔)

Internet基本协议内容及相关应用

Internet基本协议:如TCP/IP、HTTP、SMTP、FTP等,简单的说就是网络通信协议。

Internet网络互连采用的基本协议是TCP/IP。

TCP/IP(传输控制协议/网间协议)是一种网络通信协议,它规范了网络上的所有通信设备,尤其是一个主机与另一个主机之间的数据往来格式以及传送方式。TCP/IP是INTERNET的基础协议,也是一种电脑数据打包和寻址的标准方法。在数据传送中,可以形象地理解为有两个信封,TCP和IP就像是信封,要传递的信息被划分成若干段,每一段塞入一个TCP信封,并在该信封面上记录有分段号的信息,再将TCP信封塞入IP大信封,发送上网。在接受端,一个TCP软件包收集信封,抽出数据,按发送前的顺序还原,并加以校验,若发现差错,TCP将会要求重发。因此,TCP/IP在INTERNET中几乎可以无差错地传送数据。在任何一个物理网络中,各站点都有一个机器可识别的地址,该地址叫做物理地址.物理地址有两个

特点:

(1)物理地址的长度,格式等是物理网络技术的一部分,物理网络不同,物理地址也不同.

(2)同一类型不同网络上的站点可能拥有相同的物理地址.

以上两点决定了,不能用物理网络进行网间网通讯.

在网络术语中,协议中,协议是为了在两台计算机之间交换数据而预先规定的标准。TCP/IP并不是一个而是许多协议,这就是为什么你经常听到它代表一个协议集的原因,而TCP和IP只是其中两个基本协议而已。TCP/IP理解正确的应该是“用于计算机通信的一个协议集,它包括TCP、IP、ARP、ICMP、UDP、RIP、FTP、SMTP等多种协议”。

OSI参考模型 TCP/IP模型 协议
应用层 应用层 简单电子邮件传输(SMTP)、文件传输协议(FTP)、网络远程访问协议(Telnet)等
表示层
对话层
传输层 传输层 传输控制协议(TCP)、用户数据包协议(UDP)等
网络层 网络层 网际协议(IP)
数据链路层 网络接口层(主机-网络访问层)
物理层
TCP/IP协议图

TCP/IP协议图

TCP/IP通讯协议采用了4层的层级结构,每一层都呼叫它的下一层所提供的网络来完成自己的需求。这4层分别为:

应用层:应用程序间沟通的层,如简单电子邮件传输(SMTP)、文件传输协议(FTP)、网络远程访问协议(Telnet)等。

传输层:在此层中,它提供了节点间的数据传送,应用程序之间的通信服务,主要功能是数据格式化、数据确认和丢失重传等。如传输控制协议(TCP)、用户数据包协议(UDP)等,TCP和UDP给数据包加入传输数据并把它传输到下一层中,这一层负责传送数据,并且确定数据已被送达并接收。

互连网络层:负责提供基本的数据封包传送功能,让每一块数据包都能够到达目的主机(但不检查是否被正确接收),如网际协议(IP)。

网络接口层(主机网络层):接收IP数据包并进行传输,从网络上接收物理帧,抽取IP数据报转交给下一层,对实际的网络媒体的管理,定义如何使用实际网络(如Ethernet、Serial Line等)来传送数据。

拓展知识:

web2.0由来:

2004年O’ Reilly MediaInc.副总裁Dale Dougherty在公司的一次筹备会上偶然提出了Web2.0一词,全球第一次Web2.0大会于2004年10月在美国旧金山召开。从此,Web2.0这一概念以不可思议的速度在全球传播开来。
Web2.0核心是以人为中心。为用户提供更方便工具,鼓励提供内容。根据用户在互联网上留下的痕迹,组织浏览线索,提供相关的服务,给用户创造新的价值。Web2.0是相对Web1.0的新一类互联网应用的统称。
Web2.0技术主要包括:博客(BLOG)、RSS、百科全书(Wiki)、网摘、社会网络(SNS)、P2P、即时信息(IM)等.

参考文章:
TCP/IP协议及应用