JSONP 的工作原理,JSONP Demo講解

soゝso 2016-08-22 16:14:06 23241

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.380127.tw/blog/121.html

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

本文主題:

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

關于作者
一個低調而悶騷的男人。
相關文章
Elasticsearch JSONP 請求提示{"error":"JSONP is disabled."}
jQuery Jsonp 請求,捕獲異常(404,50X)狀態異常
Shiro 權限控制設計、權限控制Demo、基于RBAC3
Springboot HTTP請求,Springboot HTTP 請求 Demo。Get/Post
Maven的Mirror和Repository 的詳細講解
分解質因數 JavaScript 計算方式,及分解質因數講解
Linux 安裝 Redis 詳細步驟講解
json 解析與生成工具類 ,JSON操作講解(附件)
JQuery Ajax四種寫法,Ajax請求返回JSON 操作Demo
JSON.stringify 函數 (JavaScript)講解
最新文章
QUIC / HTTP3 協議詳細分析講解 1269
恭喜那個做云存儲的七牛云完成 F 輪 10 億人民幣的融資,開啟新的云旅程 1896
Autojs怎么安全加密?Autojs在線加密工具注意事項。 2793
Java JSON 組件選型之 FastJson 為什么總有漏洞? 8471
使用七牛云存儲實現圖片API,自動刪除圖片方案合集 2516
神速ICP備案經驗分享,ICP備案居然一天就通過了 3912
百度加強推送URL鏈接,百度SEO強行推送鏈接JavaScript代碼案例講解。 4097
SOJSON 拓展服務器被DDos攻擊了一晚上,是如何解決的? 4868
湖南地區備案“新增網站需提交組網方案或解釋說明”,關于備案做簡單敘述 5207
企查查你是個什么企業,騙子的幫兇,詐騙的集中營,通過企查查騷擾企業電話不斷,為所欲為的企查查 12132
最熱文章
蘋果電腦Mac怎么恢復出廠系統?蘋果系統怎么重裝系統? 466302
我為什么要選擇RabbitMQ ,RabbitMQ簡介,各種MQ選型對比 433508
免費天氣API,全國天氣 JSON API接口,可以獲取五天的天氣預報 364614
最新MyEclipse8.5注冊碼,有效期到2020年 (已經更新) 357980
免費天氣API,天氣JSON API,不限次數獲取十五天的天氣預報 322053
Elasticsearch教程(四) elasticsearch head 插件安裝和使用 239378
Jackson 時間格式化,時間注解 @JsonFormat 用法、時差問題說明 203779
談談斐訊路由器劫持,你用斐訊路由器,你需要知道的事情 147412
Elasticsearch教程(一),全程直播(小白級別) 127696
Java 信任所有SSL證書,HTTPS請求拋錯,忽略證書請求完美解決 105454

騷碼加入我們 / 千人QQ群:259217951

入群需要5元為的是沒有垃圾廣告,如果沒有QQ錢包,可以加群主拉進。

二維碼生成 來自 >> 二維碼生成器。

支付掃碼

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

查看我的收藏

正在加載... ...

时时乐上海走势图连线