jQuery中利用JSONP解決AJAX跨域問題

標籤：http   java   使用   io   檔案   資料   ar   問題   

寫在前面

跨域的解決方案有多種，其中最常見的是使用同一伺服器下的代理來擷取遠端資料，再通過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）擷取的資料如下：

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

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

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

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

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

以PHP為例，服務端的代碼應該如下：

1. $json = json_encode(array("id" => 123, "name" => "張三", "age" => 17));
2. if(isset($_GET[‘callback‘])){
3. $json = ‘try{‘ . $_GET[‘callback‘] . ‘(‘ . $json . ‘)}catch(e){}‘;
4. }
5. echo $json;

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

1. <script type="text/javascript" src="http://www.a.com/user?id=123?callback=foo"></script>

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

在jQuery中如何通過JSONP來跨域擷取資料

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

1. $.ajax({
2. dataType: ‘jsonp‘,
3. url: ‘http://www.a.com/user?id=123‘,
4. success: function(data){
5. //處理data資料
6. }
7. });

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

1. $.getJSON(‘http://www.a.com/user?id=123&callback=?‘, function(data){
2. //處理data資料
3. });

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

1. //此時也可以在函數外定義foo方法
2. function foo(data){
3. //處理data資料
4. }
5. $.getScript(‘http://www.a.com/user?id=123&callback=foo‘);

JSONP的應用

JSONP在開放API中可以起到非常重要的作用，開放API一般是運用於開發人員的應用上，而這些應用往往是在開發人員的伺服器上而並非在新浪微博的伺服器上，因此跨域請求資料成為前端開發人員們所需要解決的一大問題，廣大開放平台應該實現對JSONP的支援，這一點新浪微博開放平台便做的非常好（雖然某些API裡沒有說明，但實際上是可以使用JSONP方式調用的）。

轉自：http://www.clanfei.com/2012/08/1637.html