都是本人理解，筆記大致概念，不詳細也并非完全正確，所以僅供參考。
AJAX
一種可以在不重載頁面的情況下，與服務(wù)器更新交換數(shù)據(jù)的技術(shù)。
如何創(chuàng)建
通用對象：XMLHttpRequest
IE5/6對象：ActiveXObject
var ajax = new XMLHttpRequest();
ajax.open('get', 'https://abc.com/get/test');
ajax.send();
基本屬性和方法
ajax.readyState
存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
- 0: 請求未初始化
- 1: 服務(wù)器連接已建立
- 2: 請求已接收
- 3: 請求處理中
- 4: 請求已完成，且響應(yīng)已就緒
ajax.status
參見HTTP碼，大致類別如下：
- 100+ ：已建立連接，繼續(xù)請求
- 200+ ：相關(guān)
- 300+ ：重定向相關(guān)
- 400+ ：資源錯誤相關(guān)
- 500+ ：服務(wù)器錯誤相關(guān)
ajax.setRequestHeader()
向請求添加 HTTP 頭
onreadystatechange 事件
每當 readyState 屬性改變時，就會調(diào)用該函數(shù)，總共會被觸發(fā) 4 次，分別是： 0-1、1-2、2-3、3-4，對應(yīng)著 readyState 的每個變化。
基本示例
此處僅做簡單介紹：具體參考此處文檔
var ajax;
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
} else {
// IE5、6
ajax = new ActiveXObject('Microsoft.XMLHTTP');
}
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
console.log(ajax.responseText) // 請求結(jié)果
}
};
ajax.open('get', 'https://abc.com/get/test',false);
ajax.send();
AJAX跨域
形成跨域的主要原因是因為同源策略，在同源策略下，站點與站點值之間需滿足一下條件：
- 同協(xié)議
- 同域名
- 同端口
在同源策略下，非同源站點受以下限制：
- Cookie、LocalStorage 和 IndexDB 無法讀取
- DOM 無法獲得
- AJAX 請求不能發(fā)送
解決跨域的詳細解決方案參照此篇文章，此處僅簡單描述AJAX跨域的三種方案：
- JSONP
- WebSocket
- CORS
JSONP
其本質(zhì)就是在網(wǎng)頁插入script元素向服務(wù)器請求數(shù)據(jù)，服務(wù)器收到請求后將數(shù)據(jù)放在一個指定名稱的回調(diào)函數(shù)中，然后JS再執(zhí)行此回調(diào)函數(shù)。
WebSocket
WebSocket是一種通信協(xié)議，使用ws://（非加密）和wss://（加密）作為協(xié)議前綴。該協(xié)議不實行同源政策，在請求時請求頭會有Origin字段，而服務(wù)器可根據(jù)Origin字段來進行請求源的限制和許可，以此來決定是否返回數(shù)據(jù)。
CORS
通常情況下，WebSocket是用作其他的業(yè)務(wù)功能，而非解決AJAX跨域的方案，使用CORS才是解決AJAX跨域的首選方案，以下詳細說明。
CORS
CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。
CORS需要瀏覽器和服務(wù)器同時支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。
CORS存在兩種請求類型：
- 基本請求
- 非簡單請求
只要同時滿足以下兩大條件，就屬于簡單請求。
- 請求方法是以下三種方法之一：HEAD、GET、POST
- HTTP的頭信息不超出以下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三個值application/x-www-form-urlencoded、 multipart/form-data、text/plain
簡單請求
如WebSocket，在請求時請求頭會有Origin字段，服務(wù)器可根據(jù)Origin字段來進行請求源的限制和許可，以此來決定是否返回數(shù)據(jù)。
非簡單請求
請求前發(fā)出預檢請求OPTIONS，此請求標識 Origin 會請求哪些 methods ，若同意后，則發(fā)出跨域請求。
與JSONP的比較
CORS與JSONP的使用目的相同，但是比JSONP更強大。
JSONP只支持GET請求，CORS支持所有類型的HTTP請求。
JSONP的優(yōu)勢在于支持老式瀏覽器，以及可以向不支持CORS的網(wǎng)站請求數(shù)據(jù)。
