现在的位置: 首页 > 综合 > 正文

ASP.NET MVC 实现 AJAX 跨域请求

2013年06月08日 ⁄ 综合 ⁄ 共 3198字 ⁄ 字号 评论关闭

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 方式提交的。

 

代码:

          客户端:

 

<script
type="text/javascript">


           
function
UpdateDiv(result) {

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

            }

 

        $(function() {

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

                $.ajax({

                  
type
: "GET",

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

                  
dataType
: "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(ControllerContextcontext)

        {

           
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
ActionResultIndex2()

        {

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

           
return
new JSONPResult{
Data = str };

        }

 

2.    跨域资源共享

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

客户端:

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

服务端:

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

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

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

 

代码:

客户端:

<script
type="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);

        }

 

抱歉!评论已关闭.