核心 XMLHttpRequest
XMLhttpRequest對象用于與伺服器互動 通過XMLHttpRequest可以在不重新整理頁面的情況下請求特定URL，擷取資料；這允許網頁在不影響使用者操作的情況下，更新頁面的局部内容
let xhr = new XMLHttpRequest();
--xhr.open(method, url, flag)
method 請求方式
url 請求位址
--xhr.onreadystatechange
當readyState屬性發生變化時觸發
xhr.onreadystatechange = function(){}
--xhr.readyState 請求的狀态碼
| 代理被建立，但尚未調用 open() 方法。 | |
| | |
| | |
| | 下載下傳中； |
| | 下載下傳操作已完成。 |
--xhr.response 響應對象
--xhr.responseText 響應文本字元串
--xhr.responseType 響應類型
--xhr.status 響應狀态
100-199 資訊提示
200-299 成功
300-399 重定向
400-499 用戶端錯誤
500-599 伺服器錯誤
--xhr.statusText 響應狀态文本
--xhr.timeout 請求的最大請求時間 機關毫秒
--xhr.withCredentials 用來指定跨域Access-Control請求是否應該帶有授權資訊
--xhr.send() 發送HTTP請求
同源政策 跨域
同源：協定相同、域名相同、端口相同
用戶端要想正常通路伺服器，必須遵守同源政策
3種行為受限：
1.cookie localStorage和indexDB無法擷取
2.DOM無法獲得
3.AJAX請求不能發送
----CORS跨域
CORS需要浏覽器和伺服器同時支援
----跨域請求
浏覽器将跨域請求分為2類：簡單請求和非簡單請求
簡單請求：
1.請求方式是head、get、post 3種之一
2.http頭資訊不超出一下幾種字段：accpet accept-language Content-Language Last-Event-ID Content-Type(僅限于3個值 application/x-www-form-urlencoded multipart/form-data text/plain)
非簡單請求：對伺服器有特殊要求的請求，例如請求方式是PUT或DELETE，或者Content-Type字段的類型是application/json
非簡單請求的CORS請求會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢請求"
----服務端設定允許跨域
res.setHeader('Access-Control-Allow-Origin', '*') 設定允許跨域的域名
res.setHeader('Access-Control-Allow-Headers','x-requested-with,Authorization,token,content-type') 設定允許的header類型
res.setHeader('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS,PATCH') 設定跨域允許的請求方式
res.setHeader('Access-Control-Max-Age', '172800') 設定本次預檢請求的有效期 機關秒 在此期間不用發出另一條預檢請求
res.setHeader('Access-Control-Allow-Credentials', 'true') 設定是否可以使用憑證進行實際請求
----JSONP
伺服器與客戶段跨源通信的常用方法
同源政策小細節：不可以跨域進行腳本請求資料，但是可以通過資源引入和用戶端頁面不同源的資源檔案 資源的請求都預設為GET請求
基本思想：網頁通過添加一個' '元素，向伺服器請求JSON資料，這種做法不受同源政策限制；伺服器收到請求後，将資料放在一個指定名字的回調函數裡傳回來
1.同源政策無法完全限制link img script等的src資源請求
2.資源src對于伺服器來說 就是一條get方式的請求
3.拼接一個script标簽，進而觸發對指定位址的GET請求
4.服務端根據url上的query部分識别前端的回調函數callback名稱
5.服務端傳回對應的回調函數名稱及參數callback(資料)并寫入script标簽作為js腳本執行
6.前端預先準備好對應的回調函數 用來接收傳回的資料
Cookie驗證
----cookie屬性
Name 鍵值對的key
Value 鍵值對的value
Domain 可以通路該cookie的域名
Path 指定可通路cookie的目錄
Expires / Max-Age 指定過期時間 如果不設定過期時間 當浏覽器關閉的時候cookie就會消失
HttpOnly 如果在Cookie中設定了HttpOnly屬性，那麼通過程式将無法擷取到cookie資訊，能夠防止XSS攻擊
Secure 該cookie是否僅被使用安全協定傳輸
SameSite 用來放置CSRF攻擊和使用者追蹤
----擷取cookie
----設定cookie
單個設定
多個設定
設定過期時間
ajax庫---axios
axios.request(config)
axios.get(url, [config])
axios.delete(url, [config])
axios.head(url, [config])
axios.options(url, [config])
axios.post(url, [data], [config])
axios.put(url, [data], [config])
axios.patch(url, [data], [config])
例如