ASP.NET MVC 实现 AJAX 跨域请求

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

和大家分享下Ajax 跨域的经验，之前也找了好多资料，但是都不行，后来看到个可行的修改了并测试下 果然OK了 希望对大家有所帮助！

通常发送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 方式提交的。

代码：

1.创建JsonpController

public class JsonpController : Controller
{
// GET: /Jsonp/
VoteUserRepository userrepository = new VoteUserRepository();
[HttpGet]
public JsonpResult GetData(int? page)
{
var list = userrepository.GetModelList().Where(d => d.PhotoWorkInPoll != null).Where(d => d.PhotoWork.FirstOrDefault().State == 1);
var userlist = from c in userrepository.GetPageModelList(list, 8, page ?? 1)
select new { c.VoteUserID, c.UserName };
JsonpResult result = new JsonpResult(userlist);
return result;
}
}

2.创建JsonpResult

public class JsonpResult : JsonResult
{
object data = null;
public JsonpResult()
{
}
public JsonpResult(object data)
{
this.data = data;
}

public override void ExecuteResult(ControllerContext controllerContext)
{
if (controllerContext != null)
{
HttpResponseBase Response = controllerContext.HttpContext.Response;
HttpRequestBase Request = controllerContext.HttpContext.Request;

string callbackfunction = Request["callback"];
if (string.IsNullOrEmpty(callbackfunction))
{
throw new Exception("Callback function name must be provided in the request!");
}
Response.ContentType = "application/x-javascript";
if (data != null)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
Response.Write(string.Format("{0}({1});", callbackfunction, serializer.Serialize(data)));
}
}
}
}

3.其他页面调用数据方法

function TestCallback () {
$.ajax({
type: "get",
async: false,
url: "http://localhost:12111/Jsonp/GetData?page=1&callback=JsonCallback",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback:"JsonCallback",
success: function(json){
for (var i=0;i<7;i++){
alert(json[i].UserName);
}
},
error: function(){
alert('失败');
}
});
}

JavaScriptSerializer 如果报错是缺少引用，using System.Web.Script.Serialization; 但是这个引用是在 system.web.Extensions 中  记得先引用 Extensions 哦 要不然会报错！！！

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

}

资源跨域：虽说在后台只需一行代码但也有其限制，就是在IE10以下不支持，原因是“Access-Control-Allow-Origin” ：为HTML5的一种标准格式，所以10以下不支持，不介意的可以直接使用，这个我测过的。看过了有用记得加关注哦O(∩_∩)O~