簡單談談json跨域

更新時間：2016年03月13日 10:54:08 投稿：hebedich

本文主要給大家講解了javascript中的json跨域問題，以及跨域安全性的解決辦法，總結了2點，分享給大家，希望大家能夠喜歡。

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

首先，先了解瀏覽器有一個很重要安全性限制，即為同源策略：不同域的客戶端腳本在無明確授權的情況下不能讀些對方資源?？缬蛞簿褪遣煌磣

簡單的說，只要協(xié)議，端口，域名有一個不同，即為跨域！

然而，當進行一些比較深入的前端編程的時候，不可避免地需要進行跨域操作，這時候“同源策略”就顯得過于苛刻。

解決方法：

1.使用jsonp解決跨域：（僅適用于GET請求）

實現(xiàn)原理：<script> 標簽是不受同源策略的限制的，它可以載入任意地方的 JavaScript 文件，而并不要求同源。
所以 JSONP 的理念就是，我和服務端約定好一個函數(shù)名，當我請求文件的時候，服務端返回一段 JavaScript。這段 JavaScript 調用了我們約定好的函數(shù)，并且將數(shù)據(jù)當做參數(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新引進的特性，可以使用它來向其它的window對象發(fā)送消息，無論這個window對象是屬于同源或不同源。

------------暫且先介紹這2種解決方法……其實還有很多其他的，之后再一一補充-----------------

您可能感興趣的文章: