JSONP解決AJAX跨域程式碼範例

有兩個子網域名稱，a.xx.com和b.xx.com，現在我在a.xx.com一個頁面中發送ajax請求b.xx.com一個控制器中的方法，希望得到返回資料，但是返回狀態302，應該是跨域問題沒有解決。

解決ajax跨域問題的一個辦法是使用jsonp，jquery封裝了ajax方法和getJason方法，工作中也遇到了跨域問題，記錄一下jsonp的用法和樣本。

(function($) {
var url = '/scripts/jquery4u-sites.json?callback=?';
 
$.ajax({
   type: 'GET',
    url: url,
    async: false,
    jsonpCallback: 'jsonCallback',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
       console.dir(json.sites);
    },
    error: function(e) {
       console.log(e.message);
    }
});
 
})(jQuery);

這是jquery的ajax方法，使用jsonp的時候定義參數參考如上代碼。往往請求的url後面要帶一個?callback=?，問號後面可以帶參數，也可以留空。本例不做具體講解，只記錄用法。

 

/* Loading JSON objects using JSONP */
(function($) {
    var url = '/scripts/jquery4u.settings.json';
    $.ajax({
       type: 'GET',
        url: url,
        async: false,
        contentType: "application/json",
        dataType: 'jsonp'
    });
})(jQuery);

本例是直接請求json檔案。

$.getJSON('ajax/test.json', function(data) {
  var items = [];
 
  $.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });
 
  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

本例是使用jquery的getJSON方法請求，getJSON方法自動支援jsonp，是jQuery封裝好的。

<script>
    // 用戶端使用getJSON方法請求另一台機子上的指令碼
    // 瀏覽器會產生一個隨機的callback參數
    $.getJSON("/new/ajax_jsonp.php?callback=?",function(json){
        alert(json.website);
    });
</script>

getJSON跨域請求例子，注意url後面帶?callback=?，否則就是一般的請求json返回資料，不能跨域，帶這個，加不加參數視情況而定，就是jsonp跨域。

至於上文中講的參數後面帶個?callback=?,是這樣的：

從 1.2 版本開始，jQuery 擁有對 JSONP 回調的本地支援。如果指定了 JSONP 回調，就可以載入位於另一個域的 JSON 資料，回調的文法為：url?callback=?。jQuery 自動將 ? 替換為要調用的產生函數名。

你也可以給callback帶參數，如?callback=hello，那麼php（或者其他語言程式）首先要擷取$_GET[‘callback’],輸出地時候是：$_GET[‘callback’]+(json格式資料)，然後在頁面上，有個function hello()方法處理返回的資料。（這裡只是大概描述下過程，一般情況不用加callback參數，直接帶個問號）