Jsonp 跨域的原理以及Jquery的解決方案
更新時間:2011年06月27日 19:50:10 作者:
JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允許請求當(dāng)前源(域名、協(xié)議、端口)的資源。
如果要進行跨域請求,我們可以通過使用html的script標(biāo)記來進行跨域請求,并在響應(yīng)中返回要執(zhí)行的script代碼,其中可以直接使用JSON傳遞javascript對象。這種跨域的通訊方式稱為JSONP。
個人理解:
就是在客戶端動態(tài)注冊一個函數(shù)function a(data),然后將函數(shù)名傳到服務(wù)器,服務(wù)器返回一個a({/*json*/})到客戶端運行,這樣就調(diào)用客戶端的function a(data),從而實現(xiàn)了跨域.
<!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的解決方案:
<!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是動態(tài)生成的,真正請求服務(wù)器的地址:http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=jsonp1274058545738
個人理解:
就是在客戶端動態(tài)注冊一個函數(shù)function a(data),然后將函數(shù)名傳到服務(wù)器,服務(wù)器返回一個a({/*json*/})到客戶端運行,這樣就調(diào)用客戶端的function a(data),從而實現(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是動態(tài)生成的,真正請求服務(wù)器的地址:http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=jsonp1274058545738
相關(guān)文章
jQuery 學(xué)習(xí)第六課 實現(xiàn)一個Ajax的TreeView
TreeView是asp.net自帶的控件,不過自帶的控件在靈活性上有諸多限制。在jQuery的幫助下,自己實現(xiàn)一個TreeView也不困難。本文是前幾篇文章所講內(nèi)容的一個綜合演練。2010-05-05jQuery簡單實現(xiàn)根據(jù)日期計算星期幾的方法
這篇文章主要介紹了jQuery簡單實現(xiàn)根據(jù)日期計算星期幾的方法,涉及jQuery針對日期時間簡單計算相關(guān)操作技巧,需要的朋友可以參考下2019-01-01jQuery+css實現(xiàn)的藍色水平二級導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery+css實現(xiàn)的藍色水平二級導(dǎo)航菜單效果代碼,通過簡單的jQuery操作鼠標(biāo)事件實現(xiàn)頁面元素樣式的切換功能,非常美觀大方,需要的朋友可以參考下2015-09-09jQuery實現(xiàn)百度圖片移入移出內(nèi)容提示框上下左右移動的效果
這篇文章主要介紹了jQuery實現(xiàn)百度圖片移入移出內(nèi)容提示框上下左右移動的效果,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06