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~

ASP.NET MVC 实现 AJAX 跨域请求的更多相关文章

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

    ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...

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

    通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框 ...

  3. ASP.NET MVC 开启AJAX跨域请求

    <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Contro ...

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

    概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特 ...

  5. 【转载】ASP.NET MVC设置允许跨域访问

    默认情况下,浏览器端发送Ajax请求一般被禁止跨域访问,如A域名网站访问B域名网站的请求会被终止,在ASP.NET MVC项目中,我们可以配置相应的设置项,允许网站的接口跨域访问,主要需要设置Acce ...

  6. ASP.NET MVC中设置跨域

    ASP.NET MVC中设置跨域 1.什么是跨域请求 js禁止向不是当前域名的网站发起一次ajax请求,即使成功respone了数据,但是你的js仍然会报错.这是JS的同源策略限制,JS控制的并不是我 ...

  7. .Net Ajax跨域请求总结

    导语 之前写过一篇文章Ajax跨域请求COOKIE无法带上的解决办法,这两天正好好好的查了一下相关知识,做来总结一下 一.传统 ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法 ...

  8. js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域

    js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...

  9. jquery ajax跨域请求详解

    本文章来给大家详细jquery中的ajax跨域请求, 在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的jquery.ajax jsonp格式和jque ...

随机推荐

  1. python内置函数-排列组合函数

    product 笛卡尔积 (有放回抽样排列) permutations 排列 (不放回抽样排列) combinations 组合,没有重复 (不放回抽样组合) combinations_with_re ...

  2. 消息框模块-tkinter

    import tkinter.messagebox # 这个是消息框,对话框的关键from tkinter import * error_fp_list = [[973.45, '河北卡卡汽车贸易有限 ...

  3. mysql不能登陆

    前些天还正常运行的mysql,不知怎么就不能登陆了.错误提示为 :ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (1 ...

  4. this.$router 和this.$route 的区别

    1. this.$router: 表示全局路由器对象,项目中通过router路由参数注入路由之后,在任何一个页面都可以通过此方法获取到路由器对象,并调用其push(), go()等方法: 2. thi ...

  5. 1 django

    1.MVC 大部分开发语言中都有MVC框架 MVC框架的核心思想是:解耦 降低各功能模块之间的耦合性,方便变更,更容易重构代码,最大程度上实现代码的重用 m表示model,主要用于对数据库层的封装 v ...

  6. LOJ #6008. 「网络流 24 题」餐巾计划

    #6008. 「网络流 24 题」餐巾计划 题目描述 一个餐厅在相继的 n nn 天里,每天需用的餐巾数不尽相同.假设第 i ii 天需要 ri r_ir​i​​ 块餐巾.餐厅可以购买新的餐巾,每块餐 ...

  7. Java并发之(1):volatile关键字(TIJ21-21.3.3 21.3.4)

    Java并发Java服务器端编程的一项必备技能. ** 1 简介    volatile是java中的一个保留关键字,它在英语中的含义是易变的,不稳定的.volatile像final.static等其 ...

  8. python-day3-内置函数与字符字节之间的转换

    #三元运算 1 if True else 0 >>>1 1 if False else 0 >>>0 #内置函数lambda def f1(a1): return ...

  9. PHP 获取上一个页面的url

    php $_SERVER["HTTP_REFERER"]变量可以获取上一个或前一个页面的URL地址. 比如有一个a.php页面,这个页面上有一个链接指向b.php页面,如果我们在a ...

  10. PostgreSQL 安装完成后的一些配置

    设置数据目录,一般使用环境变量 PGDATA 指向数据目录的根目录.目录的初始化是使用 initdb 来完成的,-D 后面加上自定义目录的路径 initdb -D /tmp/testpostgres2 ...