1. cookiehtml
瀏覽器存儲技術。(服務器將少許數據交於瀏覽器存儲管理)前端
做用: 存儲數據, 解決 http 協議無狀態問題ajax
工做流程:chrome
瀏覽器發送請求給服務器,請求登陸json
服務器返回響應給瀏覽器,此時攜帶了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)
① 建立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 反向代理等方案
解決方案:
利用 script 標籤可以跨域的特性解決跨域的
只能發送 get 請求, 兼容性好
步驟:
① 建立 script 標籤
② 設置響應成功的回調函數
③ 設置 script 的src 屬性
④ 將 script 添加到頁面中生效
⑤ 服務器必須響應 callback(data) 格式數據