java jsonp格式_JSONP 的工作原理，JSONP Demo讲解

JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

JSONP和JSON的区别：JSON是一种传输格式，而JSONP呢是一种数据的获取方式。其实他们没什么相关性，有的人说带callback的JSON传输就是JSONP，下面我会证明这是错误的说法。JSONP可以跨域，记住这一点就可以了。下面开始Demo演示。

一、简单JSONP演示

JS代码：

//jsonp回调方法，一定要写在jsonp请求前面

function callback(txt){

alert(txt);

}

Java代码(后端)：/**

* jsonp 测试

* @return

*/

@RequestMapping(value="testJsonp",method=RequestMethod.GET)

@ResponseBody

public String testJsonp(){

return "callback('test jsonp');";

}

此时，当页面加载的时候，会alert一个messag “test jsonp”，表示成功了，这里注意的一点就是，回调方法要在调用之前，要不然会出现说callback方法是未定义的错误。

二、自定义callback函数

js方法：

//jsonp回调方法，一定要写在jsonp请求前面

function testjson(txt){

alert(txt);

}

Java代码(后端)/**

* jsonp 测试

* @return

*/

@RequestMapping(value="testJsonp",method=RequestMethod.GET)

@ResponseBody

public String testJsonp(String callback){

return callback +"('test jsonp');";

}

很easy吧。

三、AjaxJSONP Demo。

JS代码：

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");

}

});

Java代码(后端)@RequestMapping(value="testJsonp")

@ResponseBody

public String testJsonp(String callback){

return callback +"('test jsonp');";

}

这时候会调用callback_fn方法，并且把返回值赋值给data。这里看不出来跨域，那么我来演示一下跨域的Demo。

四、跨域JSONP。

其实上面的都支持跨域，但是为了更真实的演示，我找了一个sina的JSONP链接来演示。

JS代码

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);

}

});

看控制台输出的内容。

已经OK了，这些JSONP的Demo可以自己演练一下。

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

￥我需要走的更远，点击我 赞助。

如果还有疑问，点击我加群，为你提供最好的解答。