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

2021-01-30 03:15

阅读：571

标签：call rri hit ajax跨域请求 err 函数 index append 方便

1. 发送JSONP请求

客户端：

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

服务器：

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

代码：

客户端：



 

            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" // 指定回调函数

                });

            })

        })

服务端：

   public class JSONPResult :JsonResult

    {

        public JSONPResult()

       {

          JsonRequestBehavior=JsonRequestBehavior.AllowGet;

       }

 

        public string Callback{get;set;}      

 

        ///

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

        ///

        ///

        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 就已经支持了。

代码：

客户端：



        $(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参数

                    }

                });

            })

        })

    

 

服务端：

 

        ///

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

        ///

        ///

        public ActionResult Index3()

        {

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

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

            return Json(str, JsonRequestBehavior.AllowGet);

        }

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

标签：call rri hit ajax跨域请求 err 函数 index append 方便

原文地址：https://www.cnblogs.com/xiewangfei123/p/13197976.html

上一篇：PHP伪协议

下一篇：C/S模式 B/S模式

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：ASP.NET MVC 实现AJAX跨域请求的两种方法
文章链接：http://soscw.com/index.php/essay/48970.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章