11. cookie_session_原生ajax_readyState的值_同源策略_跨域_jsonp的使用

1. cookie

瀏覽器存儲技術。（服務器將少許數據交於瀏覽器存儲管理）

做用： 存儲數據, 解決 http 協議無狀態問題

工做流程：

瀏覽器發送請求給服務器，請求登陸

服務器返回響應給瀏覽器，此時攜帶了cookie（其中包含着當前用戶的惟一標識）

瀏覽器接受到響應中cookie，得保存下來

瀏覽器下一次發送請求時，會自動攜帶上cookie，

服務器接受到請求，解析cookie，從而判斷是哪一個用戶發送的請求（解決http協議無狀態問題）

服務器端的使用：

設置 cookie        res.cookie(key, value, options)

獲取 cookie        引入第三方中間件解析 cookie-parser        req.cookies

清除瀏覽器 cookie        res.clearCookie(key)

前端使用：

document.cookie        讀寫二合一

清除        document.cookie = 'hello=123;expires=' + new Date(Date.now() - 1000);

特色：

cookie 數量有限制，同一個域名下大約 20 個左右（不一樣瀏覽器不同）

cookie 大小有限制，每個 cookie 最大值大約 4kb 左右（不一樣瀏覽器不同）

2. session

也是一種解決 http 協議無狀態問題的方案

不一樣的是：

session 存儲位置是服務器

存儲大小近乎無限

傳輸流量更小（只產生一個cookie）

3. 請寫出原生 ajax

① 建立xhr對象

② 綁定事件監聽

onreadystatechange  會監聽 readyState 值的變化，一旦發生變化，就會觸發當前事件

③ 設置請求信息

xhr.open(請求方式, 請求地址)        （get 請求參數在這寫, 以 查詢字符串 的方式）

④ 發送請求

xhr.send(body);        （post 請求參數寫在這兒，以 請求體參數 的方式）

問題：

chrome 和 firefox： 第二次 get 請求默認走協商緩存，狀態碼 304，仍是會向服務器發送請求

ie：第二次 get 請求默認走強制緩存，狀態碼 200，不會向服務器發請求

解決：讓每一次請求不同，只要請求不同，就不會走緩存

4. 談談readyState的值

0： xhr 對象建立成功，可是 xhr.open()  方法還未調用

1： xhr.open() 方法已經調用了，可是還未調用 xhr.send() 方法（意味着尚未發送請求，還能夠設置請求頭信息）

2： xhr.send() 方法已經調用了，接受到了部分響應數據（響應首行和響應頭）

3： 接受了響應體數據（若是響應體數據較小或者是純文本，在此階段就所有接受完了）

4： 接受了所有響應體數據（數據較大或者音視頻資源等）

5. 跨域

同源： 協議、域名、端口號 必須徹底相同

同源策略 (Same-Origin Policy) 最先由 Netscape 公司提出，是瀏覽器的一種安全策略

違背同源策略就是跨域

解決最終原理：繞過瀏覽器的 ajax 引擎就 ok，因此後面還有服務器代理模式、Nginx 反向代理等方案

解決方案：

• jsonp

利用 script 標籤可以跨域的特性解決跨域的

只能發送 get 請求, 兼容性好

步驟：

① 建立 script 標籤

② 設置響應成功的回調函數

③ 設置 script 的src 屬性

④ 將 script 添加到頁面中生效

⑤ 服務器必須響應 callback(data) 格式數據

• cors