Web原理

时间:2022-05-18 06:01:23

在日常学代码的过程中,总会多多少少遇到点瓶颈。但是别人又听得懂,这是为什么?

我觉得,就是在原理上都不去思考,为什么这样写?为什么一定要这样写?那到底该怎么写?写完了是怎么运行的?

就以上几个问题,只用一个答案就能解决这些问题:

  Web运行原理。

              通俗的来说就是所有服务器,用户的客户端(浏览器)都必须遵守的一项协议:HTTP超文本协议,要真正了解Web运行原理,就必须彻底了解http协议,所谓的超文本协议,全名是Http超文本传输协议。

             其中超文本,即纯文本语言,不依赖于任何特定语言,但是任何语言都可以操作它。(比如,java,C++);

             ②HTTP是无状态协议,首先,什么是无状态协议?

              就是没有任何记忆能力不会做后续程序。简单打个比方,你(用户),去(输入网址)一个自助售货机(服务器)经常买东西(发送请求),你可能每次买的都是一瓶可乐(刷新数据包),可是你买的次数再多,自助售货机(服务器)还是不知道你是谁,要什么东西,所以要重新选择我要可乐(根据你的请求发送数据包),正规的讲就是这次的请求虽然是同一个客户端的请求但是他(服务器)还是不知道这个是之前的那个客户端是同一个,及对于事务处理没有记忆能力,每次要发送大量数据特别麻烦。后来网景公司雇员Lou Montulli为了让用户再访问某网站时,进一步提高访问速度,   就发明了今天我们最常用到的Cookie ,Cookie就是指某些网站为了辨别用户身份,进行跟踪而储存再用户本地终端上的数据,这些数据通常会被加密处理。通常被存储在浏览器目录中文本文件,当浏览器运行的时候,存储在RAM(你别告诉我你不懂这个?百度去!)中发挥作用,一旦(你)用户从(自助商店离开)该网站或服务器退出,(它就自动记忆最后的选择)Cookie就存在用户本地的硬盘上。(这种Cookie又被叫做 内存 Cookie,我称为ROM Cookie,RAM是实时运行的短暂性数据,决定你同时可以运行多少个程序,ROM是Persistent 数据,就像电脑的硬盘,硬盘里面的数据除非你自己修改,否则是不会变的。),于是,两种用于保持HTTP连接状态的技术就应运而生了,一个是Cookie,而另一个则是Session(会话控制)。

总之来说,服务器和客户端的交互仅限于请求/响应过程,结束之后便断开,在下一次请求服务器会认为新的客户端

 ③基于请求/相应模型?

我们知道了http协议是一种无状态的协议,客户端和服务器不需要建立持久的链接。它俩的链接是基于一种请求应答模式,在他们之间建立一个链接,客户端提交一个请求,服务器端就收到请求后就返回一个响应,然后两者就断开链接。

有人可能会觉得很难阅读,那就举个例子,发短信,你(客户端)只需要发送一个短信(请求)到某个联系人(服务器),反之,他发短信给你也是这个步骤,是不是一点发送就结束了?跟平常普通人对话一样,你说完了对方才能说,对方说完了你才能说,否则你插嘴打断别人说话是很不礼貌的。搞不好跟你闹掰(几乎不可能),总之打这个比方是想说清楚这个步骤。

举一个案例吧。我们熟悉的网页多图浏览:

1.建立连接,客户端发送一个网页请求,服务器返回一个HTML页面(这里的页面只是个纯文本的文本,也就是我们写的html代码),关闭连接;

2.浏览器解析html文件,遇到图片标记得到‘图片的url’(可能是其他网站图片,也可能是已经在服务器数据库的图片,在这我们举例服务器上的资源),那么客户端和服务器会再次建立一个连接,客户端发送一个图片请求,服务器返回图片应答,关闭连接。(这里又涉及到无状态定义具体看②解释)

3.重复第2个步骤,直到html解析完毕。

那么,我们知道了超文本传输协议(HTTP)的特性,那..http的内容呢?

            要想真正理解Web工作的原理,就必须彻底了解http协议的内容。

http协议是一个属于应用层的面向对象的协议,由于其简捷,快速的方式,适用于分布式超媒体信息系统,它于1990年提出,经过二十几年的使用和发展,得到不断的完善和扩展,目前WWW中使用的是HTTP/1.1,HTTP的主要特点包括:

1.支持客户端/服务器端。

2.简单快速:客户向服务器发送请求服务时,只需要传送请求方法和路径,请求方法常用的GET、POST。还有个HEAD涉及不多,就不讲了。每种方法规定了客户端和服务器联系的类型不同,由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快。

3.HTTP允许传输任意类型的数据对象,正在传输的类型有Content-Type(数据内容格式)加以标记。

4.无连接,大概就是限制每次链接只处理一个请求,服务器处理完客户端的请求,并收到客户端的应答后,即断开连接,采用这种方式可以节省传输时间。

5.无状态,也就是我在之前讲的。请往前看。总而言之,就是类似于自助售货机,你第一万次去它那买东西它也不知道你要什么,纯粹的无记忆状态,Cookie和Session改变了这种状态,就相当于给这个售货机配了一个售货专员,认识你,会帮你选择你上次买的。

那么,Web整一个运行的原理和流程是怎样的呢?

两种说明方法,

1.当用户想访问某个网络资源的时候,在客户端(浏览器)输入统一资源定位符(Uniform Resource Locator简称URL),或者通过超链接方式链接到那个网页或者网络资源,URL的的服务器名部分,会被名为(DNS)域名系统的分布于全球的因特网数据库解析,并根据解析结果决定将被定位到哪一个IP(网络协议)地址,通过IP地址进行层级查找,逐渐定位到服务器,向服务器发送浏览请求,服务器处理后,首先会查找相对应的资源,以处理的指令创建HTML,然后将HTML文件进行响应回传,对浏览器发送数据流,浏览器接到数据后就开始解析成HTML,最后生成可供用户读取的可视化页面。

其中几个关键点,

⑴,给用户读取的页面放在什么地方,HTML CSS  JS 还有数据?

HTML和CSS、JS代码是放在服务器,当用户访问的时候,服务器会先将HTML和CSS一起发送进行构建页面框架,具体运行顺序见下文,构建好页面框架后,会根据JS从数据库中提取出来的进行填充。并不是我们一开始以为页面就是写好了放页面上的,内容是实时从数据库中读取出来的填在页面中。

⑵,浏览器解析的方法?

首先,浏览器会从服务器接收到HTML代码,然后开始解析HTML,构建成DOM树(根据HTML从上往下构建),并在同时构建渲染树(IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时执行的),如果遇到CSS文件的话,会启用一个单独的连接进行下载,所有CSS文件下载完毕后,将会一起执行,将对此前所有元素(包含已经渲染的)重新进行渲染。如果在解析CSS的时候解析到一张图片的href,渲染不会停止,客户端会再次向服务器发起一次请求,进行图片资源下载,不会妨碍后续资源的构建和渲染,如果返回了图片资源,图片占用的位置影响了DOM树的内容排布的布局构建,浏览器将会重新渲染这部分代码,还没完,当用户点击了某个CSS外部样式表功能(比如换肤),HTML只能召集div、ul、li、a、span们重新干活!遇到JS文件的时候不会进行并行下载和解析,如果发现了<script>里面的代码</script>,会立即执行,当发现script让某个元素进行隐藏的时候,少了这块元素,浏览器不得不进行重新进行渲染(哭~~~...)。当引用了外部地址JS的时候,浏览器会发送一个js request,就会一直等待该request的返回,因为浏览器需要一个稳定的DOM树结构,如果并行下载解析js的话,可能会遇到createElement(添加元素),removeElement(删除元素),appendChild(添加子节点),document.write(文档写入)甚至是直接龙location.href进行页面跳转,很容易将网页的结构破坏,将重建结构树。所以才会有js后行下载执行。

2.运行原理生活版

我要给一个人写信,是不是先得要到他的地址(URL),首先把信写好(填写url),投递到邮局(互联网),邮局根据自己内部的数据系统(因特尔数据库)查询(域名解析),知道了你的大概目标地址(IP),北京市 海淀区 北三环西路 多少号(192.0.111.xxx)  姓名(HOST),进行一级一级的传递,首先要通过海陆空进行运输到达北京,然后发往海淀,北三环西路,某某号。最后送到收件人手上,收件人看到信里的内容后,跟邮递员说“你别走,等我写个回信,很快”(解析请求,响应,查询数据),写完信后交给快递员,进行回传。这是正常情况下,如果是请求错误(信的内容写错了),比如你用英语写的,他看不懂,回了个信,说我不懂你意思(400 语法错误)。也可能你写错地址(URL),别人一收到就说我不认识这个人(404查找不到这个资源),或者信收到了,他不想看(500服务器状态错误),也可能说我最近太忙,过段时间给你回信(503服务器忙)。

这样说就通俗易懂了吧?

HTTP协议URL篇

         http(超文本传输协议)是一个基于请求和响应模式的,无状态的,应用层的协议,常基于TCP(TCP/IP:传输控制协议/网间协议,分割数据流进行分段发送)的连接方式,HTTP1.1版本中给出一种持续连接的机制,绝大多数的Web开发,都是构建在HTTP协议之上的Web应用。

URL:是统一资源定位符的英文缩写。包含协议,http服务器IP或者域名,端口号等。

HTTP URL(URL是一种特殊类型的URL,包含了用于查找某个资源的足够的信息)它的格式如下:

http://host[":"port] [abs_path]

现在我来解释下每段的定义

首先 http表示要通过HTTP协议来定位网络资源;

host表示合法的Internet主机域名或者IP地址;

port指定一个端口号,如果是空的话就是默认的缺省80端口;

abs_path代表指定请求资源的URL;如果URL中没有给出abs_path,那么当它作为请求URL的时候必须以“   /  ”的形式给出,通常这个工作浏览器自动帮我们完成。

比如,输入 :

www.guet.edu.cn

浏览器自动转换成

http:192.168.0.116:8080/index.jsp

补充下知识,首先什么是IP?什么是DNS?

IP:Internet Protocol的缩写,简称IP,是“网际协议”也可以称“因特网协议”,是为了让连接上网络所有的计算机之间相互连接而制定的一项协议

DNS:域名系统的缩写。它是用于TCP/IP网络,从事将主机名或者域名翻译成IP地址的工作。

DNS的工作模式

1 .当输入网址后,操作系统先检查本地hosts文件,看看是否有这个网址的映射关系。

2. 第一步没有映射关系,查找本地DNS缓存,有则返回,完成域名解析。

3. 第一二步没有映射关系,则查找TCP/IP协议首选的DNS服务器(本地DNS服务器),有则返回给客户端,完成域名解析。

4. 上面几步都失效的情况下,则根据本地DNS服务器的设置查询,一级一级的查询上层DNS服务器,最后将结果返回给本地服务器,本地服务器再返回给客户端。

总的来说,浏览器最后发起请求时基于IP来和服务器交互的。

HTTP协议请求篇

           HTTP请求由三部分组成,分别是:请求行,消息报头,请求正文。

1.请求行以一个方法符号开头(Method请求方法),以空格分开,后面跟着请求的URL(Request-URL统一资源标识符)和协议的版本(HTTP-Version表示版本 CRLF回车换行,CRLF只能同时存在,不能拆分成CR和LF)。

请求方法有很多,但是对于我来说只有POST和GET常用。查阅资料如下:

GET    请求获取Request-URI里所标识的资源

POST   在Request-URI所表示的资源后附加的新的数据

HEAD  请求获取由Request-URI所标识的资源的响应消息报头

PUT     请求服务器存储一个资源,并用Request-URI为其做标识

DELETE   请求服务器删除Request-URI所标识的资源

TRACE    请求服务器回送收到的请求信息,主要用于测试或者诊断

CONNECT   保留,将来使用

OPTIONS  请求查询服务器的性能,或者查询与资源相关的选项和需求

可能有些人不懂URL和URI的区别,URI是纯粹的语法结构,用于指定标识Web资源字符串的各个不同部分,URL是URI的一个特例,它包含了定位Web资源的足够多的信息。根据URI的话你定位不了任何资源的具体信息,只有通过URL,总而言之,URI是统一资源标识符,URL是统一资源定位符,这就好比你知道某个人住在某小区,但是你不知道他住哪栋,这就需要URL定位符,通过栋单元层室去找到他。

应用举例:

GET方法:在浏览器中的地址栏输入网址的方式访问网页时,浏览器采用GET方法想服务器获取资源,  GET/form.html HTTP/1.1(CRLF)

POST方法要求被请求服务器接受附在请求后面的数据,通常用于提交表单。

POST/reg.jsp HTTP/(CRLF)

Accept:image/gif,image/x-bit,...(CRLF)   //接受的格式

HOST:www.guet.edu.cn(CRLF) //主机名称

Content-Length:22(CRLF)  //这个是实体内容长度,客户端可以根据这个值判断数据接收是否完成。

Connection:Keep-Alive(CRLF)   //这个设定是让HTTP无连接的状态变更为持续连接。

Cache-Control:no-cache(CRLF)  //设定网页不进行缓存

user=jeffrey&pwd=1234   //这行以下就是提交的数据了

HEAD方法和GET几乎是一样的。

2,请求报头;

3,请求正文就是客户端发送的内容

HTTP协议响应篇

                           在接受和解释请求消息后,服务器返回一个HTTP响应消息。

HTTP响应也是三个部分组成:状态行、消息报头、响应正文。

1.状态行格式:

HTTP-Version Status-Code  Reason-Phrase CRLF

其中 HTTP-Version表示服务器HTTP协议的版本;Status-Code表示服务器发挥的响应状态代码;Reason-Phrase表示状态代码的文本描述。

状态代码有三位数字组成,第一个数字定义了响应的类别,

1xx:指示信息-表示请求已接受,继续处理

2xx:成功,表示请求已被成功接收,理解,接受。

3xx:重定向--要完成请求必须进行更进一步的操作。

4xx:客户端错误,请求有语法错误或者无法实现。

5xx:服务器端错误,服务器未能实现合法的请求。

常见的状态代码、代码的描述、说明:

200  OK;   //客户端请求成功

400  Bad Request  //客户端请求有语法错误,不能被服务器所理解;

401  Unauthorized  //请求未经授权;

403  Forbidden  // 服务器收到请求,但是拒绝服务;

404  NOT Found  //请求资源不存在,也可能是输入了错误的资源;

500  Internal Server Error   //服务器发生了错误;

503 Server Unavailable  //服务器当前不能处理客户端的请求,一段时间后可能恢复正常;

2,响应报头;

3,响应正文就是服务器返回的资源内容