【码在江湖】前端少侠的json故事（下）：jsonp的应用

jsonp的应用

话说天下大势，分久必合，合久必分，代码江湖自进入21世纪以来，前后端分离成为了大势所趋，代码分工更为精细，更为深入，而正所谓码在江湖，身不由己，为了更好的实现需求，程序猿们必须不断学习新的知识，从此踏上了每天给自己挖坑给别人填坑的不归路。

说回正事，上回说到前端少侠dk懂得了一点ng的皮毛功夫就和后端进行数据对接，殊不知get()方法获取json数据失败，究竟是什么原因造成的呢？

跨域访问

当时，我跟樟哥说：樟哥，这次肯定可以的！

然而发送请求的时候就没有数据返回，页面根本没有响应，按下f12，发现network的response报了一条错误，在console里看，返回一条错误信息：

Uncaught SyntaxError: Unexpected token ://谷歌浏览器

SyntaxError: missing ; before statement//火狐浏览器

经查实，这其实是一个跨域访问的错误，什么是跨域访问呢？据一位江湖人士的解答，大概就是这样的：

• 如果在A网站中，我们希望使用Ajax来获得B网站中的特定内容
• 如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题
• Ajax的跨域访问问题是现有的Ajax开发人员比较常遇到的问题
• 一般都会用jsonp方法来解决

于是，我又屁颠屁颠地去找jsonp()了。

寻找ng的jsonp()

网上关于ng的jsonp()说的非常的零散，以至于我把网上关于ng的jsonp()的内容都看了一遍，这一遍便是一整个下午。

网上关于jquery的jsonp倒是挺全的，不过ng的信息就差太远了。

那天下午，我被忽悠把get()换成jsonp()，然后在请求的后面加上一个参数'callback' : 'JSON_CALLBACK'：

$http.jsonp("localhost:8080/dkplus",{
            params:{
                'callback' : 'JSON_CALLBACK',
                'tag' : 0,
                'id' : 1
            }
        })
        .success(function(data, status, header, config) {
            $scope.items = data.data;
        })
        .error(function(data, status, header, config){
            console.log('json解析错误');
        })

一开始倒是挺奏效的，我看到response里面返回了一堆json对象，而且都解析出来了，然而还是不走success()方法，走了error()方法。

后来根据网上零零散散的信息，我得知这个需要后端配合，返回的数据格式必须是回调函数名+(+json+)，当时看到这个就懵了，大哥你要是给个实例该多好，像我这种初次接触jsonp的人不一定看的懂的。

那时候套用了这个方法还是不行，因为总感觉缺点什么，后来再看一遍，他所说的调用回调函数我并没有定义，于是我就在加一个回调函数JSON_CALLBACK()。

历时一个下午，jsonp()跨域访问终于成功了。

ng的jsonp()最终方案

这里总结一下思路：

1. 使用jsonp()解决跨域访问，必须在请求的地址后加上参数'callback' : 'JSON_CALLBACK'：

   $http.jsonp("localhost:8080/dkplus",{
           params:{
               'callback' : 'JSON_CALLBACK',
               'tag' : 0,
               'id' : 1
           }
       })
       .success(function(data, status, header, config) {
           $scope.items = data.data;
       })
       .error(function(data, status, header, config){
           console.log('json解析错误');
       })

2. 在js里定义一个方法JSON_CALLBACK()，用于解析后端返回的数据

   window.JSON_CALLBACK = function(data){
       $scope.items = data.data;
   }

3. 后端返回的数据格式为回调函数名+(+json+)

• 例如json为：

  {
  "code": 0,
  "msg": "返回正常",
  "data": [
      {
          "content": "你好世界",
          "stu_name": "dk",
          "ismyself": 0,
          "all_hole_id": 8,
          "release_time": "2016-11-25 20:09:57",
          "praise_nums": 0
      },
      {
          "content": "hello world！",
          "stu_name": "dk",
          "ismyself": 0,
          "all_hole_id": 9,
          "release_time": "2016-11-25 20:10:03",
          "praise_nums": 0
      }
  }

• 那么后端应该返回这样的数据

  JSON_CALLBACK({
  "code": 0,
  "msg": "返回正常",
  "data": [
      {
          "content": "你好世界",
          "stu_name": "dk",
          "ismyself": 0,
          "all_hole_id": 8,
          "release_time": "2016-11-25 20:09:57",
          "praise_nums": 0
      },
      {
          "content": "hello world！",
          "stu_name": "dk",
          "ismyself": 0,
          "all_hole_id": 9,
          "release_time": "2016-11-25 20:10:03",
          "praise_nums": 0
      }
  })

这样就可以正常接收和解析json数据了，但是，要注意的是

• 这时候仍然是不走success()方法的
• 之所以能接收和解析数据，是因为它走的是我们定义的回调函数JSON_CALLBACK()，所以得到数据后对数据的操作还得在这个方法里定义。

微信公众号dkplus，由前端少侠dk搭建的分享平台，主攻web前端，但也游离于设计，乐于分享他的代码故事、ps技巧和ppt技巧。码在江湖，身不由己，珍爱生命，简约设计，我是前端，也是设计。博客园：http://www.cnblogs.com/dkplus/