JSONP 的工作原理,JSONP Demo讲解

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

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)讲解
最新文章
iOS版淘宝打开提示“您使用的程序是内测版本,将于2020-03-28到期,到期将无法使用,请尽快下载最新版本” 842
关于一位“caoz的梦呓”的大佬在微信公众号喷我的整体回复 58019
DNS TXT记录添加方法,ICP备案信息屏蔽查询处理方案讲解 2819
SEO优化的最佳时间段即将来临,春节最佳SEO优化讲解 2295
SEO实战分析-排名最近突然掉光了问题排查,几个大站关键词下降SEO问题分析 2289
Java模拟WSS websocket ssl请求,Java WSS模拟请求代码示例 4964
Springboot 集成 Ehcache 代码讲解 5740
阿里云 RDS Specified key was too long; max key length is 767 bytes 解决方案 2196
Springboot HTTP Get/Post 请求讲解,Springboot几行代码完成Http请求 6079
天气免费API接口,天气API接口请求讲解及源码下载 28813
最热文章
我为什么要选择RabbitMQ ,RabbitMQ简介,各种MQ选型对比 369914
苹果电脑Mac怎么恢复出厂系统?苹果系统怎么重装系统? 343236
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 307685
免费天气API,天气JSON API,不限次数获取十五天的天气预报 215662
最新MyEclipse8.5注册码,有效期到2020年 (已经更新) 207316
Elasticsearch教程(四) elasticsearch head 插件安装和使用 181598
Jackson 时间格式化,时间注解 @JsonFormat 用法、时差问题说明 113927
Elasticsearch教程(一),全程直播(小白级别) 101419
谈谈斐讯路由器劫持,你用斐讯路由器,你需要知道的事情 100727
Elasticsearch教程(六) elasticsearch Client创建 90290

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

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

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

支付扫码

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

查看我的收藏

正在加载... ...