利用JSONP解決AJAX跨域問題的原理與jQuery解決方案

openkk 13年前發布 | 378K 次閱讀 JSONP jQuery Ajax框架

寫在前面

跨域的解決方案有多種，其中最常見的是使用同一服務器下的代理來獲取遠端數據，再通過ajax進行讀取，而在這期間經過了兩次請求過程，使得獲取數據的效率大大降低，這篇文章藍飛就為大家介紹一下解決跨域問題的一種比較通用的方案——JSONP。

什么是跨域？

簡單的來說，出于安全方面的考慮，頁面中的JavaScript無法訪問其他服務器上的數據，即“同源策略”。而跨域就是通過某些手段來繞過同源策略限制，實現不同服務器之間通信的效果。

具體策略限制情況可看下表：

URL	說明	允許通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允許
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夾	允許
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允許
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同協議	不允許
http://www.a.com/a.js http://127.0.0.100/b.js	域名和域名對應ip	不允許
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允許
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二級域名（同上）	不允許
http://www.a.com/a.js http://www.b.com/b.js	不同域名	不允許

什么是JSONP？

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式，而JSONP（JSON with Padding）則是JSON 的一種“使用模式”，通過這種模式可以實現數據的跨域獲取。

JSONP跨域的原理

在同源策略下，在某個服務器下的頁面是無法獲取到該服務器以外的數據的，但img、iframe、script等標簽是個例外，這些標簽可以通過src屬性請求到其他服務器上的數據。利用script標簽的開放策略，我們可以實現跨域請求數據，當然，也需要服務端的配合。當我們正常地請求一個JSON數據的時候，服務端返回的是一串JSON類型的數據，而我們使用JSONP模式來請求數據的時候，服務端返回的是一段可執行的JavaScript代碼。

舉個例子，假如需要從服務器（http://www.a.com/user?id=123）獲取的數據如下：

   
    {"id": 123, "name" : 張三, "age": 17}

那么，使用JSONP方式請求（http://www.a.com/user?id=123?callback=foo）的數據將會是如下：

   
    foo({"id": 123, "name" : 張三, "age": 17});

當然，如果服務端考慮得更加充分，返回的數據可能如下：

   
    try{foo({"id": 123, "name" : 張三, "age": 17});}catch(e){}

這時候我們只要定義一個foo()函數，并動態地創建一個script標簽，使其的src屬性為http://www.a.com/user?id=123?callback=foo：

便可以使用foo函數來調用返回的數據了。

在jQuery中如何通過JSONP來跨域獲取數據

第一種方法是在ajax函數中設置dataType為'jsonp'：

   
    $.ajax({      
        dataType: 'jsonp',      
        url: 'http://www.a.com/user?id=123',      
        success: function(data){      
                //處理data數據      
        }      
});

第二種方法是利用getJSON來實現，只要在地址中加上callback=?參數即可：

   
    $.getJSON('http://www.a.com/user?id=123&callback=?', function(data){      
        //處理data數據      
});

也可以簡單地使用getScript方法：

   
    //此時也可以在函數外定義foo方法      
function foo(data){      
        //處理data數據      
}      
$.getJSON('http://www.a.com/user?id=123&callback=foo');

JSONP的應用

JSONP在開放API中可以起到非常重要的作用，開放API是運用在開發者自己的應用上，而許多應用往往是在開發者的服務器上而不是在新浪微博的服務器上，因此跨域請求數據成為開發者們所需要解決的一大問題，廣大開放平臺應該實現對JSONP的支持，這一點新浪微博開放平臺便做的非常好（雖然某些API里沒有說明，但實際上是可以使用JSONP方式調用的）。

=======================簽名檔=======================
原文地址（我的博客）：http://www.clanfei.com/2012/08/1637.html
歡迎訪問交流，至于我為什么要多弄一個博客，因為我熱愛前端，熱愛網頁，我更希望有一個更加自由、真正屬于我自己的小站，或許并不是那么有名氣，但至少能夠讓我為了它而加倍努力。。
=======================簽名檔=======================

轉自:http://blog.csdn.net/coolanfei/article/details/7849735

本文由用戶 openkk 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1344558130468.html

JSONP jQuery Ajax框架