是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback和的区别：是一种传输格式，而呢是一种数据的获取方式。其实他们没什么相关性，有的人说带callback，下面我会证明这是错误的说法。可以跨域，记住这一点就可以了。下面开始演示。

一、简单JSONP演示

代码：

<script> //jsonp回调方法，一定要写在jsonp请求前面 function callback(txt){ alert(txt); } </script> <script src ="/demo/testJsonp.shtml" type="text/javascript" ></script>

代码（后端）：

/** * 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链接来演示。

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了，这些的可以自己演练一下。

版权所属：SO JSON在线解析

原文地址：https://www.sojson.com/blog/121.html

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

本文主题：

json JSONP

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

￥我需要走的更远，点击我 赞助。 如果还有疑问，点击我加群，为你提供最好的解答。