使用mvc3实现ajax跨域

浏览数：34 / 时间：2015年06月09日

ajax跨域一般两种方式 1：cors,2：jsonp，

1:cors

jsonp是get形式，承载的信息量有限，所以信息量较大时CORS是不二选择

在请求消息头添头 Access-Control-Allow-Origin ， 值可以为指定域名，也可以为*表示允许所有域名跨域仿问

mvc代码

public ActionResult Jump()
{
    Response.AddHeader("Access-Control-Allow-Origin","*");  //对请求方域名没有要求
    //Response.AddHeader("Access-Control-Allow-Origin","http://www.baidu.com");   只请允许百度对其进行跨域仿问
    return View();           
}

View Code

客户端使用正常的jquery.ajax就可以调用此方法了。

2：jsonp

mvc3代码

实现类

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"]; //获得客户端提交的回调函数名称
            // 返回客户端定义的回调函数
            var js = new System.Web.Script.Serialization.JavaScriptSerializer();
            httpContext.Response.Write(callBack + "(");
            httpContext.Response.Write(js.Serialize(Data));  //Data 是服务器返回的数据
            httpContext.Response.Write(");");            //将函数输出给客户端，由客户端执行
        }
    }

    /// <summary>
    /// jsonp扩展方法
    /// </summary>
    public static class ContollerExtensions
    {
        /// <summary>
        /// 
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="controller"></param>
        /// <param name="data"></param>
        /// <returns></returns>
        public static JsonpResult Jsonp<T>(this Controller controller, T data)
        {
            JsonpResult result = new JsonpResult()
            {
                Data = data,
                JsonRequestBehavior = JsonRequestBehavior.AllowGet
            };
            return result;
        }

        /// <summary>
        /// 
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="controller"></param>
        /// <param name="data"></param>
        /// <param name="callback">更改后的回调函数名</param>
        /// <returns></returns>
        public static JsonpResult Jsonp<T>(this Controller controller, T data,string callback)
        {
            JsonpResult result = new JsonpResult()
            {
                Callback=callback,
                Data = data,
                JsonRequestBehavior = JsonRequestBehavior.AllowGet
            };
            return result;
        }
    }

View Code

控制器

/// <summary>
        /// 
        /// </summary>
        /// <param name="parameters">传入参数</param>
        /// <returns></returns>
        public ActionResult Jump(string parameters)
        {
            //以下返回方式都可以，在客户端接收json格式数据
            return this.Jsonp("");
            return this.Jsonp(new { success = true, message = "" });
            return this.Jsonp<类名>(类对象);
            return this.Jsonp(类对象);
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="parameters"></param>
        /// <param name="updatecallback">更改后的回调函数名</param>
        /// <returns></returns>
        public ActionResult Jump(string parameters, string updatecallback)
        {
            //以下返回方式都可以，在客户端接收json格式数据
            return this.Jsonp("", updatecallback);
            return this.Jsonp(new { success = true, message = "" }, updatecallback);
            return this.Jsonp<类名>(类对象, updatecallback);
            return this.Jsonp(类对象, updatecallback);
        }

View Code

客户端ajax

$.ajax({
            type: "GET",
            url: 请求地址,
            data:请求数据,
            dataType: "jsonp",    //必须注明数据格式是jsonp
            success: function (result) {
                alert(result.message);
            }
        });



$.ajax({
            type: "GET",
           url: 请求地址,
            data:请求数据,
            dataType: "jsonp",    //必须注明数据格式是jsonp
            jsonp: "updatecallback",  //修改回调函数名称           
            success: function (result) {
                alert(result.message);
            }
        }