簡單談?wù)刯son跨域

字號:


    本文主要給大家講解了javascript中的json跨域問題,以及跨域安全性的解決辦法,總結(jié)了二點,分享給大家
    首先,先了解瀏覽器有一個很重要安全性限制,即為同源策略:不同域的客戶端腳本在無明確授權(quán)的情況下不能讀些對方資源??缬蛞簿褪遣煌磣
    簡單的說,只要協(xié)議,端口,域名有一個不同,即為跨域!
    然而,當(dāng)進(jìn)行一些比較深入的前端編程的時候,不可避免地需要進(jìn)行跨域操作,這時候“同源策略”就顯得過于苛刻。
    解決方法:
    1.使用jsonp解決跨域 :(僅適用于GET請求)
    實現(xiàn)原理:<script>  標(biāo)簽是不受同源策略的限制的,它可以載入任意地方的 JavaScript 文件,而并不要求同源。
    所以 JSONP 的理念就是,我和服務(wù)端約定好一個函數(shù)名,當(dāng)我請求文件的時候,服務(wù)端返回一段 JavaScript。這段 JavaScript 調(diào)用了我們約定好的函數(shù),并且將數(shù)據(jù)當(dāng)做參數(shù)傳入。非常巧合的一點(其實并不是),JSON 的數(shù)據(jù)格式和 JavaScript 語言里對象的格式正好相同。所以在我們約定的函數(shù)里面可以直接使用這個對象。
    使用JavaScript代碼解決
    var eleScript = document.createElement("script"); 
    eleScript.type = "text/javascript"; 
    eleScript.src = "http://example2.com/getinfo.php"; 
    document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
    使用jquery解決
    $.ajax({ 
       url: http://跨域的dns/document!searchJSONResult.action, 
       type: "GET", 
       dataType: 'jsonp',   //主要是這里和原來的json改變了!
       jsonp: 'jsoncallback', 
    })
    2.使用HTML5的window.postMessage方法來跨域傳送數(shù)據(jù)(只兼容IE8+、FireFox、Chrome、Opera等瀏覽器)window.postMessage(message,targetOrigin)  方法是html5新引進(jìn)的特性,可以使用它來向其它的window對象發(fā)送消息,無論這個window對象是屬于同源或不同源。
    暫且先介紹這2種解決方法……其實還有很多其他的,之后再一一補(bǔ)充。