• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ASP.NET中JSONP的两种实现以及其他跨域解决方案的简单实现

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

   jQuery中JSONP的两种实现方式:

   都很简单,所以直接上代码!

   前台代码如下:

<script type="text/javascript">
    $(function () {
        alert("start...");
        
        // 第一种方式
        $.ajax({
            type: "get",
            url: "http://localhost:9524/Home/ProcessCallback", // 这个就是不同于当前域的一个URL地址,这里单纯演示,所以同域
            dataType: "jsonp",
            jsonp: "jsonpcallback",  // 指定回调函数,这里名字可以为其他任意你喜欢的,比如callback,不过必须与下一行的GET参数一致
            data: "name=jxq&[email protected]&jsonpcallback=?", // jsonpcallback与上面的jsonp值一致
            success: function (json) {
                alert(json.Name);
                alert(json.Email);
            }
        });

        // 第二种方式
        $.getJSON("http://localhost:9524/Home/ProcessCallback?name=xiaoqiang&[email protected]&jsonpcallback=?",
            function(json) {
                alert(json.Name);
                alert(json.Email);
            }
        );

        alert("end...");
    });
</script>

   后台Action代码如下:

public string ProcessCallback(string name, string email)
{
   if (Request.QueryString != null)
   {
       string jsonpCallback = Request.QueryString["jsonpcallback"];
       var user = new User
       {
            Name = name,
            Email = email
       };
       
       return jsonpCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";
   }

   return "error";
}

   运行后就可以看到结果了。我追踪了下后台ProcessCallback代码,如下图:

   可以看到jsonCallback的值为"jQuery17104721....",它是前端传给远程服务器后台Action的。这里jQuery171..表示的是jQuery的版本,可以简单地将这个理解为JSONP类型请求回调函数,jQuery在我们每次指定Ajax请求方式为JSONP时都会生成这么一个JSONP回调函数。虽然jQuery会自动帮我们生成一个回调函数,但是我们也可以通过设置jsonpCallback参数为jsonp请求定制一个我们自己的回调函数。

   第一种方式下面这三行代码设定了JSONP请求方式:

dataType: "jsonp",
jsonp: "jsonpcallback",  // 指定回调函数,这里名字可以为其他任意你喜欢的,比如callback,不过必须与下一行的GET参数一致
data: "name=jxq&[email protected]&jsonpcallback=?", // jsonpcallback与上面的jsonp值一致

   第二种方式则直接在GET参数后面带上jsonpcallback=?来标识。

   我们可以推断这么做以后,jQuery内部机制就帮我们绕过了浏览器的跨域访问限制,然后就可以像正常请求同域Action一样请求跨域Action了。

   最后返回的是一个函数表达式:

return jsonCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";

   这样返回给前端的就是类似这种jQuery17104721....('{Name:"jxq", Email:"[email protected]"}'),它一返回到前端就会执行,得到的是一个JavaScript对象,对象有两个属性:Name和Email,所以我们可以直接调用json.Name和json.Email。

   上面return时千万别忘了圆括号,原因不多说,看看下面的例子就明白了:

var response = "{'foo' : 'bar'}";
var json = eval(response);  // Invalid label
var json = eval("(" + response + ")"); // OK

   此外也可以通过动态创建Script、内嵌iframe方式实现跨域。动态创建script的简单代码如下:

$(function() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://otherdomain/script.js";
            
    // 异步加载脚本
    script.onload = script.onreadystatechange = function(){
       if(!script.readyState || script.readyState == 'loaded') {  // 加载完毕
          add(1, 99); // 直接调用跨域js中的函数
       }
    };

    document.getElementsByTagName('head')[0].appendChild(script);
    // add(1, 99); // 这样会出错,因为脚本还没加载完毕
});

// script.js代码如下
function add(a, b) {
  alert("Add: " + a + "+" + b + "=" + (a+b));
}

   当然还可以通过jQuery的getScript方法来跨域请求一个js文件或者包含js代码的文本文件(比如test.js.txt),直接贴代码:

$.getScript("http://otherdomain/test.js", function(){
   alert("Script loaded and executed."); // 脚本加载完毕后会直接执行
});

    这种方式加载完成后,就能和使用同域JS一样使用跨域JS中的函数或变量了。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap