|
ASP.NET MVC 實(shí)現(xiàn)AJAX跨域請(qǐng)求的兩種方法 通常發(fā)送AJAX請(qǐng)求都是在本域內(nèi)完成的，也就是向本域內(nèi)的某個(gè)URL發(fā)送請(qǐng)求，完成部分頁(yè)面的刷新。但有的時(shí)候需要向其它域發(fā)送AJAX請(qǐng)求，完成數(shù)據(jù)的加載，例如Google。 在ASP.NET MVC 框架里實(shí)現(xiàn)跨域的AJAX請(qǐng)求有幾種方式可以實(shí)現(xiàn)，以下就介紹常用的兩種方法。 1. 發(fā)送JSONP請(qǐng)求 客戶端： jQuery對(duì)發(fā)送JSONP請(qǐng)求有很好的支持，客戶端通過(guò). ajax() 函數(shù)發(fā)送請(qǐng)求，其中需要制定 dataType 為“jsonp” jsonpCallback 為指定的回調(diào)函數(shù)名（如 “UpdateDiv”），也就是客戶端需要定義一個(gè)UpdateDiv 函數(shù)，當(dāng)請(qǐng)求成功后會(huì)自動(dòng)調(diào)用該函數(shù)。 服務(wù)器： ASP.NET MVC沒有內(nèi)置對(duì) JSONP 請(qǐng)求的支持，不過(guò)使用 JsonResult 可以很方便的實(shí)現(xiàn)。我們只需要定義一個(gè)類（如 JsonpResult）繼承自JsonResult，并重寫 ExecuteResult()方法，在輸出數(shù)據(jù)時(shí)，調(diào)用客戶端定義的那個(gè)回調(diào)函數(shù)（這個(gè)函數(shù)必須是存在的，并且必須是全局和唯一的）。需要注意的是，在自定義的JsonpResult 里，需要設(shè)置 JsonRequestBehavior 為 AllowGet,否則會(huì)出錯(cuò)，因?yàn)?JSONP 請(qǐng)求必須是 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 請(qǐng)求 jsonpCallback: "UpdateDiv" // 指定回調(diào)函數(shù) }); }) })
</script>
服務(wù)端： public class JSONPResult :JsonResult { public JSONPResult() { JsonRequestBehavior=JsonRequestBehavior.AllowGet; }
public string Callback{get;set;}
///<summary> ///對(duì)操作結(jié)果進(jìn)行處理 ///</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"]; //獲得客戶端提交的回調(diào)函數(shù)名稱
// 返回客戶端定義的回調(diào)函數(shù) httpContext.Response.Write(callBack +"("); httpContext.Response.Write(Data); //Data 是服務(wù)器返回的數(shù)據(jù) httpContext.Response.Write(");"); //將函數(shù)輸出給客戶端，由客戶端執(zhí)行 }
} //操作器和其它操作沒什么區(qū)別，只是返回值是JsopnpResult結(jié)果 public ActionResult Index2() { var str = "{ID :'123', Name : 'asdsa' }"; return new JSONPResult{Data = str }; //返回 jsonp 數(shù)據(jù)，輸出回調(diào)函數(shù) }
2. 跨域資源共享 相比 JSONP 請(qǐng)求，跨域資源共享要簡(jiǎn)單許多，也是實(shí)現(xiàn)跨域 AJAX 請(qǐng)求的首選。 客戶端： 客戶端不在發(fā)送 JSONP 類型的請(qǐng)求，只需要發(fā)送普通的 JSON 請(qǐng)求即可，也不用定義回調(diào)函數(shù)，用 .success 即可。 服務(wù)端： 服務(wù)端也很簡(jiǎn)單，操作結(jié)果還是返回普通的操作結(jié)果就可以，唯一要指定的是 HTTP 報(bào)文頭部的Access-Control-Allow-Origi 指定為 “*” 即可，表示該輸出允許跨域?qū)崿F(xiàn)。 跨域資源共享可以很方便的實(shí)現(xiàn)，不過(guò)在 IE9 還沒有對(duì)該技術(shù)的支持，F(xiàn)ireFox 就已經(jīng)支持了。
代碼： 客戶端： <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); // 調(diào)用本次AJAX請(qǐng)求時(shí)傳遞的options參數(shù) } }); }) }) </script>
服務(wù)端：
///<summary> ///跨站資源共享實(shí)現(xiàn)跨站AJAX請(qǐng)求 ///</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); }
|
|
|
來(lái)自： ThinkTank_引擎 > 《跨域》
