JSONP 的任务道理,JSONP Demo讲解

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

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 办法是未定义的缺点。

2、自定义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吧。

3、 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://exergyanc.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)讲解
最新文章
Java JSON 组件选型之 FastJson 为甚么总有马脚? 472
应用七牛云存储完成图片API,主动删除图片筹划合集 1413
神速ICP立案经历分享,ICP立案居然一天就经过过程了 2397
百度加强推送URL链接,百度SEO强行推送链接JavaScript代码案例讲解。 3067
SOJSON 拓展办事器被DDos进击了一早晨,是若何处理的? 3436
湖南地区立案“新增网站需提交组网筹划或解释解释”,关于立案做简单论述 3511
企查查你是个甚么企业,骗子的帮凶,欺骗的集中营,经过过程企查查骚扰企业德律风赓续,为所欲为的企查查 9868
Java爬取百度云不雅测对网站的检测数据,获得子域名及域名的安然信息 2613
【2020年】百度搜刮词获得,获得百度搜刮的关键词【真实有效】 7547
Nodejs情况装置,Nodejs情况装置一篇就够了 1879
最热文章
苹果电脑Mac怎样恢复出厂体系?苹果体系怎样重装体系? 436424
我为甚么要选择RabbitMQ ,RabbitMQ简介,各类MQ选型比较 419629
收费气象API,全国气象 JSON API接口,可以获得五天的气象预告 352338
最新MyEclipse8.5注册码,有效期到2020年 (曾经更新) 316728
收费气象API,气象JSON API,不限次数获得十五天的气象预告 291271
Elasticsearch教程(四) elasticsearch head 插件装置和应用 223584
Jackson 时间格局化,时间注解 @JsonFormat 用法、时差成绩解释 181509
谈谈斐讯路由器劫持,你用斐讯路由器,你须要知道的任务 137041
Elasticsearch教程(一),全程直播(小白级别) 120486
Elasticsearch教程(五) elasticsearch Mapping的创建 99614

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

入群须要5元为的是没有渣滓告白,假设没有QQ钱包,可以加群主拉进。

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

付出扫码

一切赞助/开支都讲地下通细,用于网站保护:赞助名单检查

检查我的收藏

正在加载... ...