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

}

时间: 2024-12-28 05:23:21

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

ASP.NET MVC 实现AJAX跨域请求方法《1》

ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.Net MVC 框架里实现跨域的AJAX请求有几种方式可以实现,以下就介绍常用的两种方法. 1.     发送JSONP请求 客户端: jQuery对发送JSONP请求有很好的支持,客户端通过. ajax() 函数发送请求,其中需要制定 dataType 为"j

ASP.NET MVC 实现 AJAX 跨域请求

ASP.NET MVC 实现AJAX跨域请求的两种方法 和大家分享下Ajax 跨域的经验,之前也找了好多资料,但是都不行,后来看到个可行的修改了并测试下 果然OK了   希望对大家有所帮助! 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框架里实现跨域的AJAX请求有几种方式可以实现,以下就介绍常用的两种方法. 1.     发送JSONP请求

ASP.NET MVC 开启AJAX跨域请求

<httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type" /> <add name="Access-Control-Allow-Me

基于.Net Framework 4.0 Web API开发(5):ASP.NET Web APIs AJAX 跨域请求解决办法(CORS实现)

概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各种APP万花齐放的今天,API的跨域请求是不能避免的. 在默认情况下,为了防止CSRF跨站的伪造攻击(或者是 javascript的同源策略(Same-Origin Policy)),一个网页从另外一个域获取数据时就会收到限制.有一些方法可以突破这个限制,那就是大家熟知的JSONP, 当然这只是

本地主机作服务器解决AJAX跨域请求访问数据的方法

近几天学到ajax,想测试一下ajax样例,由于之前在阿里租用的服务器过期了,于是想着让本地主机既做服务器又做客户端,只是简单地测试,应该还行. 于是,下载了xampp,下载网址http://www.apachefriends.org ,只需要解压傻瓜式地安装就可以. 找到安装软件的目录,点击xampp-control.exe然后启动Apache服务, 打开浏览器,在地址栏输入localhost,出现如下图片,说明安装启动都没问题 现在编写两个简单的文本,一个txt文件,一个html代码: 截图

实现跨域请求的4种方法

模拟服务器端的PHP文件: service: <?php//允许访问header('Access-Control-Allow-Origin:*');@$callback=$_GET['callback'];//创建数据$userInfo = array('id'=>1,'username'=>'Scott Jeremy','email'=>'[email protected]');//编译成JSON$result = json_encode($userInfo);echo $cal

Ajax跨域问题的两种解决方法

浏览器不允许Ajax跨站请求,所以存在Ajax跨域问题,目前主要有两种办法解决. 1.在请求页面上使用Access-Control-Allow-Origin标头. 使用如下标头可以接受全部网站请求: header('Access-Control-Allow-Origin:*') 使用如下标头可以接受指定网站请求: header('Access-Control-Allow-Origin:http://www.abc.com') 所以,服务器写法: header('Access-Control-Al

项目中经常遇到的跨域请求的几种方法

什么是跨域 JSONP proxy代理 cors xdr 关于跨域无非就是jsonp和iframe,随着跨域请求的应用越来越多,W3C提供了跨域请求的标准方案(Cross-Origin Resource Sharing).IE8.Firefox 3.5 及其以后的版本.Chrome浏览器.Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范,实现了跨域请求.在服务器响应客户端的时候,带上Access-Control-Allow-Origin头信息. 如

如何跨域访问的两种方法~

1. JSONP,需要客户端与服务端配合    什么是:填充式JSON--JSON with Padding    何时: 今后跨域,首选jsonp    如何:      基本思想:用其它可以跨域请求的元素,代替ajax     程序中都是用<script>元素代替ajax发送请求     方案一:       1. 服务端: 将要返回的数据,填充进一条字符串格式的js语句中,组成一条正确的可执行的js语句,再返回      2. 客户端: 添加<script src="服务