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

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)

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 
相關文章
相關標籤/搜索