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>

看控制台输出的内容。