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)里面。具体看源码。

那么大致的实现就完成了！~

还是按照惯例，不放全部源码了，都是签了保密协议的人，公司源码不可乱上传。