Jsonp 跨域的原理以及Jquery的解決方案
更新時間：2011年06月27日 19:50:10 作者：
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協(xié)議、端口）的資源。
如果要進行跨域請求，我們可以通過使用html的script標記來進行跨域請求，并在響應中返回要執(zhí)行的script代碼，其中可以直接使用JSON傳遞javascript對象。這種跨域的通訊方式稱為JSONP。
個人理解：
就是在客戶端動態(tài)注冊一個函數(shù)function a(data)，然后將函數(shù)名傳到服務器，服務器返回一個a({/*json*/})到客戶端運行,這樣就調用客戶端的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)生成的，真正請求服務器的地址：http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=jsonp1274058545738
個人理解：
就是在客戶端動態(tài)注冊一個函數(shù)function a(data)，然后將函數(shù)名傳到服務器，服務器返回一個a({/*json*/})到客戶端運行,這樣就調用客戶端的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)生成的，真正請求服務器的地址：http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=jsonp1274058545738
相關文章
這個widget是包含在wijmo 項目中的一個widget。目前此widget已經(jīng)開源基于mit和gpl雙協(xié)議，目前是beta版，可能存在bug。2010-10-10
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)聊天對話框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要為大家詳細介紹了Jquery Easyui表單組件Form的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
jQuery實現(xiàn)的簡單動態(tài)添加、刪除表格功能示例
這篇文章主要介紹了jQuery實現(xiàn)的簡單動態(tài)添加、刪除表格功能,涉及jQuery事件響應及表格元素動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了簡單的jQuery banner圖片輪播實例代碼的相關資料,需要的朋友可以參考下2016-03-03
jquery.boxy彈出框(后隔N秒后自動隱藏/自動跳轉)
對于 Boxy彈出框的使用之前寫過一些文章（查看jquery.boxy基礎），今天主要是在解決一個需要之后，覺得值得把它記錄下來，所以就再寫一篇，主要功能是，在彈出對話框后，隔N秒后自動隱藏，還有就是自動跳轉2013-01-01
這篇文章主要介紹了jQuery的$.extend 淺拷貝與深拷貝的相關資料,需要的朋友可以參考下2017-03-03
jQuery查詢數(shù)據(jù)返回object和字符串影響原因是什么
查詢數(shù)據(jù)返回object和字符串，導致這兩種情況的原因是什么呢？在本文將為大家詳細介紹下，具體祥看代碼2013-08-08
jQuery ajax全局函數(shù)處理session過期后的ajax跳轉問題
這篇文章主要介紹了基于jQuery的全局ajax函數(shù)處理session過期后的ajax操作的相關資料,需要的朋友可以參考下2016-06-06
jQuery插件Validate實現(xiàn)自定義校驗結果樣式
這篇文章主要介紹了jQuery插件Validate實現(xiàn)自定義校驗結果樣式的方法，感興趣的小伙伴們可以參考一下2016-01-01