Web2.0以來航攒，Ajax的出世趴梢，解決了傳統(tǒng)表單提交頁面跳轉(zhuǎn)币他，閃爍白屏等問題。使得Web頁面可以實現(xiàn)局部更新灵莲，不僅減少了網(wǎng)絡(luò)帶寬，還大大提升了用戶體驗。
但Ajax并非是一把萬能的鑰匙，足以打開Web通信這扇大門碟摆，當(dāng)請求遇到跨域通信時，Ajax就沒轍了断盛。
Web的快速發(fā)展讓開發(fā)走向工程化的同時钢猛，要求工作維度進行劃分（前端后端分工明細），以便擴展維護日益復(fù)雜龐大的項目需求厢洞。而前后端分離的開發(fā)方式正是這種需求背景下衍生的產(chǎn)物躺翻。（以前混編的代碼現(xiàn)在是再也不想看到）
前后端分離的開發(fā)方式卫玖，如何進行數(shù)據(jù)通信是開發(fā)人員繞不過去的問題。作為開發(fā)同學(xué)的小伙伴客戶端的瀏覽器陕靠，有點小調(diào)皮還做了一個同源策略的限制脱茉，當(dāng)我們的數(shù)據(jù)請求遇到不同源的情況下（跨域），我們就得嘗試其它的通信方法税肪，不能Ajax一條道走到黑益兄。
什么是同源策略及限制
同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互净捅。這是一個用于隔離潛在惡意文件的關(guān)鍵的安全機制。
同源要求協(xié)議荆永，域名具钥，端口(默認80)三者都相同捉腥，否則為非同源你画。
同源策略限制：
- Cookie坏匪， LocalStorage和IndexDB無法讀取
- Dom無法獲取
- Ajax請求不能發(fā)送
前后端如何通信
- Ajax（僅支持同源）
- WebSocket （不受同源限制）
- CORS （都支持适滓，新的W3C通信標(biāo)準(zhǔn)）
如何創(chuàng)建Ajax
- XMLHttpRequest對象的工作流程
- 兼容性處理
- 事件的觸發(fā)條件
- 事件的觸發(fā)順序
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft')
var data = opt.data,
url = opt.url,
type = opt.type.toUpperCase(),
dataArr = [];
for (var k in data) {
dataArr.push(k + '=' + data[k]);
}
if (type === 'GET') {
url = url + '?' + dataArr.join('&');
xhr.open(type, url.replace(/\?$/g, '', true);
xhr.send();
}
if (type === 'POST') {
xhr.open(type, url, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(data.join('&'));
}
xhr.onload = function() {
if (xhr.status === 200 || xhr.status === 304) {
var res;
if (opt.success && opt.success instanceof Function) {
res = xhr.responseText;
if (typeof res === 'string') {
res = JSON.parse(res);
opt.success.call(xhr, res)
}
} else {
if (opt.error && opt.error instanceof Function) {
opt.error.call(xhr, res);
}
}
}
}
同源下凭迹，我們可以直接使用Ajax來與后端同學(xué)做數(shù)據(jù)通信嗅绸，但是遇到跨域請求時，我們就得更換手中這把Ajax的鑰匙猛拴，來重新配鑰匙開鎖
跨域通信的幾種方式
- JSONP
- Hash
- postMessage (HTML5)
- WebSocket
- CORS (新的W3C通信標(biāo)準(zhǔn))
1. JSONP
JSONP原理：客戶端通過動態(tài)創(chuàng)建script標(biāo)簽異步加載來實現(xiàn)愉昆，服務(wù)端callback返回客戶端定義的方法名跛溉，讓客戶端進行調(diào)用獲取數(shù)據(jù)。
只支持Get請求 (GET與POST的區(qū)別這里暫不細講)
// 客戶端發(fā)送請求
<script src="http://www.abc.com?data=name&callback=jsonpname"></script>
<script>
jsonpname({
data: {
...
}
})
</script>
2. Hash
Hash原理：通過window.onhashchange事件監(jiān)聽來獲取url中hash值來實現(xiàn)數(shù)據(jù)傳輸蛛蒙。與Get一樣牵祟，有Url長度限制
// A中代碼
var B = document.getElementdByTagName('iframe');
B.src = B.src + '#' + 'data';
// B中代碼
window.onhashchange = function(){
var data = window.location.hash;
}
3. postMessage
postMessage是HTML5的API，可參考開發(fā)文檔window.postMessage
// A.com向B.com發(fā)送信息
Bwindow.postMessage('data','http://B.com')
// B中監(jiān)聽
window.addEventListener('message', function(event){
console.log(event.origin); // http://A.com
console.log(event.source); // Bwindow
console.log(event.data); // data
}, false)
項目中應(yīng)用場景：
- 頁面和其打開的新窗口的數(shù)據(jù)傳遞
- 多窗口之間消息傳遞
- 頁面與嵌套的iframe消息傳遞
- 上面三個問題的跨域數(shù)據(jù)傳遞
4. WebSocket
WebSocket是HTML5開始提供的一種在單個 TCP 連接上進行全雙工通訊的協(xié)議，本身不受同源限制雹拄。
// WebSocket代碼示例
var ws = new WebSocket('wss://echo.websocket.org');
ws.onopen = function (evt) {
console.log('Connection open ...');
ws.send('Hello WebSocket!');
};
ws.onmessage = function (evt) {
console.log('Received Message: ' + evt.data);
ws.close();
}
ws.onclose = function (evt) {
console.log('Connection closed.');
}
5. CORS
CORS是一個W3C標(biāo)準(zhǔn)滓玖，全稱是"跨域資源共享"（Cross-origin resource sharing）势篡。它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請求念祭，從而克服了AJAX只能同源使用的限制粱坤。
瀏覽器兼容在XHR(IE8/9)及XHR2(>=IE10)下需要做兼容處理站玄。
// CORS代碼示例
fetch('/url', {
method: 'get'濒旦，
}).then(function(res){
...
}).catch(function(err) {
// 錯誤
})
-- End --
JSONP有更好的兼容性疤估，能兼容低版本瀏覽器，但是基于Get傳輸數(shù)據(jù)钞瀑，會因為瀏覽器Url長度限制而限制數(shù)據(jù)大小雕什。CORS在不考慮低版本瀏覽器時贷岸，無疑是目前最好前后端通信方案（單向）偿警，雙向選擇WebSocket，而多個頁面之間的數(shù)據(jù)通信盒使，如內(nèi)嵌iFrame等，則推薦postMessage七嫌。
每種方案有不同的應(yīng)用場景少办，解決問題不只有一種解決方案，實際項目開發(fā)中诵原，需根據(jù)實際需求來挑選最優(yōu)的方案英妓。
參考資料
作者：以樂之名
本文原創(chuàng)绍赛，有不當(dāng)?shù)牡胤綒g迎指出蔓纠。轉(zhuǎn)載請指明出處。
