国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

雜談:前端Web通信

Betta / 462人閱讀

摘要:作為開發同學的小伙伴客戶端的瀏覽器,有點小調皮還做了一個同源策略的限制,當我們的數據請求遇到不同源的情況下跨域,我們就得嘗試其它的通信方法,不能一條道走到黑。

Web2.0以來,Ajax的出世,解決了傳統表單提交頁面跳轉,閃爍白屏等問題。使得Web頁面可以實現局部更新,不僅減少了網絡帶寬,還大大提升了用戶體驗。

但Ajax并非是一把萬能的鑰匙,足以打開Web通信這扇大門,當請求遇到跨域通信時,Ajax就沒轍了。

Web的快速發展讓開發走向工程化的同時,要求工作維度進行劃分(前端后端分工明細),以便擴展維護日益復雜龐大的項目需求。而前后端分離的開發方式正是這種需求背景下衍生的產物。(以前混編的代碼現在是再也不想看到)

前后端分離的開發方式,如何進行數據通信是開發人員繞不過去的問題。作為開發同學的小伙伴客戶端的瀏覽器,有點小調皮還做了一個同源策略的限制,當我們的數據請求遇到不同源的情況下(跨域),我們就得嘗試其它的通信方法,不能Ajax一條道走到黑。

什么是同源策略及限制
同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用于隔離潛在惡意文件的關鍵的安全機制。

同源要求協議,域名,端口(默認80)三者都相同,否則為非同源。

同源策略限制:

Cookie, LocalStorage和IndexDB無法讀取

Dom無法獲取

Ajax請求不能發送

前后端如何通信

Ajax(僅支持同源)

WebSocket (不受同源限制)

CORS (都支持,新的W3C通信標準)

如何創建Ajax

XMLHttpRequest對象的工作流程

兼容性處理

事件的觸發條件

事件的觸發順序

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來與后端同學做數據通信,但是遇到跨域請求時,我們就得更換手中這把Ajax的鑰匙,來重新配鑰匙開鎖

跨域通信的幾種方式

JSONP

Hash

postMessage (HTML5)

WebSocket

CORS (新的W3C通信標準)

1. JSONP

JSONP原理:客戶端通過動態創建script標簽異步加載來實現,服務端callback返回客戶端定義的方法名,讓客戶端進行調用獲取數據。

只支持Get請求 (GET與POST的區別這里暫不細講)

// 客戶端發送請求

2. Hash

Hash原理:通過window.onhashchange事件監聽來獲取url中hash值來實現數據傳輸。與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,可參考開發文檔window.postMessage

// A.com向B.com發送信息
Bwindow.postMessage("data","http://B.com")
// B中監聽
window.addEventListener("message", function(event){
    console.log(event.origin); // http://A.com
    console.log(event.source); // Bwindow
    console.log(event.data); // data
}, false)

項目中應用場景:

頁面和其打開的新窗口的數據傳遞

多窗口之間消息傳遞

頁面與嵌套的iframe消息傳遞

上面三個問題的跨域數據傳遞

4. WebSocket

WebSocket是HTML5開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議,本身不受同源限制。

// 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標準,全稱是"跨域資源共享"(Cross-origin resource sharing)。它允許瀏覽器向跨源服務器,發出XMLHttpRequest請求,從而克服了AJAX只能同源使用的限制。

瀏覽器兼容在XHR(IE8/9)及XHR2(>=IE10)下需要做兼容處理。

// CORS代碼示例
fetch("/url", {
    method: "get",
}).then(function(res){
    ...
}).catch(function(err) {
    // 錯誤
})
-- End --

JSONP有更好的兼容性,能兼容低版本瀏覽器,但是基于Get傳輸數據,會因為瀏覽器Url長度限制而限制數據大小。CORS在不考慮低版本瀏覽器時,無疑是目前最好前后端通信方案(單向),雙向選擇WebSocket,而多個頁面之間的數據通信,如內嵌iFrame等,則推薦postMessage。

每種方案有不同的應用場景,解決問題不只有一種解決方案,實際項目開發中,需根據實際需求來挑選最優的方案。

參考資料

html5 postMessage解決跨域、跨窗口消息傳遞

干貨 | 前端常用的通信技術

阮一峰 — 跨域資源共享 CORS 詳解

CORS正確使用姿勢

作者:以樂之名
本文原創,有不當的地方歡迎指出。轉載請指明出處。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96397.html

相關文章

  • [雜談]了解一些額外知識,讓前端開發錦上添花

    摘要:對的請求,也是要有一個了解,比如協議,請求方式,請求過程,結果狀態碼等。教程協議詳解經典面試題一個故事講完響應狀態碼上面提到響應狀態碼,在這里也簡單寫下。 勸了別人無數次,讓別人喝了雞湯,幫別人填坑,自己卻掉了坑 1.前言 在前端學習里面,很多人都是注重學習代碼(html,css,js)。或者是一些框架,庫(jquery,vue,react),或者是各種工具(webpack,gulp)...

    vvpvvp 評論0 收藏0
  • [雜談]了解一些額外知識,讓前端開發錦上添花

    摘要:對的請求,也是要有一個了解,比如協議,請求方式,請求過程,結果狀態碼等。教程協議詳解經典面試題一個故事講完響應狀態碼上面提到響應狀態碼,在這里也簡單寫下。 勸了別人無數次,讓別人喝了雞湯,幫別人填坑,自己卻掉了坑 1.前言 在前端學習里面,很多人都是注重學習代碼(html,css,js)。或者是一些框架,庫(jquery,vue,react),或者是各種工具(webpack,gulp)...

    張率功 評論0 收藏0
  • [雜談]了解一些額外知識,讓前端開發錦上添花

    摘要:對的請求,也是要有一個了解,比如協議,請求方式,請求過程,結果狀態碼等。教程協議詳解經典面試題一個故事講完響應狀態碼上面提到響應狀態碼,在這里也簡單寫下。 勸了別人無數次,讓別人喝了雞湯,幫別人填坑,自己卻掉了坑 1.前言 在前端學習里面,很多人都是注重學習代碼(html,css,js)。或者是一些框架,庫(jquery,vue,react),或者是各種工具(webpack,gulp)...

    zhichangterry 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<