[记录]js跨域调用mvc ActionResult扩展

背景

　　最近2个项目中都用到了js跨域访问的知识，2个项目都需要主站与各个分站之间进行数据交互、状态同步等相关操作。浏览器本身是不允许进行跨域访问，在MVC中我们可以扩展一个方法来实现这个功能。在此大家可以参考这两篇文章：http://www.cnblogs.com/lori/archive/2012/12/14/2817615.html,博问：http://q.cnblogs.com/q/53210/。

代码实现

首先我们来写一个JsonpResult来扩展mvc本身自带的JsonResult,代码：

/// <summary>
    /// 返回jsonp上下文
    /// </summary>
    public class JsonpResult : JsonResult
    {
        const string CALLBACKNAME = "jsonp";
        /// <summary>
        /// 复写渲染视图方法
        /// </summary>
        /// <param name="context"></param>
        public override void ExecuteResult(ControllerContext context)
        {
            if (context == null)
            {
                throw new ArgumentNullException("当前请求上下文出错");
            }
            if ((JsonRequestBehavior == JsonRequestBehavior.DenyGet)
                && String.Equals(context.HttpContext.Request.HttpMethod, "GET"))
            {
                throw new InvalidOperationException("Jsonp只能是ＧＥＴ请求");
            }
            var response = context.HttpContext.Response;
            if (!String.IsNullOrEmpty(ContentType))
            {
                response.ContentType = ContentType;
            }
            else
            {
                response.ContentType = "application/json";
            }
            if (ContentEncoding != null)
            {
                response.ContentEncoding = this.ContentEncoding;
            }
            if (Data != null)
            {
                String buffer;
                var request = context.HttpContext.Request;
                var serializer = new JavaScriptSerializer();
                if (request[CALLBACKNAME] != null)
                    buffer = String.Format("{0}({1})", request[CALLBACKNAME], serializer.Serialize(Data));
                else
                    buffer = serializer.Serialize(Data);
                response.Write(buffer);
            }
        }
    }

扩展完成以后我在mvc项目中编写了一个返回JsonpResult类型的action：

public JsonpResult Jsonp()
        {
            JsonpResult result = new JsonpResult()
            {
                 Data = new { success =true, message ="调用成功"},
                 JsonRequestBehavior = JsonRequestBehavior.AllowGet
             };
             return result;//反回一个jsonp(msg)对象
        }

完成以后，新建一个mvc项目，通过js进行跨域访问，访问格式为：

<script type="text/javascript">
    $(function () {
        $.getJSON("http://localhost:8000/jsonp/Jsonp?jsonp=?", {}, function (data) {
            alert(data.message);
        });
    })
</script>

程序运行，跨域调用成功：

下面试一下通过跨域传参数，看看是否能接收到：

分站js代码：

<script type="text/javascript">
    $(function () {
        $.getJSON("http://localhost:8000/jsonp/Jsonp?jsonp=?", {name:"northwolf"}, function (data) {
            alert(data.message);
        });
    })
</script>

主站action代码:

public JsonpResult Jsonp(string name)
        {
            JsonpResult result = new JsonpResult()
            {
                 Data = new { success =true, message ="接收到参数name="+name},
                 JsonRequestBehavior = JsonRequestBehavior.AllowGet
             };
             return result;//反回一个jsonp(msg)对象
        }