Extjs4.1 跨域异步请求实现

Extjs4.1 跨域异步请求实现

此文由来

最近在搞一个站点的消息推送功能，原先一个站点下面基于Comet(ajax长连接)已经完成了功能。上线使用后发现之前的机制和原先网站在一个站点，对网站的性能和后期分布式扩展会带来不小的影响。最终拍拍屁股就打算把消息机制单独剥离出来，单独成站点，当然数据库还是原先的业务帐套。这个剥离第一想到的肯定是跨域Ajax请求了，还好EXTJS4.1，对跨域已经支持。基本原理无非就是Jsonp,通过添加脚步引用块来实现。技术准备妥当，开始动手。园子里面相关的文档也很多，大部分都是基于Ext.data.Store来现实的。比如：别人的东东

对于一些只是简单的请求，其实大可不必这么绕，下文将针对单纯的异步请求进行说明。这里先引出今天的猪脚：Ext.data.JsonP类。他分装了大部分跨域的功能，拿来用就可以。源码就不黏贴了,ext自己找去:JsonP.js

前台实现

先黏贴处代码：

 1 //跨域请求，MsgUrl为其他站点地址
 2 Ext.data.JsonP.request({
 3             url: MsgUrl + '/Home/InitializeComet',
 4             timeout: 300000,
 5             params: { loginId: LoginId },
 6             callbackKey: "jsonPCallback",
 7             success: function(result) {
 8                 if (result.rettype == 'true') {
 9                     me.Comet.privateToken = result.msg;
10                     me.RegisterComet();
11                 } else {
12                     alert(result.msg);
13                 }
14             },
15             failure: function(result) {
16                 alert(result);
17             }
18         });

红色标出部分是跨域请求的要点，类名：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）

按照惯例，先黏代码：

 1         /// <summary>
 2         /// 客户端注册
 3         /// </summary>
 4         /// <returns></returns>
 5         public void InitializeComet(string loginId, string jsonPCallback)
 6         {
 7             CommonAjax commonAjax = null;
 8 
 9             try
10             {
11                 CometManager.Comet.InitializeComet(loginId);
12                 commonAjax=new CommonAjax("true", loginId);
13             }
14             catch (Exception ex)
15             {
16                 commonAjax =new CommonAjax("false", ex.Message);
17             }
18 
19             this.Response.Write(jsonPCallback + "(" + Newtonsoft.Json.JsonConvert.SerializeObject(commonAjax) + ")");
20         }

发现参数了吧，传过来的值还得按照调用JS的形式返还回去，格式比如 jsonPCallback("我要返还值给客户端")

客户端接到请求的串后，其实Ext.data.JsonP为我们进行的中转，直接把我们返会的东西带进了方法：success: function(result)里面。具体看源码。

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

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