Web原理

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

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

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

  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，响应正文就是服务器返回的资源内容