Jsonp 跨域的原理以及Jquery的解決方案

更新時(shí)間：2010年05月18日 01:05:57 作者：

JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允許請(qǐng)求當(dāng)前源（域名、協(xié)議、端口）的資源。

原理：JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允許請(qǐng)求當(dāng)前源（域名、協(xié)議、端口）的資源。如果要進(jìn)行跨域請(qǐng)求，我們可以通過(guò)使用html的script標(biāo)記來(lái)進(jìn)行跨域請(qǐng)求，并在響應(yīng)中返回要執(zhí)行的script代碼，其中可以直接使用JSON傳遞javascript對(duì)象。這種跨域的通訊方式稱(chēng)為JSONP。
個(gè)人理解：

就是在客戶(hù)端動(dòng)態(tài)注冊(cè)一個(gè)函數(shù)function a(data)，然后將函數(shù)名傳到服務(wù)器，服務(wù)器返回一個(gè)a({/*json*/})到客戶(hù)端運(yùn)行,這樣就調(diào)用客戶(hù)端的function a(data),從而實(shí)現(xiàn)了跨域.

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W//DTD XHTML Transitional//EN" "http://www.worg/TR/xhtmlDTD/xhtmltransitional.dtd"> 
<html xmlns="http://www.worg/xhtml" > 
<head> 
<title>Test Jsonp</title> 
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function jsonpCallback(result) 
{ 
$.each(result.items, function(i,item){ 
$("<img/>").attr("src", item.media.m).appendTo("body"); 
if ( i == 3 ) return false; 
}); 
} 
</script> 
</head> 
<body> 
<script type="text/javascript" src="http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=jsonpCallback"></script> 
</body> 
</html> 

jQuery的解決方案：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W//DTD XHTML Transitional//EN" "http://www.worg/TR/xhtmlDTD/xhtmltransitional.dtd"> 
<html xmlns="http://www.worg/xhtml" > 
<head> 
<title>Test Jsonp</title> 
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data) { 
$.each(data.items, function(i, item) { 
$("<img/>").attr("src", item.media.m).appendTo("body"); 
if (i == 3) return false; 
}); 
}); 
}); 
</script> 
</head> 
<body></body> 
</html> 

jquery 的jsoncallback是動(dòng)態(tài)生成的，真正請(qǐng)求服務(wù)器的地址：http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=jsonp1274058545738

您可能感興趣的文章: