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
伺服器：
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);
}