zoukankan      html  css  js  c++  java
  • 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 class JSONPResult :JsonResult

        {

            public JSONPResult()

           {

              JsonRequestBehavior=JsonRequestBehavior.AllowGet;

           }

     

            public string Callback{get;set;}      

     

            ///<summary>

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

            ///</summary>

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

            public override void  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 ActionResult Index3()

            {

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

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

                return Json(str, JsonRequestBehavior.AllowGet);

            }

     

  • 相关阅读:
    26 转义符 re模块 方法 random模块 collection模块的Counter方法
    25 正则表达式
    24 from 模块 import 名字
    24 from 模块 import 名字
    24 from 模块 import 名字
    23 析构方法 items系列 hash方法 eq方法
    21 isinstance issubclass 反射 _str_ _new_ _len_ _call_
    20 属性, 类方法, 静态方法. python2与python3的区别.
    python(1)
    python之字符串格式化
  • 原文地址:https://www.cnblogs.com/a14907/p/5080335.html
Copyright © 2011-2022 走看看