ajax跨Domain安全性問題

利用jQuery做ajax時
發現跨Domain時 會出現ajax error
查了一下才發現原來跨domain會有安全性的問題

AJAX的限制

• 不能存取用戶端的任何檔案。
  ajax.open('GET', 'file://c:\\\\hello.html', ture); //錯誤
• 不能存取不同來源位置的檔案 也就是網域(Domain)要相同
  更多解釋
  

Solution 利用JSONP來代替JSON.

1. .client.html設定
   

   $.ajax({
     url: 'http://192.168.1.228/~kevyu/Testing/test.php',
     dataType: 'jsonp',                //1.將dataType定為jsonp
     jsonp: 'getAjaxData',
     data: {  callback: 'getAjaxData'}, //2.定義callback function
     error: function(xhr) {
       alert('Ajax request 發生錯誤');
     }
   });
   //3.這裡就是callback
   function getAjaxData(data){
      //alert(data);
      //alert(data.name);
   }

   
   新做法
   簡單多了，連callback function都不用設定
   最後加上callback=?，就這麼簡單，連jsonp都不用設
   

   $.ajax('returnJSON.php?callback=?', function(json) {
     //...
   }); 

2. server.php設定
   還需server端配合,呼叫callback的function及回傳的parameter
   
   • 回字串
     

     <?php
       echo $_GET['callback']."('kevyu');"; //依callback的function名回傳kevyu字串
     ?>

   • 回json
     

     <?php
       $data = array("name"=>"kevyu", "gender"=>"male"  );
       $json=json_encode($data ); //編成json格式
       echo $_GET['callback']."({$json});"; //因為是json，所以要加"{ }"
     ?>

References
1.AJAX的安全性問題[筆記]
2.jQuery.ajax() 的 callback
3.Remote JSON - JSONP