為什麼會出現json資料跨域訪問限制？

這是因為所有支援Javascript的瀏覽器都會使用同源策略這個安全策略。看看百度的解釋：

同源策略，它是由Netscape提出的一個著名的安全策略。現在所有支援JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，埠相同。當一個瀏覽器的兩個tab頁中分別開啟來 百度和谷歌的頁面當一個百度瀏覽器執行一個指令碼的時候會檢查這個指令碼是屬於哪個頁面的，即檢查是否同源，只有和百度同源的指令碼才會被執行。

這就是引起為何取不到資料的原因了，那如何才能解決跨域的問題呢？沒錯，我們現在可以進入正題，來了解下什麼是JSONP了。

JSONP是JSON with Padding的略稱。它是一個非官方的協議，它允許在伺服器端整合Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。

實驗json跨域訪問的問題

非跨域情況當前專案為（8080埠，訪問專案內檔案）

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" >

   $.ajax({
       url:"http://localhost:8080/cardbatch/test.json",   
       dataType:"json",
       success:function(data){
           alert(data.message);
       }
  }); 
    
 </script>
 

test.json檔案中的內容：

callback({message:"success"});

跨域情況當前專案為（8080埠，訪問8081埠檔案）

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" >

   $.ajax({
       url:"http://localhost:8081/cardbatch/test.json",   
       dataType:"json",
       success:function(data){
           alert(data.message);
       }
  }); 
    
 </script>
 

解決方式：

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" >
 
   $.ajax({
       url:"http://localhost:8081/cardbatch/test.json",   
       dataType:"jsonp",
       jsonpCallback:"callback",
       success:function(data){
           alert(data.message);
       }
  }); 
  </script>

可以看到解決了json跨域問題。

修改一下看看

test.json修改為：

say({message:"sayhi"});

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" >
 
   $.ajax({
       url:"http://localhost:8081/cardbatch/test.json",   
       dataType:"jsonp",
       jsonpCallback:"say",
       success:function(data){
           alert(data.message);
       }
  }); 
  </script>