【Web全棧課程4】數據交互+http

數據交互

http全部的數據請求對於服務器的處理來講，都是表單提交（除了websocket）

1. 表單

   • 最基本 最簡單
   • 提交表單的時候，刷新頁面

2. ajax

   • 提交的時候不用刷新頁面，所以節約流量，（提交表單將整個頁面提交）
   • 在網絡慢的狀況可能出現重複提交，能夠經過禁用提交按鈕等操做解決
   • 默認狀況不支持跨域，須要服務器配置才能跨域
   • 單向通訊，缺點：只能瀏覽器請求服務器，服務端數據改變沒法通知客戶端

3. jsonp

   • 比較老的跨域的方式，因爲安全性差，已經逐步被取代

4. webSocket

   • 性能比ajax高，支持大批量數據通訊
   • 雙向通訊（雙工通訊），例如訂單系統商家接單了，訂單狀態變化了，或者有人發送消息給我，等都須要雙向通訊
   • 默認就能夠跨域

---

http協議

一、3個版本：http1.0、http1.一、http2.0

• http1.0 一次性鏈接
• http1.1 保持鏈接
• http2.0 強制https，自帶雙向通訊，提供協議級的多路複用（即一個鏈接能夠傳輸多個數據） （目前是草案）

二、http和https
http =>容易被攻擊被竊聽
https=http+secrity =>安全，https須要證書校驗

rfc http 互聯網上使用的全部協議都有rfc編號

三、三次握手與四次揮手
第4次的時候鏈接斷開，http1.1要等待一段時間纔會斷開

四、http請求消息叫request，返回消息叫response，消息體都有以下格式

get在頭裏面傳數據，post在body裏傳數據，所以get限制傳遞數據32k，post能夠達到1G。
瀏覽器的一個請求裏面，咱們能夠看到都有以下3部分

具體內容含義，內容來自：https://www.cnblogs.com/good7... ，感謝
Request Headers請求頭

• Accept:告訴服務器，客戶機支持的數據類型
• Accept-Encoding:告訴服務器，客戶機支持的數據壓縮格式
• Cache-Control：緩存控制，服務器經過控制瀏覽器要不要緩存數據
• Connection:處理完此次請求，是斷開鏈接仍是保持鏈接
• Cookie:客戶機經過這個能夠向服務器帶數據
• Host:訪問的主機名
• User-Agent:告訴服務器，客戶機的軟件環境

Response Headers響應頭

• Connection:處理完此次請求後，是斷開鏈接仍是繼續保持鏈接
• Content-Encoding:服務器經過這個頭告訴瀏覽器數據的壓縮格式
• Content-Length:服務器經過這個頭告訴瀏覽器回送數據的長度
• Content-Type:服務器經過這個頭告訴瀏覽器回送數據的類型
• Date:當前時間值
• Server:服務器經過這個頭告訴瀏覽器服務器的類型
• Vary:Accept-Encoding ——明確告知緩存服務器按照
• Accept-Encoding 字段的內容，分別緩存不一樣的版本;
• X-Powered-By:服務器告知客戶機網站是用何種語言或框架編寫的。

---

表單

1. 屬性
   action —— 提交到哪兒
   method —— 提交方式，GET、POST；PUT、HEADER、DELETE；自定義（服務器配置了就能識別）
   name —— 必須加（後端識別數據）；多個相同name相同提交到後端是列表
   submit —— 提交

2. 數據提交方法
   GET、POST的安全性徹底同樣，https才能更加安全
   GET

   1.數據放在url裏
     2.容量有限（<32k）
     3.有緩存
     4.利於分享和收藏（相關參數都在url裏面）

   POST

   1. 數據放在http-body裏
     2. 容量較大（<1G）
     3. 不緩存
     4. 無法分享和收藏

Q: 表單重複提交怎麼解決？
開始提交的時候，提交按鈕禁用，結束後提交按鈕恢復可用。

Q: 重定向、轉發區別
重定向 通知瀏覽器，讓瀏覽器去請求另外一個地址——瀏覽器地址是會變的
轉發 在服務器內部，把請求轉交給另外一個模塊處理；對客戶端是不可見的——瀏覽器地址不變

---

ajax

ajax的使用直接引入jq便可使用，可講性不大。
咱們嘗試本身使用原生js簡單封裝了一個ajax，可參考 https://segmentfault.com/a/11...