跨域通信常用的幾種方式
1、JSONP
2筑累、WebSocket
3袱蜡、CORS
4、Hash
5慢宗、postMessage
1坪蚁、JSONP
- JSONP的原理是什么？怎么實現(xiàn)的镜沽？
JSONP的原理：通過<script>標簽的異步加載來實現(xiàn)的敏晤。可以通過<script>標簽的src缅茉，里面放url嘴脾，通過script標簽引入的js是不受同源策略的限制，得和后端訂好那個字段是回調(diào)函數(shù)
2. CORS
- CORS 可以理解成是既可以同步、也可以異步*的Ajax译打。
fetch 是一個比較新的API耗拓，用來實現(xiàn)CORS通信
// url（必選），options（可選）
fetch('/some/url/', {
method: 'get',
}).then(function (response) { //類似于 ES6中的promise
}).catch(function (err) {
// 出錯了奏司，等價于 then 的第二個參數(shù)乔询，但這樣更好用更直觀
});
- “CORS為什么支持跨域的通信？”
答案：跨域時韵洋，瀏覽器會攔截Ajax請求竿刁，并在http頭中加Origin。
3.postMessage
場景：窗口 A (http:A.com)向跨域的窗口 B (http:B.com)發(fā)送信息麻献。步驟如下们妥。
（1）在A窗口中操作如下：向B窗口發(fā)送數(shù)據(jù)：
// 窗口A(http:A.com)向跨域的窗口B(http:B.com)發(fā)送信息
Bwindow.postMessage('data', 'http://B.com'); //這里強調(diào)的是B窗口里的window對象
（2）在B窗口中操作如下：
// 在窗口B中監(jiān)聽 message 事件
Awindow.addEventListener('message', function (event) { //這里強調(diào)的是A窗口里的window對象
console.log(event.origin); //獲取 ：url。這里指：http://A.com
console.log(event.source); //獲让阄恰：A window對象
console.log(event.data); //獲取傳過來的數(shù)據(jù)
}, false);
4. WebSocket
首先Websocket是基于HTTP協(xié)議的监婶，或者說借用了HTTP的協(xié)議來完成一部分與后臺的握手。
//創(chuàng)建WebSocket的對象齿桃。參數(shù)可以是 ws 或 wss惑惶，后者表示加密。
var ws = new WebSocket("ws://localhost:9998/echo");
// 建立 webSocket 連接成功觸發(fā)事件
ws.onopen = function () {
// 使用 send() 方法發(fā)送數(shù)據(jù)
ws.send("發(fā)送數(shù)據(jù)");
alert("數(shù)據(jù)發(fā)送中...");
};
// 接收服務(wù)端數(shù)據(jù)時觸發(fā)事件
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("數(shù)據(jù)已接收...");
ws.close()
};
// 斷開 webSocket 連接成功觸發(fā)事件
ws.onclose = function () {
alert("連接已關(guān)閉...");
};
- 事件處理程序 描述
ws .onopen 連接建立時觸發(fā)
ws .onmessage 客戶端接收服務(wù)端數(shù)據(jù)時觸發(fā)
ws .onerror 通信發(fā)生錯誤時觸發(fā)
ws .onclose 連接關(guān)閉時觸發(fā) - 方法 描述
ws .send() 使用連接發(fā)送數(shù)據(jù)
ws .close() 關(guān)閉連接短纵，
