6.數(shù)據(jù)通信
HTTP協(xié)議
HTTP 請求過程：瀏覽器向服務器端發(fā)送一個 HTTP 請求報文，服務器端接到請求報文之后進行一系列計算啰扛，向瀏覽器返回一個 HTTP 響應報文。瀏覽器接受響應報文后將響應報文的主體顯示在瀏覽器端上。
HTTP 請求報文和響應報文均由三部分組成本冲，頭行，頭部和主體劫扒。
請求報文
頭行：GET ?music.163.com ? HTTP/1.1
分別為 HTTP 方法檬洞，主機地址，HTTP 版本
頭部：由許多鍵值對組成
Accept——瀏覽器端可接受的媒體類型沟饥；
Accept-Encoding——瀏覽器端可接受的媒體類型的編碼方式添怔；
Cache-Control——緩存策略湾戳，no-cache 不進行緩存
Cookie——瀏覽器向服務器端發(fā)送的 cookie 值
User-Agent——當前瀏覽器版本
主體：請求為 GET 方法時，主體為空
響應報文
頭行：HTTP/1.1 ? 200 ? ?OK ??
分別為 HTTP 版本广料，HTTP 狀態(tài)碼砾脑，HTTP 狀態(tài)碼描述
頭部：鍵值對
Expires——緩存的有效時間，為瀏覽器端進行緩存時可使用艾杏。
Server——HTTP 服務器
主體：一個完整的 XML 文件
常用 HTTP 方法
GET：從服務器獲取一份文檔韧衣，不包含主體
POST：向服務器發(fā)送需要處理的數(shù)據(jù)，包含主體
PUT：將請求的主體部分存儲在服務器上购桑，包含主體
DELETE：從服務器上刪除一份文檔畅铭，不包含主體
URL 構成
http://www.163.com:8080/index.html?r=admin&lang=zh-CN#news
協(xié)議（protocol）—— http:
主機名（hostname）—— www.163.com
端口（port）—— 8080
路徑（pathname）—— index.html
查詢字符串（search）—— r=admin&lang=zh-CN
片段（hash）—— news
port，pathname其兴，search顶瞒，hash 非必須
HTTP 版本
HTTP/0.9：1991年，HTTP 原型元旬，有很多設計缺陷
HTTP/1.0：很快取代 HTTP/0.9 榴徐，成為第一個廣泛應用的版本
HTTP/1.0+：添加持久的 keep-alive 連接，虛擬主機支持匀归，以及代理連接支持坑资，成為非官方的事實標準
HTTP/1.1：校正了結構性缺陷，明確語義穆端，引入重要的性能優(yōu)化措施袱贮，刪除不好特性。是當前使用版本
常見 HTTP 狀態(tài)碼
200 OK：請求成功体啰。一般用于 GET 和 POST 方法
301 Moved Permanently：資源移動攒巍，所請求資源自動到新的 URL，瀏覽器自動跳轉到新的 URL荒勇。
304 Not Modified：未修改柒莉，所請求資源未修改，瀏覽器讀取緩存數(shù)據(jù)
400 Bad Request：請求語法錯誤沽翔，不能被服務器所理解兢孝。
404 Not Found：請求資源不存在，舉個例子：輸入了錯誤的URL仅偎。
500 Internal Server Error：服務器發(fā)生不可預期的錯誤科汗。
ajax
Asynchronous JavaScript and XML 用 JavaScript 異步地獲取 XML 作為數(shù)據(jù)交換的格式
Ajax 通信流程
創(chuàng)建 Ajax 對象 XHR表谊，它的三個屬性為 readyState联逻，status觉渴，responseText 。初始 readyState 值為0威恼，另外兩個屬性值為空品姓。
調(diào)用 XHR 的 open() 方法寝并，開啟一個請求以備發(fā)送箫措，此時readyState 值為1腹备。
調(diào)用 XHR 的 send() 方法，正式向服務器端發(fā)起請求斤蔓，此時readyState 值為2植酥。
服務器端開始返回數(shù)據(jù)時，瀏覽器端接收到數(shù)據(jù)弦牡，此時readyState 值為3友驮。
當瀏覽器結束請求，此時readyState:4 status:200 reponseText:<!DOCTYPE html>
Ajax 調(diào)用示例
中間 xhr.onreadystatechange 為處理返回數(shù)據(jù)驾锰。監(jiān)聽 readystatechange 事件處理回調(diào)卸留，readyState 改變觸發(fā) readystatechange 事件。在 XHLHttpRequest2 標準還可以監(jiān)聽 xhr.onload 事件椭豫，readyState == 4耻瑟，status==200 才能觸發(fā)。
open() 方法：開啟一個請求已備發(fā)送
xhr.open(method,url[,async = true]);
method 表示調(diào)用的 http 請求方法（‘get’）
url 表示請求的資源相對當前文檔的路徑
async 布爾值赏酥，默認開啟異步請求喳整，false 表示開啟同步請求
setRequestHeader() 方法：在請求頭部設置頭部字段
在 open() 后調(diào)用，不一定調(diào)用裸扶。
xhr.setRequestHeader(header,value);
向服務器端發(fā)起一個表單編碼的請求時框都，需要在 send 前調(diào)用 setRequestHeader 方法。把頭部設成 Context-Type呵晨。
xhr.setRequestHeader(‘Context-Type’,‘a(chǎn)pplication/x-www-form-urlencoded’);
send() 方法：正式向服務器端發(fā)起請求
xhr.send([data = null]);
data 為向服務器端發(fā)起請求的請求體中的數(shù)據(jù)魏保。data 可為String FormData
data 為 FormData 時發(fā)起表單編碼的 POST 請求。
請求參數(shù)序列化
如果要向服務器端發(fā)起一個帶查詢參數(shù)的請求摸屠，需要把查詢參數(shù)作為字符串跟在 url 后面谓罗，如果查詢參數(shù)是個對象，要把對象轉換成字符串餐塘。
xhr.open(‘get’,'example.js'+'name1=value1&name2=name2',true);
需要一個函數(shù)妥衣，傳入對象，返回需要的字符串
GET 請求
POST 請求
查詢參數(shù)作為 send() 方法的請求參數(shù)傳入戒傻。
同源策略
同源策略限制不同源之間的交互税手，針對 XMLHttpRequest 等請求
兩個頁面擁有相同的協(xié)議，端口和主機需纳，那么這兩個頁面就屬于同一個源芦倒。
跨域資源訪問
不滿足同源策略的訪問，叫跨域資源訪問不翩。
W3C 定義了 CORS兵扬。
現(xiàn)代瀏覽器已經(jīng)實現(xiàn)對 CORS 支持麻裳。
其他跨域技術
Frame代理 ? ? ? ?JSONP ? ? ? ? ?Comet ? ? ? ? ? Web Socket
Frame代理
優(yōu)點：參照 CORS 標準，支持各種請求方法器钟。
缺點：需要在目標服務器放置代理文件津坑，由于首次發(fā)起請求，需要載入代理文件傲霸，載入代理之前的所有請求都會存在一定的延時疆瑰。對于低版本瀏覽器受限于消息通信，并發(fā)量大的請求返回時可能存在大的延時昙啄。
JSONP
利用了 HTML 中 script 標簽可跨域原理穆役，利用 script 標簽，向服務器請求一段 JS 代碼梳凛，然后執(zhí)行跨域過程耿币。
7.數(shù)據(jù)存儲
cookie
瀏覽器中的 Cookie 是一段小型的文本文件，4KB 左右韧拒，由鍵值對構成淹接，鍵值對之間用分號和空格隔開。
屬性
Name（名）叭莫，Value（值）為在設置 Cookie 時必須填的屬性蹈集；
Domain（作用域），默認值為當前文檔作用域雇初；Path（作用路徑）拢肆，默認值為當前文檔路徑；
Expires/Max-Age（失效時間）靖诗，默認值為瀏覽器會話時間（客戶端和服務端建立關聯(lián)的時間）郭怪，Expires 指定時間戳，Max-Age 表示以毫秒為單位的數(shù)值刊橘。
Secure（https 協(xié)議時生效）鄙才，默認值為 false。
Name促绵，Domain攒庵，Path 組合標識一個唯一的 Cookie 值。
作用域和作用路徑 轉自CSDN博客
Domain為設置Cookie的有效域败晴，Path限制有效路徑浓冒，如以下幾種情況：
1.最大可能的作用域 yourdomain.com所有角落（設置Cookie.Domain = "yourdomain.com"，效果為yourdomain.com域下的所有主機的所有位置都可以取到這個Cookie)
2.域下的某主機?www.yourdomain.com（設置Cookie.Domain = "www.yourdomain.com"尖坤，效果為www主機下所有位置可以取)
3.某主機的某個文件夾www.yourdomain.com/bbs(Cookie.Domain ="www.yourdomain.com" ; Cookie.Path = "/bbs"稳懒，www主機的bbs下可以取)
讀取 Cookie
設置/修改 Cookie
刪除 Cookie
Cookie 的作用和缺陷
作用：跟蹤用戶信息，方便用戶登陸
缺陷：流量代價慢味，安全性問題场梆，大小限制
替代：localStorage 本地儲存 ?sessionStorage 會話存儲
storage
HTML5 提供 storage 作為 cookie 的替代方案墅冷。根據(jù)有效期和作用域的不同，storage 分為 localStorage 和 sessionStorage或油。
有效期
localStorage 的有效期默認為永久寞忿，如果在此期間用戶不對它進行刪除。
sessionStorage 的有效期默認為瀏覽器的會話時間装哆，當瀏覽器會話結束罐脊，sessionStorage 消亡定嗓。
作用域
localStorage 的作用域是由協(xié)議蜕琴，主機名和端口決定的。
sessionStorage 的作用域是在 localStorage 作用域的基礎上再加上窗口的限制宵溅，瀏覽器不同的窗口之間不共享 sessionStorage凌简。
大小
不同的瀏覽器對 storage 的實現(xiàn)不同，支持的大小也不同恃逻，大概為 5MB雏搂。
只要滿足有效期和作用域，瀏覽器每次訪問的時候都會將 storage 載入到內(nèi)存里寇损，對內(nèi)存造成不小壓力凸郑。建議在設置 storage 時不要設置過大的數(shù)據(jù)。
JS 對象
我們可以簡單地將 storage 理解成一個對象矛市，它的增刪查改可以以對象的形式來進行芙沥。
讀取：localStorage.name
添加/修改：localStorage.name = "NetEase"
刪除：delete localStorage.name
瀏覽器支持的 storage 存儲類型只有字符串浊吏。
API
W3C 有定義專門的 API 來對 storage 進行增刪查改而昨。
獲取鍵值對的數(shù)量：localStorage.length
讀取：localStorage.getItem("name") ? ? ?llocalStorage.key(i)
添加/修改：localStorage.setItem("name","NetEase")
刪除對應鍵值：localStorage.removeItem("name")
刪除所有數(shù)據(jù)：localStorage.clear()
