使用JSONP實現跨域通信

淺談JSONP
服務器君一共花費了173.156 ms進行了6次數據庫查詢,努力地為您提供了這個頁面。
試試閱讀模式?希望聽取您的建議

什么是JSONP

JSONP是一個非官方的協議,它允許在服務器端集成Script tags返回至客戶端,通過javascript callback的形式實現跨域訪問(這僅僅是JSONP簡單的實現形式)。

如何使用JSONP

在客戶端調用提供JSONP支持的URL Service,獲取JSONP格式數據。

比如客戶想訪問http://www.myserver.com/myService.aspx?jsonp=callbackFunction,假設客戶期望返回JSON數據:[“customername1","customername2"],那么直正返回到客戶端的Script Tags: callbackFunction([“customername1","customername2"]),可能的調用方式:

<script type="text/javascript" src="http://www.myserver.com/myService.aspx?jsonp=callbackFunction" />

在客戶端寫callbackFunction函數的實現

<script type="text/javascript">
function onCustomerLoaded(result, methodName)
{
	var html = '<ul>';
	for(var i = 0; i < result.length; i++)
	{
		html += '<li>' + result[i] + '</li>';
	}
	html += '</ul>';
	document.getElementById('divCustomers').innerHTML = html;
}
</script>

頁面展示:

<div id="divCustomers"></div>

最終Page Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Top Customers with Callback</title>
</head>
<body>
    <div id="divCustomers"></div>
    <script type="text/javascript">
        function onCustomerLoaded(result, methodName)
        {
            var html = '<ul>';
            for(var i = 0; i < result.length; i++)
            {
                html += '<li>' + result[i] + '</li>';
            }
            html += '</ul>';
            document.getElementById('divCustomers').innerHTML = html;
        }
    </script>
    <script type="text/javascript" src="http://www.myserver.com/myService.aspx?jsonp=callbackFunction"></script>
    
</body>
</html>

JSONP在JQuery中如何體現的

$.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=?,其中?會自動替換為function(data)函數。

$.ajax:

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

如何在服務器端實現對JSON支持

這僅僅需要把服務的JSON數據轉換成想要的script tags的形式就可以了,格式可以自已定義,畢竟這是個非官方的協議。

注:Callback僅僅是JSONP的簡單實現,可以根據具體需要實現更復雜的功能,比如可以在客戶端動態集成更多的變量數據來完成分頁功能。

本文地址:http://www.zqhthc.tw/librarys/veda/detail/572,歡迎訪問原出處。

不打個分嗎?

轉載隨意,但請帶上本文地址:

http://www.zqhthc.tw/librarys/veda/detail/572

如果你認為這篇文章值得更多人閱讀,歡迎使用下面的分享功能。
小提示:您可以按快捷鍵 Ctrl + D,或點此 加入收藏

大家都在看

閱讀一百本計算機著作吧,少年

很多人覺得自己技術進步很慢,學習效率低,我覺得一個重要原因是看的書少了。多少是多呢?起碼得看3、4、5、6米吧。給個具體的數量,那就100本書吧。很多人知識結構不好而且不系統,因為在特定領域有一個足夠量的知識量+足夠良好的知識結構,系統化以后就足以應對大量未曾遇到過的問題。

奉勸自學者:構建特定領域的知識結構體系的路徑中再也沒有比學習該專業的專業課程更好的了。如果我的知識結構體系足以囊括面試官的大部分甚至吞并他的知識結構體系的話,讀到他言語中的一個詞我們就已經知道他要表達什么,我們可以讓他坐“上位”畢竟他是面試官,但是在知識結構體系以及心理上我們就居高臨下。

所以,閱讀一百本計算機著作吧,少年!

《PHP經典實例(第2版)》 斯克拉(David Sklar) (作者), 切貝特伯格(Adam Tracbtenberg) (作者), 李松峰 (譯者), 秦緒文 (譯者), 李麗 (譯者)

PHP經典實例(第2版)能夠為您節省寶貴的Web開發時間。有了這些針對真實問題的解決方案放在手邊,大多數編程難題都會迎刃而解。《PHP經典實例(第2版)》將PHP的特性與經典實例叢書的獨特形式組合到一起,足以幫您成功地構建跨瀏覽器的Web應用程序。在這個修訂版中,您可以更加方便地找到各種編程問題的解決方案,《PHP經典實例(第2版)》中內容涵蓋了:表單處理;Session管理;數據庫交互;使用Web服務。

更多計算機寶庫...

英超直播吻球网