首页 > 代码库 > Jsonp

Jsonp

2024-09-07 15:02:32   208人阅读

JSONP(JSON with Padding)

用来实现跨域请求
由于浏览器同源策略的限制，
XmlHttpRequest只允许请求当前源
所谓同源是指，域名，协议，端口相同
含有 Src 属性的html标签
比如图片src，引入样式src，引入脚本src  
都是本身就自带跨域请求

JSONP原理

在客户端声明JSONP回调函数之后，
客户端向服务器跨域请求数据并指定?callbackxxx=jsonpcallbackxxx，
然后服务端以 jsonpcallback (json) 返回给浏览器执行

JSONP缺点

1    没有关于 JSONP 调用的错误处理
如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。
例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。

2    若被不信任的服务使用时会很危险
因为 JSONP 服务返回打包在函数调用中的 JSON 响应，
而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。

3   只支持GET请求，不支持POST和其他HTTP请求

jsonp示例服务端后台代码

 public string TestJsonp()
 {
     string json = "";
     json += "\"username\":\"用户1\",";
     json += "\"age\":\"100岁\"";
     json = "{" + json + "}";
     string callback = Request["callbackxxx"];
     return callback + "(" + json + ")";
 }

javascript jsonp请求

<script type="text/javascript">
    function jsonpCallBackxxx(res) {
        $("#test").append("<p>" + res.username + "</p>");
        $("#test").append("<p>" + res.age + "</p>");
    }
    //jsonp url?callbackxxx=客户端预要处理此JSONP的回调函数
    var jsonpurl = "http://localhost:901/Home/TestJsonp?callbackxxx=jsonpCallBackxxx";
    //创建script对象并赋值其SRC属性
    var $script = document.createElement("script");
    $script.src = jsonpurl;
    //追加到DOM中，此时即开始调用
    document.getElementsByTagName(‘head‘)[0].appendChild($script);
</script>

技术分享
 

jquery ajax jsonp请求

若指定了DataType为JSONP，那么就不再属于XMLHttpRequest请求了，
而是JSONP协议的请求，因此 error ，beforeSend 等 ajax事件不会得到执行

Ajax

Ajax 的 jsonpCallback参数 注意
1    不指定或指定了不存在的回调函数
会执行success函数

2    指定存在的回调函数
即执行success函数，也执行指定的回调函数

3    指定为?
会导致失效

<script type="text/javascript">
    function jsonCallBackxxx(res) {
        $("#test").append("<p>这是 jsonCallBackxxx</p>");
        $("#test").append("<p>" + res.username + "</p>");
        $("#test").append("<p>" + res.age + "</p>");
    }
    $.ajax({
        url: "http://localhost:901/Home/TestJsonp",
        type: "Get",
        dataType: "jsonp",             //设置ajax数据请求类型为jsonp
        jsonp: "callbackxxx",         //设置服务端读取jsonpCallback的Request.QueryString 参数
        jsonpCallback: "jsonCallBackxxx",        //指定JSONP回调函数
        success: function (res) {
            $("#test").append("<p>这是 ajax  success</p>");
            $("#test").append("<p>" + res.username + "</p>");
            $("#test").append("<p>" + res.age + "</p>");
        }
    }); // ajax

    ////或者
    //$.ajax({
    //    url: "http://localhost:901/Home/TestJsonp?callbackxxx=jsonCallBackxxx",
    //    type: "Get",
    //    dataType: "jsonp",
    //}); // ajax
</script>

技术分享

GET

GET url的 ?callbackxxx=jsonpcallbackxxx注意
1    不指定或指定不存在的回调函数
会导致失效

2   指定存在的jsonpcallback
执行指定的回调函数，不执行success函数

3   指定为?
表示让jquery随机生成函数名
当为?时，此图来自后台的调试
技术分享

<script type="text/javascript">
        function jsonCallBackxxx(res) {
            $("#test").append("<p>" + res.username + "</p>");
            $("#test").append("<p>" + res.age + "</p>");
        }
        var jsonpurl = "http://localhost:901/Home/TestJsonp?callbackxxx=?";
        $.get(
            jsonpurl,
            function (res) {
                jsonCallBackxxx(res);
            },
            "jsonp"); // get

        ////或者
        //var jsonpurl = "http://localhost:901/Home/TestJsonp?callbackxxx=jsonCallBackxxx";
        //$.get(
        //    jsonpurl,
        //    function (res) {
        //        $("#test").append("<p>这种方式，这是 get  success 不会被执行</p>");
        //    },
        //    "jsonp"); // get
    </script>

技术分享
 

GETJSON

GETJSON url的 ?callbackxxx=jsonpcallbackxxx注意
1    不指定或指定不存在的回调函数
会导致失效

2   指定存在的jsonpcallback
会导致失效

3   指定为?
表示让jquery随机生成函数名

<script type="text/javascript">
        function jsonCallBackxxx(res) {
            $("#test").append("<p>" + res.username + "</p>");
            $("#test").append("<p>" + res.age + "</p>");
        }
        var jsonpurl = "http://localhost:901/Home/TestJsonp?callbackxxx=?";
        $.getJSON(
            jsonpurl,
            function (res) {
                jsonCallBackxxx(res);
            }); // getjson
    </script>

技术分享



本文部分参考以下博友文章

http://justcoding.iteye.com/blog/1366102
http://blog.csdn.net/z69183787/article/details/19191385

Jsonp


联系
我们