[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