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=queryroute.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的值被设置为该函数的返回值。