首頁 >web前端 >js教程 >簡單談談json跨域_javascript技巧

簡單談談json跨域_javascript技巧

WBOY
WBOY原創
2016-05-16 15:10:541540瀏覽

這篇文章呢,主要是之前一直聽別人講json跨域跨域,但是還是一頭霧水,只知其一,於是一怒之下,翻閱各種資料,如果有不正確的地方,勞煩指正一下^_^

首先,先了解瀏覽器有一個很重要安全性限制,即為同源策略:不同網域的用戶端腳本在無明確授權的情況下不能讀些對方資源。跨域也就是不同來源~

簡單的說,只要協議,端口,域名有一個不同,即為跨域!

然而,當進行一些比較深入的前端程式設計的時候,不可避免地需要進行跨域操作,這時候「同源策略」就顯得過於苛刻。

解決方法:

1.使用jsonp解決跨域 :(僅適用於GET請求)

實作原理:<script>  標籤是不受同源策略的限制的,它可以載入任意地方的 JavaScript 文件,而不要求同源。 <br /> 所以 JSONP 的理念就是,我和服務端約定好一個函數名,當我請求檔案的時候,服務端回傳一段 JavaScript。這段 JavaScript 呼叫了我們約定好的函數,並且將資料當作參數傳入。非常巧合的一點(其實不是),JSON 的資料格式和 JavaScript 語言裡物件的格式剛好相同。所以在我們約定的函數裡面可以直接使用這個物件。 <br /> </script>

使用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種解決方法…其實還有很多其他的,之後再一一補充------------- ----

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn