JSONP 的工作原理,JSONP Demo講解

JSON 2016-08-22 16:14:06 25532

JSONP  是一種非正式傳輸協議,該協議的一個要點就是允許用戶傳遞一個callback 或者開始就定義一個回調方法,參數給服務端,然后服務端返回數據時會將這個callback 參數作為函數名來包裹住 JSON  數據,這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。

JSONP  JSON  的區別: JSON  是一種傳輸格式,而 JSONP  呢是一種數據的獲取方式。其實他們沒什么相關性,有的人說帶callback JSON  傳輸就是 JSONP  ,下面我會證明這是錯誤的說法。 JSONP  可以跨域,記住這一點就可以了。下面開始 Demo  演示。

一、簡單JSONP演示

JS  代碼:

<script>
	//jsonp回調方法,一定要寫在jsonp請求前面
	function callback(txt){
		alert(txt);
	}
</script>
<script src ="/demo/testJsonp.shtml" type="text/javascript" ></script>

Java  代碼(后端):

/**
 * jsonp 測試
 * @return
 */
@RequestMapping(value="testJsonp",method=RequestMethod.GET)
@ResponseBody
public String testJsonp(){
	return "callback('test jsonp');";
}

此時,當頁面加載的時候,會alert 一個messag “test jsonp” ,表示成功了,這里注意的一點就是,回調方法要在調用之前,要不然會出現說callback 方法是未定義的錯誤。

二、自定義callback函數

js方法:

<script>
	//jsonp回調方法,一定要寫在jsonp請求前面
	function testjson(txt){
		alert(txt);
	}
</script>
<script src ="/demo/testJsonp.shtml?callback=testjson" type="text/javascript" ></script>

Java代碼(后端)

/**
 * jsonp 測試
 * @return
 */
@RequestMapping(value="testJsonp",method=RequestMethod.GET)
@ResponseBody
public String testJsonp(String callback){
	return callback +"('test jsonp');";
}

很easy吧。

三、 Ajax  JSONP Demo。

JS代碼:

<script>
	function callback_fn(data){
		alert(data + ":2");
	}
	$.ajax({
		type:"get",
		dataType:"jsonp",
		url:"/demo/testJsonp.shtml",
		jsonpCallback:"callback_fn",
		success:function(data){
			alert(data + ":1");
		}
	});
</script>

Java  代碼(后端)

@RequestMapping(value="testJsonp")
@ResponseBody
public String testJsonp(String callback){
	return callback +"('test jsonp');";
}

這時候會調用callback_fn 方法,并且把返回值賦值給data 。這里看不出來跨域,那么我來演示一下跨域的 Demo  。

四、跨域 JSONP  。

其實上面的都支持跨域,但是為了更真實的演示,我找了一個sina的 JSONP  鏈接來演示。

JS代碼

<script>
	function callback_fn(data){
		console.log("callback_fn");
		console.log(data);
	}
	$.ajax({
		type:"get",
		dataType:"jsonp",
		url:"http://sax.sina.com.cn/newimpress?adunitid=PDPS000000047325&rotate_count=36",
		jsonpCallback:"callback_fn",
		success:function(data){
			console.log("success");
			console.log(data);
		}
	});
</script>

看控制臺輸出的內容。

已經OK了,這些 JSONP  Demo  可以自己演練一下。

版權所屬:SO JSON在線解析

原文地址:http://www.267332.tw/blog/121.html

轉載時必須以鏈接形式注明原始出處及本聲明。

本文主題:

如果本文對你有幫助,那么請你贊助我,讓我更有激情的寫下去,幫助更多的人。

關于作者
一個低調而悶騷的男人。
相關文章
最新文章
當我談 HTTP 時,我談些什么? 2280
新浪短鏈(t.cn)最新申請官方API的方法講解。 13965
QUIC / HTTP3 協議詳細分析講解 1996
恭喜那個做云存儲的七牛云完成 F 輪 10 億人民幣的融資,開啟新的云旅程 3013
Autojs怎么安全加密?Autojs在線加密工具注意事項。 5954
Java JSON 組件選型之 FastJson 為什么總有漏洞? 17326
使用七牛云存儲實現圖片API,自動刪除圖片方案合集 3464
神速ICP備案經驗分享,ICP備案居然一天就通過了 4655
百度加強推送URL鏈接,百度SEO強行推送鏈接JavaScript代碼案例講解。 4598
SOJSON 拓展服務器被DDos攻擊了一晚上,是如何解決的? 6162
最熱文章
蘋果電腦Mac怎么恢復出廠系統?蘋果系統怎么重裝系統? 490605
我為什么要選擇RabbitMQ ,RabbitMQ簡介,各種MQ選型對比 441958
最新MyEclipse8.5注冊碼,有效期到2020年 (已經更新) 390823
免費天氣API,全國天氣 JSON API接口,可以獲取五天的天氣預報 380678
Elasticsearch教程(四) elasticsearch head 插件安裝和使用 257333
Jackson 時間格式化,時間注解 @JsonFormat 用法、時差問題說明 227545
談談斐訊路由器劫持,你用斐訊路由器,你需要知道的事情 155825
Elasticsearch教程(一),全程直播(小白級別) 133640
Java 信任所有SSL證書,HTTPS請求拋錯,忽略證書請求完美解決 121435
Elasticsearch教程(五) elasticsearch Mapping的創建 106604
支付掃碼

所有贊助/開支都講公開明細,用于網站維護:贊助名單查看

查看我的收藏

正在加載... ...

广西十一选5开奖结