浏览器工作流程的探索
我们知道,当访问一个网站时,浏览器首先向服务器发送了某个信息,然后服务器返回了一些信息,再经过浏览器的解析,就看到了我们想要的页面,这也就是HTTP协议的过程,本文通过截取浏览器信息,讲述HTTP协议的每一步执行流程。
一、服务器搭建
在本机上配置好LAMP开发环境,具体的配置见另一篇文章。
二、测试网页编写
首先编写一个简单的网页,用于测试,代码如下:
<html>
<head>
This is the head
<head>
<body>
<h1>welcome to server</h1>
hahahahaha中文测试hahahaha
</body>
</html>
保存成index.html放到网页根目录下。
效果如下:
三、浏览器数据发送
下面介绍一个神器“网络调试助手”,用于进行TCP/IP协议学习、程序调试用的。里面可以进行TCP\UDP、服务器/客户端的模式设置,向指定地址发送消息或作为服务器接收消息,非常方便。如下图:
四、实验过程
先说说实验的基本原理,我先用网络调试助手虚拟一个服务器,挂在8080端口上,然后让浏览器通过8080端口访问网站,这样我就能得到浏览器发送出的所有信息,然后,我用另一个网络调试助手虚拟一个客户端(在这相当于一个浏览器),向服务器发送消息,这样就能得到服务器发送给浏览器的东西了,我们在将这条消息回发给浏览器就行。整个流程如下所示:
下面分析每一个步骤:
1、使用浏览器访问地址,这样网络调试助手1(模拟服务器)收到了如下信息:
【Receive from 192.168.0.130 : 49396】:
GET / HTTP/1.1
Host: 192.168.0.130:8080
Connection: keep-alive
Accept: */*
Accept-Language: zh-CN
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/4.0; QQDownload 718; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E; SE 2.X MetaSr 1.0)
Accept-Encoding: gzip, deflate
我们来看看这个数据包,第一行是软件打印出来的表示从192.168.0.130的49369端口(就是浏览器的电脑IP地址和浏览器的端口)发送了一个如下的指令。第二行表示是一个1.1版本的HTTP协议,关于HTTP协议大家可以翻一下教材。1.1版比1.0版提供了更多功能的支持。第三行表示服务器的主机地址是192.168.0.130:8080,第四行表示是保持连接模式。然后后面分别指定了该浏览器支持的语言,浏览器信息和浏览器能接受的压缩方式(现代的HTTP正文可以用压缩方式传输啦,gzip就是其中常用的一种)。
注意,在这个时候,浏览器的那个圈圈一直再转,表示正在打开网页,平时上网卡住的时候就是这样。
2、将上述信息复制到调试助手2中,模拟浏览器向真正的服务器发送数据。(复制的时候注意HTTP协议最后是用两个换行来标识结束的)
3、我们看到,服务器被欺骗了,响应了我们的请求
我们来看看这些代码:
HTTP/1.1 200 OK
Date: Mon, 04 Mar 2013 08:42:47 GMT
Server: Apache/2.4.3 (Win32) PHP/5.4.10
Last-Modified: Mon, 04 Mar 2013 08:07:18 GMT
ETag: "a5-4d714d884f8e2"
Accept-Ranges: bytes
Content-Length: 165
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html
<html>
<head>
This is the head
<head>
<body>
<h1>welcome to server</h1>
hahahahaha中文测试hahahaha
<img src = "pic.png"></img>
</body>
</html>
第一行还是表示他是HTTP1.1的协议,200 OK表示响应正常,大家还记得那个悲剧的404么,和200表示不同的状态。随后就是一些日期,服务器类型(apache)、连接信息之类的东西,大家注意看有个ETag,这是HTTP中一种有效的防治重复访问的手段,记住这个号下面能看到。最后通过那个模拟的服务器,将这段信息发送给服务器。
4、最后通过那个模拟的服务器,将这段信息发送给浏览器。看是不是和直接访问一模一样?
5、拓展讲解
在浏览器中按刷新或者重新访问该地址,我们看到,这个请求发生了变化,浏览器发出了这个请求
GET / HTTP/1.1
Host: 192.168.0.130:8080
Connection: keep-alive
Accept: */*
Accept-Language: zh-CN
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/4.0; QQDownload 718; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E; SE 2.X MetaSr 1.0)
Accept-Encoding: gzip, deflate
If-None-Match: "a5-4d714d884f8e2"
If-Modified-Since: Mon, 04 Mar 2013 08:07:18 GMT
注意他的ETag号,是不是和最开始收到的一样!我们再将这条消息发送给服务器,收到了如下消息:
HTTP/1.1 304 Not Modified
Date: Mon, 04 Mar 2013 08:57:00 GMT
Server: Apache/2.4.3 (Win32) PHP/5.4.10
Connection: Keep-Alive
Keep-Alive: timeout=5, max=100
ETag: "a5-4d714d884f8e2"
304 Not Modified,就是告诉浏览器,这个页面没有发生变化,你不用更新显示了,这样一来,服务器就不用发送一大堆网页正文,节省了大量的带宽。所以,有时候我们一直刷新网页,其实服务器根本就连网页的内容都没有重新发过来,而是简单滴让浏览器保持原来的内容而已。
posted on 2013-03-08 15:41 mapleWizard 阅读(1495) 评论(2) 编辑 收藏 举报