前端少侠与ng的json故事：jsonp的应用

码在江湖.jpg

话说天下大势，分久必合，合久必分，代码江湖自进入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()最终方案

这里总结一下思路：

使用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解析错误');
        })

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

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

后端返回的数据格式为回调函数名+(+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数据了，但是，要注意的是