前端通訊類知識
1、什麼是同源策略及限制
同源策略限制從一個源載入的文件或指令碼如何與來自另一個源的資源進行互動。這是一個用於隔離潛在惡意檔案的關鍵的安全機制。
Cookie、LocalStorage和IndexDB無法讀取
DOM無法獲得
AJAX無法傳送
2、前後端如何通訊
AJAX:同源策略
WebSocket：不受同源限制
CORS：都支援
3、如何建立AJAX
考察要點：
XMLHttpRequest物件的工作流程
相容性處理
事件的觸發條件
事件的觸發順序
建立步驟：
1、建立
var request = new XMLHttpRequest();
2、設定請求引數
request.open("get", "http://10.0.152.17/AJAX/ajaxtest", true);
3、設定響應函式
request.onreadystatechange = function(){
if(request.readyState == 4) {
alert(request.responseText);
}
}
4、傳送請求
request.send
5、接收響應
request.responseText或者request.responseXML
//AjAX的請求封裝 function ajax(method,url,params,done){ //統一轉換為大寫便於後續判斷 method =method.toUpperCase(); //物件形式的引數轉換為urlencoded格式 var pairs=[]; for(var key in params){ paies.push(key+'='+params[key]) } var querystring=pairs.join('&'); var xhr=window.XMLHttpRequest ? new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP'); xhr.addEventListener('readystatechange',function(){ if(this.readyState!==4) return; //嘗試通過JSON格式解析響應體 try{ done(JSON.parse(this.responseText)) }catch(e){ done(this.responseText) } }) //如果是GET請求就設定URL地址問號引數 if(method==='GET'){ url+='?'+querystring; } xhr.open(method,url); //如果是POST請求就設定請求體 var data=null; if(method==='POST'){ xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') data=querystring; } xhr.send(data); } ajax('get','./get.php',{id:123},function(data){ console.log(data) }) ajax('post','./post.php',{foo:'posted data'},function(data){ console.log(data); })
4、跨域通訊的幾種方式
1、JSONP
//html頁面常用來實現的程式碼:
function jsonp (url, params, callback) {
var funcName = 'jsonp_' + Date.now() + Math.random().toString().substr(2, 5)
if (typeof params === 'object') {
var tempArr = []
for (var key in params) {
var value = params[key]
tempArr.push(key + '=' + value)
}
params = tempArr.join('&')
}
var script = document.createElement('script')
script.src = url + '?' + params + '&callback=' + funcName
document.body.appendChild(script)
window[funcName] = function (data) {
callback(data)
delete window[funcName]
document.body.removeChild(script)
}
}
jsonp('http://localhost/jsonp/server.php', { id: 123 }, function (res) {
console.log(res)
})2、Hash
Hash：是url地址中#後面的部分，Hash改變頁面不重新整理。Search：是url地址中?後的部分，改變頁面會重新整理
// 利用hash，場景是當前頁面 A 通過iframe或frame嵌入了跨域的頁面 B
// 在A中虛擬碼如下：
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'data';
// 在B中的虛擬碼如下
window.onhashchange = function () {
var data = window.location.hash;
};
3、postMassage
// postMessage
// 視窗A(http:A.com)向跨域的視窗B(http:B.com)傳送資訊
Bwindow.postMessage('data', 'http://B.com');
// 在視窗B中監聽
Awindow.addEventListener('message', function (event) {
console.log(event.origin);
console.log(event.source);
console.log(event.data);
}, false);4、WebSocket
// Websocket【參考資料】http://www.ruanyifeng.com/blog/2017/05/websocket.html
var ws = new WebSocket('wss://echo.websocket.org');
ws.onopen = function (evt) {
console.log('Connection open ...');
ws.send('Hello WebSockets!');
};
ws.onmessage = function (evt) {
console.log('Received Message: ', evt.data);
ws.close();
};
ws.onclose = function (evt) {
console.log('Connection closed.');
};
5、CORS
fetch就是用來實現CORS通訊的
// CORS【參考資料】http://www.ruanyifeng.com/blog/2016/04/cors.html
// url（必選），options（可選）
fetch('/some/url/', {
method: 'get',
}).then(function (response) {
}).catch(function (err) {
// 出錯了，等價於 then 的第二個引數，但這樣更好用更直觀
});
// 一行程式碼搞定
// 允許跨域請求
header('Access-Control-Allow-Origin: *');CORS為什麼能支援跨域通訊：如果請求是跨域的，瀏覽器會攔截AJAX請求，它會在HTTP頭部中加Origin。