JSONP

JSONP包括IE6在內(nèi)的大多瀏覽器支持的標(biāo)準(zhǔn)跨域數(shù)據(jù)訪問方式。核心思想是利用JS標(biāo)簽里面的跨域特性進(jìn)行跨域數(shù)據(jù)訪問，在JS標(biāo)簽里面存在的是一個(gè)跨域的URL，實(shí)際執(zhí)行的時(shí)候通過這個(gè)URL獲得一段字符串，這段返回的字符串必須是一個(gè)合法的JS調(diào)用，通過EVAL這個(gè)字符串來完成對(duì)獲得的數(shù)據(jù)的處理。

目錄

• 1 JSONP實(shí)現(xiàn)
• 2 服務(wù)器端實(shí)現(xiàn)對(duì)JSON支持
• 3 JSONP在JQuery中的體現(xiàn)
• 4 相關(guān)條目
• 5 參考來源

JSONP實(shí)現(xiàn)

• 大多JS框架都支持一個(gè)包裝后的JSONP實(shí)現(xiàn)。

例如EXTJS：

在URL里面指定跨域的目標(biāo)地址，在PARAMS里面指定傳遞過去的參數(shù)，這些都和AJAX的實(shí)現(xiàn)一樣。

• 不一樣的地方如下：

實(shí)際傳遞的時(shí)候，EXT框架會(huì)自動(dòng)添加一個(gè)叫做callback的參數(shù)，這個(gè)參數(shù)每次調(diào)用都不一樣，不用管他。

在后臺(tái)處理的時(shí)候，獲得這個(gè)callback的參數(shù)，直接把它當(dāng)做一個(gè)js函數(shù)調(diào)用的名字，加上括號(hào)，和你自己希望提供的字符串，組合起來就是一個(gè)合法的js方法調(diào)用，在ext框架里面，這個(gè)方法調(diào)用的是success方法 .

服務(wù)器端實(shí)現(xiàn)對(duì)JSON支持

• 這僅僅需要把服務(wù)的JSON數(shù)據(jù)轉(zhuǎn)換成想要的script tags的形式就可以了，格式可以自已定義，畢竟這是個(gè)非官方的協(xié)議。
• 可參考：Implement JSONP in your Asp.net Application
• 注：Callback僅僅是JSONP的簡(jiǎn)單實(shí)現(xiàn)，可以根據(jù)具體需要實(shí)現(xiàn)更復(fù)雜的功能，比如可以在客戶端動(dòng)態(tài)集成更多的變量數(shù)據(jù)來完成分頁(yè)功能。

JSONP在JQuery中的體現(xiàn)

1. $.getJSON

　　<script>
　　$(document).ready(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("#images");
　　if ( i == 3 ) return false;
　　});
　　});
　　});
　　</script>
　　jsoncallback=?，其中？會(huì)自動(dòng)替換為function(data)函數(shù)。

2. $.ajax

　　$.ajax({
　　dataType: 'jsonp',
　　data: 'id=10',
　　jsonp: 'jsonp_callback',
　　url: 'http://www.yiwuku.com/getdata',
　　success: function () {
　　// do stuff
　　},
　　});

相關(guān)條目

• JSON
• CSRF
• CSS
• DTD
• FORM
• HTML
• HTML5

參考來源

• http://baike.baidu.com/view/2131174.htm