JSONP 的工作原理,JSONP Demo讲解

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

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在线解析

原文地址:https://www.sojson.com/blog/121.html

转载时必须以链接形式注明原始出处及本声明。

本文主题:

如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。

关于作者
一个低调而闷骚的男人。
相关文章
最新文章
Flink 在又拍云日志批处理中的实践 1530
个推异常值检测和实战应用-又拍云 192
TCP 和 UDP协议详细讲解,优缺点分析讲解 4947
URL中乱七八糟的字符讲解,来源以及如何解决 2767
HTTP/3 来了,您真的了解它么? 4128
当我谈 HTTP 时,我谈些什么? 10308
新浪短链(t.cn)最新申请官方API的方法讲解。 59374
QUIC / HTTP3 协议详细分析讲解 7217
恭喜那个做云存储的七牛云完成 F 轮 10 亿人民币的融资,开启新的云旅程 7933
Autojs怎么安全加密?Autojs在线加密工具注意事项。 30463
最热文章
苹果电脑Mac怎么恢复出厂系统?苹果系统怎么重装系统? 625884
最新MyEclipse8.5注册码,有效期到2020年 (已经更新) 568474
我为什么要选择RabbitMQ ,RabbitMQ简介,各种MQ选型对比 483564
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 461208
Jackson 时间格式化,时间注解 @JsonFormat 用法、时差问题说明 380098
Elasticsearch教程(四) elasticsearch head 插件安装和使用 370601
谈谈斐讯路由器劫持,你用斐讯路由器,你需要知道的事情 192358
Java 信任所有SSL证书,HTTPS请求抛错,忽略证书请求完美解决 191356
Elasticsearch教程(一),全程直播(小白级别) 171571
Jackson 美化输出JSON,优雅的输出JSON数据,格式化输出JSON数据... ... 147450
支付扫码

所有赞助/开支都讲公开明细,用于网站维护:赞助名单查看

查看我的收藏

正在加载... ...