JSONP 的工作原理,JSONP Demo讲解
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
转载时必须以链接形式注明原始出处及本声明。
如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。