JSONP

定义

JSONP(json with padding)是json的一种”使用模式”，可以让网页从别的域名(网站)获取资料，即跨域读取数据。

优缺点

优点

不想ajax收到同源策略的限制，兼容性好，不需要XMLHttpRequest或ActiveX的支持

缺点

只支持GET请求，不支持POST请求；只支持HTTP请求，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

原理

JSONP就是通过动态添加一个script标签，通过src属性来获取资源。

HTML 中的src属性不是受同源策略的影响。

实际用例

服务器端的(nodejs)：

// 访问地址：http://192.168.0.103:8998/api?callback=query
route.get('/api', (req, res) => {
    var callback = req.query.callback;
    var data = callback + '({\
        "StateCode": "1",\
        "ErrMsg": "",\
        "ServiceKey": "b82d6fa5-b56c-468b-9187-9beb0971bcd0",\
        "RecordCount": 2,\
        "Datas": [\
            {\
            "PETA_RN": 1,\
            "ITEM_ID": 19,\
            "ITEM_NAME": "深圳市裕璟幸福家园标段",\
            "COUNTY_NAME": "四川省巴中市通江县"\
            },\
            {\
            "PETA_RN": 2,\
            "ITEM_ID": 9,\
            "ITEM_NAME": "敏氏标段",\
            "COUNTY_NAME": "四川省巴中市通江县"\
            }\
        ]\
    })';
    res.send(data);
})


// 得到的数据格式为：
query({ "StateCode": "1", "ErrMsg": "", "ServiceKey": "b82d6fa5-b56c-468b-9187-9beb0971bcd0", "RecordCount": 2, "Datas": [ { "PETA_RN": 1, "ITEM_ID": 19, "ITEM_NAME": "深圳市裕璟幸福家园标段", "COUNTY_NAME": "四川省巴中市通江县" }, { "PETA_RN": 2, "ITEM_ID": 9, "ITEM_NAME": "敏氏标段", "COUNTY_NAME": "四川省巴中市通江县" } ] })

客户端(jquery)：

$.ajax({
        type: 'get',
        url: 'http://192.168.0.103:8998/api?callback=query',
        dataType: 'jsonp',
        jsonpCallback: 'query',
        success: function (data) {
            console.log(data);
        },
        error: function (xOptions, textStatus) {
            console.log(xOptions);
            console.log(textStatus);
        }
    });

jQuery会做这样一个操作，在window对象下创建一个名叫query的函数：

window['query'] = function (json) {
    console.log(json);
}
// 输出的结果为：
{ "StateCode": "1", "ErrMsg": "", "ServiceKey": "b82d6fa5-b56c-468b-9187-9beb0971bcd0", "RecordCount": 2, "Datas": [ { "PETA_RN": 1, "ITEM_ID": 19, "ITEM_NAME": "深圳市裕璟幸福家园标段", "COUNTY_NAME": "四川省巴中市通江县" }, { "PETA_RN": 2, "ITEM_ID": 9, "ITEM_NAME": "敏氏标段", "COUNTY_NAME": "四川省巴中市通江县" } ] }

callback和success的区别

success

type: Function (Anything data, String textStatus, jqXHR jqXHR)，

如果请求成功，则调用这个函数。这个函数会得到三个参数：

    1、从服务器端返回的数据
    2、描述状态的字符串
    3、一个jqXHR(jQuery 1.4.x以上的版本，XMLHttpRequest)对象

callback

type: String or Function()

请求JSONP的指定回调函数。最好让jQuery生成一个唯一的名称，便于管理请求，并提供回调和错误处理。在jQuery 1.5中，您可以为该设置使用一个函数，在这种情况下，jsonpCallback的值被设置为该函数的返回值。