zoukankan      html  css  js  c++  java
  • ASP.NET MVC 实现AJAX跨域请求的两种方法(转)

    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);

            }

  • 相关阅读:
    webpack 关于跨域的配置
    如何使用css变量
    样式重置
    vue+element_ui上传文件,并传递额外参数(自动上传)
    LeetCode-46-全排列
    LeetCode-39-组合总数
    LeetCode-33-搜索旋转排序数组
    LeetCode-207-课程表
    LeetCode-15-三数之和
    LeetCode-盛最多水的容器
  • 原文地址:https://www.cnblogs.com/zemax/p/5593009.html
Copyright © 2011-2022 走看看