JSONP 的工作原理,JSONP Demo讲解

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

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

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

本文主题:

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

相关文章
JSONP工作原理JSONP Demo讲解
Elasticsearch JSONP 请求提示{"error":"JSONP is disabled."}
RBAC 介绍,案例讲解
Freemarker Macro Demo
Maven的Mirror和Repository 的详细讲解
如何把自己的Jar包上传到 maven 官方仓库中,Maven上传图文讲解
JSON格式讲解,JSON获取对象,JSONObject和JSONArray的操作
sojson 特效,本站页面“线条”HTML5实现讲解、特效代码下载
JQuery Ajax四种写法,Ajax请求返回JSON 操作Demo
document.domain解决跨域问题,详细讲解
最新文章
Elasticsearch 好消息, X-Pack的开源:第一阶段完成 4694
文字转语音接口,支持汉字、英语,文字转音频开放接口,还支持翻译播放 1173
Spring JPA查询,JPA 根据方法名字查询详细介绍 5981
Springboot JPA 执行原生sql ,自定义SQL占位符增加参数 13199
Java 随机从 List 随机获取多个不重复对象,Mysql 随机10条数据 2498
Linux 安装 Redis 详细步骤讲解 895
Javascript 生成UUID,Java生成UUID 2626
Maven的Mirror和Repository 的详细讲解 14417
JDK1.7中新增自动释放资源接口AutoCloseable讲解 7611
对Java的常用对象(POJO、DTO、PO、BO、VO、DAO)详细解释及应用场景 10056
最热文章
在windows上安装redis并设置密码,IP绑定【提供安装包】 27611
Maven的Mirror和Repository 的详细讲解 14417
Springboot JPA 执行原生sql ,自定义SQL占位符增加参数 13199
对Java的常用对象(POJO、DTO、PO、BO、VO、DAO)详细解释及应用场景 10056
最新VS2012破解 序列号,vs2012旗舰版密钥序列号【收藏】 9567
Elasticsearch操作数据后马上更新的办法 8481
JDK1.7中新增自动释放资源接口AutoCloseable讲解 7611
Spring JPA查询,JPA 根据方法名字查询详细介绍 5981
Elasticsearch 好消息, X-Pack的开源:第一阶段完成 4694
对Log4j 日志工具类的封装,java LoggerUtils查看和下载 4496

骚码加入我们 / 千人QQ群:259217951

入群需要5元,如果没有QQ钱包,可以先Alipay、微信,赞助然后加群主拉进。

二维码生成 来自 >> 二维码生成器

支付扫码

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

正在加载... ...