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

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

什么是跨域？

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

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

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

JSONP跨域的原理

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

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

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

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

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

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

在jQuery中如何通過JSONP來跨域獲取數(shù)據(jù)

第一種方法是在ajax函數(shù)中設(shè)置dataType為'jsonp'：

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

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

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

JSONP在開放API中可以起到非常重要的作用，開放API一般是運用于開發(fā)者的應(yīng)用上，而這些應(yīng)用往往是在開發(fā)者的服務(wù)器上而并非在新浪微博的服務(wù)器上，因此跨域請求數(shù)據(jù)成為前端開發(fā)者們所需要解決的一大問題，廣大開放平臺應(yīng)該實現(xiàn)對JSONP的支持，這一點新浪微博開放平臺便做的非常好（雖然某些API里沒有說明，但實際上是可以使用JSONP方式調(diào)用的）。