[記錄]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)對象
        }

運行效果：

總結：

　　跨域請求數據我們只需實現以上JsonpResult的擴展類型，同時在跨域請求的時候地址的時候加上jsonp=？比不可少的參數，即可實現改功能。