這一篇文章呢,主要是之前一直聽別人講json跨域跨域,但是還是一頭霧水,只知其一,於是一怒之下,翻閱各種資料,如果有不正確的地方,勞煩指正一下^_^
首先,先了解浏覽器有一個很重要安全性限制,即為同源策略:不同域的客戶端腳本在無明確授權的情況下不能讀些對方資源。跨域也就是不同源~
簡單的說,只要協議,端口,域名有一個不同,即為跨域!
然而,當進行一些比較深入的前端編程的時候,不可避免地需要進行跨域操作,這時候“同源策略”就顯得過於苛刻。
解決方法:
1.使用jsonp解決跨域 :(僅適用於GET請求)
實現原理:<script> 標簽是不受同源策略的限制的,它可以載入任意地方的 JavaScript 文件,而並不要求同源。
所以 JSONP 的理念就是,我和服務端約定好一個函數名,當我請求文件的時候,服務端返回一段 JavaScript。這段 JavaScript 調用了我們約定好的函數,並且將數據當做參數傳入。非常巧合的一點(其實並不是),JSON 的數據格式和 JavaScript 語言裡對象的格式正好相同。所以在我們約定的函數裡面可以直接使用這個對象。
使用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方法來跨域傳送數據 (只兼容IE8+、FireFox、Chrome、Opera等浏覽器)
window.postMessage(message,targetOrigin) 方法是html5新引進的特性,可以使用它來向其它的window對象發送消息,無論這個window對象是屬於同源或不同源。
------------暫且先介紹這2種解決方法……其實還有很多其他的,之後再一一補充-----------------