[TOC] ## 网站运作流程 当我们在浏览器地址栏输入 [http://mi.cwnu.edu.cn](http://mi.cwnu.edu.cn) 并回车后到底发生了什么 ### 输入设备 1. 键盘 2. 触屏 ### 地址栏 1. 正确地址 2. 非正确地址(搜索) **url** https://sub.host.com:8080/p/a/t/h?query=string#hash ### DNS(Domain Name System) 1. 浏览器 2. host 3. 路由器/交换机 4. 顶级域名服务器 ### IP地址 ### 建立连接 1. 3握手 2. 4挥手 ### 发送请求(Request) 1. get 2. post 3. xxx ### 服务器响应(Response) http 状态码 ### 浏览器处理请求 1. 解析(HTML，CSS，JS ) 2. 渲染——构建 DOM 树 -> 渲染 -> 布局 -> 绘制 ## http协议 > 无状态的,本身并不能支持服务端保存客户端的状态信息 ### cookie 1. 如果客户端支持Cookie，Web Server在返回Response的时候，在Response的Header部分，加入一个“set-cookie: jsessionid=XXXX”header属性，把jsessionid放在Cookie里传到客户端。 2. 客户端会把Cookie存放在本地文件里，下一次访问Web Server的时候，再把Cookie的信息放到HTTP Request的“Cookie”header属性里面，这样jsessionid就随着HTTP Request返回给Web Server。 ### session 1. 当一个用户向服务器发送第一个请求时，服务器为其建立一个session，并为此session创建一个标识号； 2. 这个用户随后的所有请求都应包括这个标识号。服务器会校对这个标识号以判断请求属于哪个session。 ## http头信息 > HTTP请求头提供了关于请求，响应或者其他的发送实体的信息。 > HTTP的头信息包括通用头、请求头、响应头和实体头四个部分。每个头域由一个域名，冒号>（:）和域值三部分组成。 1. 通用头标：即可用于请求，也可用于响应，是作为一个整体而不是特定资源与事务相关联。 2. 请求头标：允许客户端传递关于自身的信息和希望的响应形式。 3. 响应头标：服务器和于传递自身信息的响应。 4. 实体头标：定义被传送资源的信息。即可用于请求，也可用于响应。 ### Request 常见头信息 | Header | 解释 | 示例 | | --- | --- | --- | | Accept | 指定客户端能够接收的内容类型 | Accept: text/plain, text/html | | Accept-Charset | 浏览器可以接受的字符编码集。 | Accept-Charset: iso-8859-5 | | Accept-Encoding | 指定浏览器可以支持的web服务器返回内容压缩编码类型。 | Accept-Encoding: compress, gzip | | Accept-Language | 浏览器可接受的语言 | Accept-Language: en,zh | | Authorization | HTTP授权的授权证书 | Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ== | | Cache-Control | 指定请求和响应遵循的缓存机制 | Cache-Control: no-cache | | Connection | 表示是否需要持久连接。（HTTP 1.1默认进行持久连接） | Connection: close | | Cookie | HTTP请求发送时，会把保存在该请求域名下的所有cookie值一起发送给web服务器。 | Cookie: $Version=1; Skin=new; | | Content-Length | 请求的内容长度 | Content-Length: 348 | | Content-Type | 请求的与实体对应的MIME信息 | Content-Type: application/x-www-form-urlencoded | | Date | 请求发送的日期和时间 | Date: Tue, 15 Nov 2010 08:12:31 GMT | | Host | 指定请求的服务器的域名和端口号 | Host: www.zcmhi.com | | Referer | 先前网页的地址，当前请求网页紧随其后,即来路 | Referer: http://www.zcmhi.com/archives/71.html | | Upgrade | 向服务器指定某种传输协议以便服务器进行转换（如果支持） | Upgrade: HTTP/2.0, SHTTP/1.3, IRC/6.9, RTA/x11 | | User-Agent | User-Agent的内容包含发出请求的用户信息 | User-Agent: Mozilla/5.0 (Linux; X11) | ### Response 常见头信息 | Header | 解释 | 示例 | | --- | --- | --- | | Cache-Control | 告诉所有的缓存机制是否可以缓存及哪种类型 | Cache-Control: no-cache | | Content-Encoding | web服务器支持的返回内容压缩编码类型。 | Content-Encoding: gzip | | Content-Language | 响应体的语言 | Content-Language: en,zh | | Content-Length | 响应体的长度 | Content-Length: 348 | | Content-Location | 请求资源可替代的备用的另一地址 | Content-Location: /index.htm | | Content-Type | 返回内容的MIME类型 | Content-Type: text/html; charset=utf-8 | | Expires | 响应过期的日期和时间 | Expires: Thu, 01 Dec 2010 16:00:00 GMT | | Location | 用来重定向接收方到非请求URL的位置来完成请求或标识新的资源 | Location: http://www.zcmhi.com/archives/94.html | | Server | web服务器软件名称 | Server: Apache/1.3.27 (Unix) (Red-Hat/Linux) | | Set-Cookie | 设置Http Cookie | Set-Cookie: UserID=JohnDoe; Max-Age=3600; Version=1 | ### MIME > (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准 一些MIME | 扩展名 | 类型/子类型 | | --- | --- | | css | text/css | | doc | application/msword | | htm | text/html | | html | text/html | | jpeg | image/jpeg | | jpg | image/jpeg | | js | application/x-javascript | |json|application/json| | mp3 | audio/mpeg | | mp4 | video/mp4 | | pdf | application/pdf | | ppt | application/vnd.ms-powerpoint | | svg | image/svg+xml | | txt | text/plain | | xls | application/vnd.ms-excel | | zip | application/zip | ## http状态码 ### 一览众山小 1xx 用于指定客户端应相应的某些动作。 2xx 用于表示请求成功。 3xx 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 4xx 用于指出客户端的错误。 5xx 用于指出服务器错误。 ### 常见状态码 #### 101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议 #### 200 OK 一切正常，对GET和POST请求的应答文档跟在后面 #### 301 Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。 #### 302 Found 类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。 #### 304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。 #### 400 Bad Request 请求出现语法错误。 #### 401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。 #### 403 Forbidden 表示资源不可用。服务器理解客户的请求，但拒绝处理它。 #### 404 Not Found 无法找到指定位置的资源 #### 405 Method Not Allowed 请求方法（GET、POST、HEAD、Delete、PUT、TRACE等）对指定的资源不适用。 #### 500 Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求 #### 501 Not Implemented 服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求 #### 502 Bad Gateway 服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答 #### 503 Service Unavailable 服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回 503。服务器返回503时可以提供一个Retry-After头 #### 504 Gateway Timeout 由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答 > 101,200,301,302,404,503 ## 调试？（debug）   ### Elements 页面元素 ### Console console.log.xxx() ### Network  ### Application  ## get/post ### GET 方法 **注意**，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的： /p/a/t/h?name1=value1&name2=value2 1. GET 请求可被缓存 2. GET 请求保留在浏览器历史记录中 3. GET 请求可被收藏为书签 4. GET 请求不应在处理敏感数据时使用 5. GET 请求有长度限制 ### POST 方法 **注意**，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的： name1=value1&name2=value2 1. POST 请求不会被缓存 2. POST 请求不会保留在浏览器历史记录中 3. POST 不能被收藏为书签 4. POST 请求对数据长度没有要求 |   | GET | POST | | --- | --- |--- | | 后退按钮/刷新 | 无害 | 数据会被重新提交（浏览器应该告知用户数据会被重新提交）。 | | 书签 | 可收藏为书签 | 不可收藏为书签 | | 缓存 | 能被缓存 | 不能缓存 | | 编码类型 | application/x-www-form-urlencoded | application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。 | | 历史 | 参数保留在浏览器历史中。 | 参数不会保存在浏览器历史中。 | | 对数据长度的限制 | 是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的 | 无限制。 | | 对数据类型的限制 | 文本（base64-img） | 没有限制。也允许二进制数据。 | | 安全性 | 与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！ | POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。 | | 可见性 | 数据在 URL 中对所有人都是可见的。 | 数据不会显示在 URL 中。 | ## 其他  | 序号 | 方法 | 描述 | | --- | --- |--- | | 1 | GET | 请求指定的页面信息，并返回实体主体。 | | 2 | HEAD | 类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头 | | 3 | POST | 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。 | | 4 | PUT | 从客户端向服务器传送的数据取代指定的文档的内容。 | | 5 | DELETE | 请求服务器删除指定的页面。 | | 6 | CONNECT | HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。 | | 7 | OPTIONS | 允许客户端查看服务器的性能。 | | 8 | TRACE | 回显服务器收到的请求，主要用于测试或诊断。 | ## 页面展示？ ### 传统方式 服务器生成完整的html 验证 传输 ### web2.0 Ajax