HTTP：超文本傳輸協(xié)議，屬于應(yīng)用層協(xié)議，用于瀏覽器與服務(wù)器之間的通信，客戶端打開tcp連接，發(fā)送請求給服務(wù)器，服務(wù)器接收請求并作出響應(yīng)。

• 特點：

1. 無狀態(tài)，有會話協(xié)議，服務(wù)器與瀏覽器之間的請求響應(yīng)不會保留任何數(shù)據(jù)，是一種無連接無狀態(tài)的協(xié)議
2. 簡單的
3. 可擴(kuò)展的
4. 連接： 連接由傳輸層來控制，TCP連接是一種可靠傳輸，不會丟失信息（即使丟失了也會返回錯誤）UDP連接是不可靠傳輸

HTTP流

step1. 打開一個TCP連接，TCP連接后被用來發(fā)送一條或多條請求，以及接受回應(yīng)的消息；
step2. 客戶端發(fā)送一個HTTP請求封裝在數(shù)據(jù)幀中
step3. 服務(wù)端接收并處理HTTP請求，返回響應(yīng)
step4. 關(guān)閉連接或者為后續(xù)請求重用連接

• 請求報文
  請求行 ： 請求方法 請求url 協(xié)議版本 eg.
  請求頭部 ： headers
  空行
  請求數(shù)據(jù)
• 回應(yīng)報文
  響應(yīng)行： 協(xié)議版本 狀態(tài)碼 狀態(tài)文本
  響應(yīng)頭部
  空行
  響應(yīng)數(shù)據(jù)

短連接(Connection: close)：每一個http請求都會獨立的連接完成，每個http請求都會有一個tcp連接
長連接(Connection: keep-alive)：一個tcp連接會保持一段時間，重復(fù)用于發(fā)送一系列請求，節(jié)省每一個http請求都要生成一個tcp連接
流水線連接：請求不需要等待上一個請求接收到應(yīng)答之后就可發(fā)出

HTTP的組件系統(tǒng)

客戶端
服務(wù)器
代理 ： 作用：緩存（可以是公開的也可以是私有的，像瀏覽器的緩存） / 過濾（像反病毒掃描，家長控制...） / 負(fù)載均衡（讓多個服務(wù)器服務(wù)不同的請求） / 認(rèn)證（對不同資源進(jìn)行權(quán)限管理） / 日志記錄（允許存儲歷史信息）
（代理緩存拓展：
概念： 重用已獲取的資源能有效的提升網(wǎng)站與應(yīng)用的性能，緩存是一種保存資源副本并在下次請求時直接使用該副本，當(dāng)瀏覽器發(fā)起請求時發(fā)現(xiàn)在緩存中存在著相應(yīng)資源，則會攔截請求，返回該資源的副本而不必去源服務(wù)器重新下載。
好處：能緩解服務(wù)器的壓力，獲取資源的時間變短從而提高性能。
類型： 私有與共享的緩存。
部署：代理緩存 / 網(wǎng)關(guān)緩存 / 瀏覽器緩存 / 負(fù)載均衡器 / cdn
緩存控制： Cache-control： no-store|no-cache (禁止進(jìn)行緩存) | public | private | max-age(緩存的保鮮期) | must-revalidate(已經(jīng)過期的緩存不再使用，緩存校驗)

規(guī)則：當(dāng)一個資源被緩存之后，當(dāng)超過緩存期或者資源進(jìn)行了更新，那么對副本進(jìn)行刪除或更新，當(dāng)客戶端發(fā)起一個請求時，緩存檢索到已有一個對應(yīng)的陳舊資源（緩存副本），則緩存會先將此請求附加一個 If-None-Match 頭，然后發(fā)給目標(biāo)服務(wù)器，以此來檢查該資源副本是否是依然還是算新鮮的，若服務(wù)器返回了 304](Not Modified)（該響應(yīng)不會有帶有實體信息），則表示此資源副本是新鮮的，這樣一來，可以節(jié)省一些帶寬。若服務(wù)器通過If-None-Match或If-Modified-Since判斷后發(fā)現(xiàn)已過期，那么會帶有該資源的實體內(nèi)容返回。

）

Cookie

概念：服務(wù)器將發(fā)送用戶瀏覽器保存在本地的數(shù)據(jù)中，在下一次瀏覽器再向同一個服務(wù)器發(fā)起請求被攜帶并發(fā)送到服務(wù)器上，用于告知服務(wù)器兩個請求是否來自同一個瀏覽器。
Cookie主要用于以下三個方面：

• 會話狀態(tài)管理（如用戶登錄狀態(tài)、購物車、游戲分?jǐn)?shù)或其它需要記錄的信息）
• 個性化設(shè)置（如用戶自定義設(shè)置、主題等）
• 瀏覽器行為跟蹤（如跟蹤分析用戶行為等）

跨域方法

• 瀏覽器的同源策略：當(dāng)一個資源從客戶端發(fā)起請求的資源所在的服務(wù)器跟客戶端的協(xié)議，域名，和端口不一致時，會拒絕發(fā)出請求；限制行為：1. 無法讀取非同源網(wǎng)頁的Cookie、LocalStorage、IndexedDB；2. 無法接觸非同源網(wǎng)頁的 DOM；3. 無法向非同源地址發(fā)送 AJAX 請求（可以發(fā)送，但瀏覽器會拒絕接受響應(yīng)）。

一、CORS

• 允許使用跨域的情況：

1. XMLHttpRequest() 或 fetch 發(fā)起的跨域請求
2. @font-face 跨域請求字體資源
3. webGL貼圖 / canva drawImage

簡單請求：

1. Method： GET HEAD POST
2. 不得人為設(shè)置該集合之外的其他首部字段：Accept / Accept-Language / Content-Language / Content-Type / DPR / Downlink / Save-Data / Viewport-Width / Width
3. Content-type : text/plain | mulitipart/form-data | application/x-www-form-urlencoded
   非簡單請求（需要先預(yù)檢請求）
   先發(fā)送預(yù)檢請求(Method：OPTIONS)給服務(wù)器，確認(rèn)后再發(fā)送http請求給服務(wù)器

請求頭：
Origin：發(fā)送請求的域名
Access-Control-Request-Method：請求方法
Access-Control-Request-Headers：請求頭部字段
響應(yīng)頭：
Access-Control-Request-Method：存在請求頭中的方法
Access-Control-Request-Headers：存在請求頭中的頭部字段
Access-Control-Allow-Origin：包含請求域 | *
Access-Control-Max-Age：表明該響應(yīng)的有效時間，在有效時間內(nèi)，瀏覽器無須為同一請求再次發(fā)起預(yù)檢請求。
Access-Control-Allow-Credentials：
....
滿足才能實現(xiàn)跨域

二、JSONP

原理：動態(tài)插入script元素，向服務(wù)器發(fā)出請求，請求查詢字符串中有一個毀掉參數(shù)，用來指定回調(diào)函數(shù)的名字，服務(wù)器收到請求之后就會調(diào)用指定的回調(diào)函數(shù)，并把返回的數(shù)據(jù)放在回調(diào)函數(shù)的參數(shù)中
缺點：只能GET方法

各種協(xié)議

• IP協(xié)議
• ARP協(xié)議 ： ARP查詢包中的源IP地址是源主機(jī)的IP地址，目標(biāo)IP地址是目標(biāo)主機(jī)的IP地址，源MAC地址是源主機(jī)的MAC地址，ARP査詢包中的目的MAC地址是廣播MAC地址FF-FF-FF-FF-FF-FF。
• TCP協(xié)議：可靠傳輸協(xié)議，接收方會對接收到的數(shù)據(jù)分段發(fā)送確認(rèn)給發(fā)送方，而發(fā)送方會將沒有確認(rèn)的數(shù)據(jù)分段重新傳送給接收方，接收方會對數(shù)據(jù)分段按照正確的順序重組，并且刪除重復(fù)的數(shù)據(jù)分段；TCP的三次握手：

readyState狀態(tài)： 請求當(dāng)前所處的狀態(tài)
0：unsend 代理已經(jīng)創(chuàng)建，但是未調(diào)用open()
1：opened open()方法被調(diào)用
2：headers_received send()方法已經(jīng)被調(diào)用，頭部狀態(tài)是可獲得
3：loading 下載中，responseText已經(jīng)包含部分?jǐn)?shù)據(jù)
4：done 下載操作已經(jīng)完成 服務(wù)器響應(yīng)成功或者失敗

status 請求結(jié)束的狀態(tài)碼
101, 轉(zhuǎn)換協(xié)議
200, OK，訪問正常
204, No Content，服務(wù)器成功處理了請求但是不需要返回實體內(nèi)容
205, Reset Content，服務(wù)器成功處理了請求但是會重置文檔
206,
301, Moved Permanently，永久移動
302, Move temporarily，暫時移動
304, Not Modified，未修改
307, Temporary Redirect，暫時重定向
401, Unauthorized，未授權(quán)，當(dāng)前的請求需要用戶身份驗證
403, Forbidden，禁止訪問
404, Not Found，在服務(wù)器中找不到請求的資源
500, Internal Server Error，服務(wù)器發(fā)生錯誤
502,
503, Service Unavailable，服務(wù)器沒有準(zhǔn)備好處理請求，服務(wù)器處于維護(hù)或者停機(jī)的狀態(tài)

        let xhr = new XMLHttpRequest();
        xhr.open('GET', './data.txt');
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            } else {
                console.log(xhr.statusText);
            }
        }
        xhr.send();