JSONP 的工作原理,JSONP Demo讲解

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

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

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

本文主题:

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

关于作者
一个低调而闷骚的男人。
相关文章
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)讲解
最新文章
使用七牛云存储实现图片API,自动删除图片方案合集 961
神速ICP备案经验分享,ICP备案居然一天就通过了 2097
百度加强推送URL链接,百度SEO强行推送链接JavaScript代码案例讲解。 2838
SOJSON 拓展服务器被DDos攻击了一晚上,是如何解决的? 3125
湖南地区备案“新增网站需提交组网方案或解释说明”,关于备案做简单叙述 3216
企查查你是个什么企业,骗子的帮凶,诈骗的集中营,通过企查查骚扰企业电话不断,为所欲为的企查查 9430
Java爬取百度云观测对网站的检测数据,获取子域名及域名的安全信息 2503
【2020年】百度搜索词获取,获取百度搜索的关键词【真实有效】 6767
Nodejs环境安装,Nodejs环境安装一篇就够了 1749
iOS版淘宝打开提示“您使用的程序是内测版本,将于2020-03-28到期,到期将无法使用,请尽快下载最新版本” 2480
最热文章
苹果电脑Mac怎么恢复出厂系统?苹果系统怎么重装系统? 429544
我为什么要选择RabbitMQ ,RabbitMQ简介,各种MQ选型对比 416627
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 349750
最新MyEclipse8.5注册码,有效期到2020年 (已经更新) 307987
免费天气API,天气JSON API,不限次数获取十五天的天气预报 285165
Elasticsearch教程(四) elasticsearch head 插件安装和使用 219850
Jackson 时间格式化,时间注解 @JsonFormat 用法、时差问题说明 174807
谈谈斐讯路由器劫持,你用斐讯路由器,你需要知道的事情 135647
Elasticsearch教程(一),全程直播(小白级别) 118895
Elasticsearch教程(五) elasticsearch Mapping的创建 98595

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

入群需要5元为的是没有垃圾广告,如果没有QQ钱包,可以加群主拉进。

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

支付扫码

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

查看我的收藏

正在加载... ...