Jquery MVC 解决跨域问题

ASP.NET MVC 实现AJAX跨域请求的两种方法

通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新。但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google。

    在ASP.NET MVC 框架里实现跨域的AJAX请求有几种方式可以实现,以下就介绍常用的两种方法。

1.     发送JSONP请求

客户端:

JQuery对发送JSONP请求有很好的支持,客户端通过. ajax() 函数发送请求,其中需要制定 dataType 为“jsonp”  jsonpCallback 为指定的回调函数名(如  “UpdateDiv),也就是客户端需要定义一个UpdateDiv函数,当请求成功后会自动调用该函数。

服务器:

ASP.NET MVC没有内置对 JSONP 请求的支持,不过使用 JsonResult 可以很方便的实现。我们只需要定义一个类(如 JsonpResult)继承自JsonResult,并重写 ExecuteResult()方法,在输出数据时,调用客户端定义的那个回调函数(这个函数必须是存在的,并且必须是全局和唯一的)。需要注意的是,在自定义的JsonpResult 里,需要设置 JsonRequestBehavior 为 AllowGet,否则会出错,因为 JSONP 请求必须是 Get 方式提交的。

 

代码:

          客户端:

 

<scripttype="text/javascript">


            functionUpdateDiv(result) {

                $("#div1").html(result.ID +result.Name);

            }

 

        $(function() {

            $(".btn").click(function () {          

                $.ajax({

                   type: "GET",

                   url:"http://localhost:50863/Home/Index2",    //跨域url

                   dataType: "jsonp",  //指定 jsonp 请求

                   jsonpCallback: "UpdateDiv" // 指定回调函数

                });

            })

        })

 

</script>

 

服务端:

    public classJSONPResult :JsonResult

    {

        public JSONPResult()

       {

          JsonRequestBehavior=JsonRequestBehavior.AllowGet;

       }

 

        public stringCallback{get;set;}      

 

        ///<summary>

        ///对操作结果进行处理

        ///</summary>

        ///<paramname="context"></param>

        public overridevoid  ExecuteResult(ControllerContext context)

        {

            var httpContext = context.HttpContext;

            var callBack = Callback;


            if(string.IsNullOrWhiteSpace(callBack))

                   callBack = httpContext.Request["callback"]; //获得客户端提交的回调函数名称

           

            // 返回客户端定义的回调函数

            httpContext.Response.Write(callBack +"(");

            httpContext.Response.Write(Data);          //Data是服务器返回的数据        

             httpContext.Response.Write(");");            //将函数输出给客户端,由客户端执行

        }

 

}

          //操作器和其它操作没什么区别,只是返回值是JsopnpResult结果

         public ActionResult Index2()

        {

            var str = "{ID :'123', Name : 'asdsa' }";

            return new JSONPResult{Data =str };  //返回 jsonp 数据,输出回调函数

        }

 

2.    跨域资源共享

相比 JSONP 请求,跨域资源共享要简单许多,也是实现跨域 AJAX 请求的首选。

客户端:

    客户端不在发送 JSONP 类型的请求,只需要发送普通的 JSON 请求即可,也不用定义回调函数,用 .success 即可。

服务端:

     服务端也很简单,操作结果还是返回普通的操作结果就可以,唯一要指定的是 HTTP 报文头部的Access-Control-Allow-Origi

指定为 “*” 即可,表示该输出允许跨域实现。

       跨域资源共享可以很方便的实现,不过在 IE9 还没有对该技术的支持,FireFox 就已经支持了。

 

代码:

客户端:

<scripttype="text/javascript">

        $(function() {

            $(".btn").click(function (){

                $.ajax({

                    type:"GET",

                    url:"http://localhost:50863/Home/Index3"//跨域URL

                    dataType:"json"

                    success:function (result){

                        $("#div1").html(result.ID +result.Name);

                    },

                    error:function (XMLHttpRequest, textStatus,errorThrown) {                       

                        alert(errorThrown); // 调用本次AJAX请求时传递的options参数

                    }

                });

            })

        })

    </script>

 

服务端:

 

        ///<summary>

        ///跨站资源共享实现跨站AJAX请求

        ///</summary>

        ///<returns></returns>

        public ActionResultIndex3()

        {

            var str = new { ID="123",Name="asdsa" };

            HttpContext.Response.AppendHeader("Access-Control-Allow-Origin","*");

            return Json(str, JsonRequestBehavior.AllowGet);

        }

 





在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录。一般情况下我们需要在多系统之间使用多个用户名和密码。这样客户就需要在多个系统之间重复登陆。每次登录都需要输入用户名和密码。最近比较流行的就是OAuth。新浪微博这个开放系统做的就很好。但OAuth并非本文讨论范畴。这里主要讨论jQuery1.5 jsonp 在Asp.net MVC3 中的应用。

    本文应用场景:

        假设您的开发团队欲为某集团公司开发一整套信息管理系统,目前首要开发的就是一套订单系统和一套内部OA系统。前提是这两套系统使用同一套数据库。只是两个不同的MVC3.0 Web项目。也就是说会在同一个IIS上部署两个虚拟目录。  我们的目标是在不使用WCF、WebService 等技术实现跨域登录。也就是说用户用同一个帐号登录了订单系统,那么客户就可以直接登录OA系统。而不需要在OA系统上再输入一次用户名和密码。反之亦成立。

    jQuery1.5 JSONP 使用:

复制代码
  
  
< script type = " text/javascript " > 2 $( function () { 3 var oAUri = " @ViewBag.OAVRUri " ; 4 var user = " @ViewBag.User " ; 5 var pwd = " @ViewBag.PassWord " ; 6 7 $.ajax({ 8 type: " GET " , 9 url: String.format( ' {0}Account/AppLogOn?UserName={1}&PassWord={2}&callback=? ' , oAUri, user, pwd), 10 cache: false , 11 error: function () { 12 alert( " 程序出错,请联系管理员. " ); 13 }, 14 dataType: " jsonp " , 15 jsonp: ' callback ' , 16 success: function (result) { 17 18 } 19 }); 20 21 }); 22 < / script>
复制代码


   在MVC3.0中建立JSONP专用ActionResult

      代码如下:

复制代码
  
  
1 public class JsonpResult < T > : ActionResult 2 { 3 public T Obj { get ; set ; } 4 public string CallbackName { get ; set ; } 5 6 public JsonpResult(T obj, string callback) 7 { 8 this .Obj = obj; 9 this .CallbackName = callback; 10 } 11 12 public override void ExecuteResult(ControllerContext context) 13 { 14 var js = new System.Web.Script.Serialization.JavaScriptSerializer(); 15 var jsonp = this .CallbackName + " ( " + js.Serialize( this .Obj) + " ) " ; 16 17 context.HttpContext.Response.ContentType = " application/json " ; 18 context.HttpContext.Response.Write(jsonp); 19 } 20 }
复制代码

JsonpResult 简单调用如下:

  
  
  public ActionResult AppLogOn( string UserName, string PassWord, string callback) { return new JsonpResult < object > ( new { success = true , rankName = rankName }, callback); }
AppLogOn的action参数完全和上文中的jquery $.ajax 参数一致:
url: String.format('{0}Account/AppLogOn?UserName={1}&PassWord={2}&callback=?', oAUri, user, pwd)

小结:
     Jsonp的服务器端的原理其实就是回调一个js函数名(这里是callback参数)将该参数传给服务端,接着再由服务器端执行这个callback js函数,
同时附上该js函数的参数。比如上文的C#代码:
var jsonp = this.CallbackName + "(" + js.Serialize(this.Obj) + ")";还有一点我们要注意的就是安全隐患问题:
在使用jsonp由于涉及到跨域,需要考虑到对方站点或者对方系统的安全性问题。应当避免安全隐患,不能滥用jsonp。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值