• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ASP.NETMVC实现AJAX跨域请求

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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~


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ASP.NETMVC过滤器详解发布时间:2022-07-10
下一篇:
ASP.NET中处理HTTP请求的原理(转)发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap