关于jsonp

最新推荐文章于 2024-11-10 15:10:09 发布

aa20201

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量67

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/shenbin/archive/2013/02/20/2919681.html

版权

学习了一个下午的jsonp，记录一下以便以后翻阅。

jsonp原理就是动态插入脚本，就是$.getscript的封装版。

举例后台代码：

private string funone(string para,string callback) 
    {

        return callback+"({\"code\": \"CA1998\",\"price\": 1780,\"tickets\": 5});";

    }

前台代码

$.ajax({
        type: "get",
        async: false,
        url: "http://localhost:2602/webone/controller.aspx?fnName=funone&para=para",
        dataType: "jsonp",
        //jsonp: "callback", //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
        jsonpCallback: "flightHandler", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
        success: function (json) {
            alert(json);
            console.log(json);
        },
        error: function () {
            alert('fail');
        }
    });

1. datatype 要指定为jsonp，那样jquery里面会执行ajax方法会执行生成script的方法。

2. jsonp与jsoncallback，两个参数其实就是组成一个键值附件在url后面以get的方式传递，url+=“&jsonp=jsoncallback”

3. 然后jquery会生成一个全局的flightHandler变量

/*** jquery源码 ***/

// Handle JSONP-style loading
window[jsonp] = window[jsonp] || function (tmp) {

这里的jsonp就是flightHandler

然后会生成script标签，执行代码

最后执行

s.success.call(callbackContext, data, status, xhr);

s.success的作用链改到callbackcontext上，会把参数json复制给window[flightHandler]

然后会删除了window[flightHandler]，见源码

 window[jsonp] = window[jsonp] || function (tmp) {
                    data = tmp;
                    success(); //参数覆盖了jsoncallback
                    complete();
                    // Garbage collect
                    window[jsonp] = undefined;

                    try {
                        delete window[jsonp]; //删除了jsoncallback
                    } catch (e) { }

                    if (head) {
                        head.removeChild(script);
                    }
                };