Extjs4.1 跨域異步請求實現

Extjs4.1 跨域異步請求實現

此文由來

    最近在搞一個站點的消息推送功能，原先一個站點下面基於Comet(ajax長連接)已經完成了功能。上線使用后發現之前的機制和原先網站在一個站點，對網站的性能和后期分布式擴展會帶來不小的影響。最終拍拍屁股就打算把消息機制單獨剝離出來，單獨成站點，當然數據庫還是原先的業務帳套。這個剝離第一想到的肯定是跨域Ajax請求了，還好EXTJS4.1，對跨域已經支持。基本原理無非就是Jsonp,通過添加腳步引用塊來實現。技術准備妥當，開始動手。園子里面相關的文檔也很多，大部分都是基於Ext.data.Store來現實的。比如：別人的東東

對於一些只是簡單的請求，其實大可不必這么繞，下文將針對單純的異步請求進行說明。這里先引出今天的豬腳：Ext.data.JsonP類。他分裝了大部分跨域的功能，拿來用就可以。源碼就不黏貼了,ext自己找去:JsonP.js

前台實現

    先黏貼處代碼：

//跨域請求，MsgUrl為其他站點地址
Ext.data.JsonP.request({
            url: MsgUrl + '/Home/InitializeComet',
            timeout: 300000,
            params: { loginId: LoginId },
            callbackKey: "jsonPCallback",
            success: function(result) {
                if (result.rettype == 'true') {
                    me.Comet.privateToken = result.msg;
                    me.RegisterComet();
                } else {
                    alert(result.msg);
                }
            },
            failure: function(result) {
                alert(result);
            }
        });

    紅色標出部分是跨域請求的要點，類名：Ext.data.JsonP不用多說，就是類名~！！

    “jsonPCallback”該名稱將作為Jsonp請求的方法名傳遞到服務器端，獲取該請求的URL：

http://10.0.13.64:89/Home/InitializeComet?loginId=0001&jsonPCallback=Ext.data.JsonP.callback1&_dc=1370687739484

可以發現該名稱的意義了吧，當然在后台實現過程也會用到該值，當然取值隨意，前后台統一就好。

后台實現（Asp.net MVC4）

    按照慣例，先黏代碼：

        /// <summary>
        /// 客戶端注冊
        /// </summary>
        /// <returns></returns>
        public void InitializeComet(string loginId, string jsonPCallback)
        {
            CommonAjax commonAjax = null;

            try
            {
                CometManager.Comet.InitializeComet(loginId);
                commonAjax=new CommonAjax("true", loginId);
            }
            catch (Exception ex)
            {
                commonAjax =new CommonAjax("false", ex.Message);
            }

            this.Response.Write(jsonPCallback + "(" + Newtonsoft.Json.JsonConvert.SerializeObject(commonAjax) + ")");
        }

    發現參數了吧，傳過來的值還得按照調用JS的形式返還回去，格式比如 jsonPCallback("我要返還值給客戶端")

    客戶端接到請求的串后，其實Ext.data.JsonP為我們進行的中轉，直接把我們返會的東西帶進了方法：success: function(result)里面。具體看源碼。

 

那么大致的實現就完成了！~

 

還是按照慣例，不放全部源碼了，都是簽了保密協議的人，公司源碼不可亂上傳。