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

        }

感謝做者

原文地址：http://blog.csdn.net/skyandcode/article/details/12524673