日期:2014-05-16  浏览次数:20324 次

extjs的几个技巧,解决ajax请求时用户session超时问题
解决两种情况下的用户访问超时。
a)普通http请求的session超时。
b)异步http请求的session超时,使用ext后大部分的界面刷新都是异步的ajax请求。

不管是那种类型的http请求总是可以由一个过滤器来捕捉。
分类:普通http请求的header参数中没有x-requested-with:XMLHttpRequest头信息,而异步的有。
其实对于常见的ajax框架,header中还有标示自己身份的header信息。

对于普通的http请求,发现session超时后直接重定向到一个超时页面,显示访问超时。
对于异步http请求,发现session超时后则向请求的response中写入特定的超时头信息,客户端ajax对象检测
头信息,发现有超时状态标志后调用显示超时信息的javascript方法,提示用户访问超时。


服务器端session超时后在过滤器中为response添加新的头信息,标记该请求超时:

Js代码
if(r.getHeader("x-requested-with")!=null     
     && r.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")){    
     response.setHeader("sessionstatus","timeout");    
}  

if(r.getHeader("x-requested-with")!=null     && r.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")){    response.setHeader("sessionstatus","timeout");   }

使用Ext.Ajaxt对象完成异步请求的交互,Ext.Ajax是单实例对象(非常重要,全局单一Ext.Ajax实例!)。
注册Ext.Ajax的requestcomplete事件,每个ajax请求成功后首先响应该事件。在该事件的回调函数里面判断
访问请求是否超时。使用Ext.Ajax对象的好处是,只需要引入一个包含了几行超时处理代码的js文件,就可以
为当前应用增加超时处理功能,原有代码不需要做任何修改。


使用Ext.Ajaxt对象完成异步请求交互,假如checkUserSessionStatus是你的回调方法,每个页面引用:

Js代码
Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this);  
function checkUserSessionStatus(conn,response,options){  
    //Ext重新封装了response对象  
    if(typeof response.getResponseHeader.sessionstatus != 'undefined'){  
        //发现请求超时,退出处理代码...  
     }  
}  

Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this); function checkUserSessionStatus(conn,response,options){  //Ext重新封装了response对象  if(typeof response.getResponseHeader.sessionstatus != 'undefined'){   //发现请求超时,退出处理代码...  } }
可以利用的几个特性:
a)所有的ajax请求均带有x-requested-with:XMLHttpRequest头信息
b)Ext.Ajax是单实例对象(非常重要,全局单一Ext.Ajax实例!)
c)注册Ext.Ajax的requestcomplete事件,每个ajax请求成功后首先响应该事件(概念类似spring的aop拦截)。


对于其他的ajax框架,解决用户访问请求超时这个问题的思路是类似的。


在这里推荐一个很实用的Js方法:

Js代码
function getRootWin(){  
    var win = window;  
    while (win != win.parent){  
         win = win.parent;  
     }  
    return win;  
}   

function getRootWin(){  var win = window;  while (win != win.parent){   win = win.parent;  }  return win; }

通过该方法,可以在一个任意深度的iframe中调用父iframe中的方法。具体到这里就是无论哪一个iframe中的用户访

问请求超时,都可以通过该方法调用最外层iframe中的退出方法,这样便为用户提供了一个统一的访问超时退出的UI

呈现。


4)系统异常处理

将实际业务代码中的各种异常封装成IOException, ServletException异常,指定过滤器捕获。其余处理思路同
用户访问超时处理。

更换主题

去ext的官网上下载各种主题皮肤 Themes for Ext 2.0

主题皮肤文件拷贝至本地/js/ext/plugins/theme/css/,/js/ext/plugins/theme/images/ 目录

最好将用户选择的主题配置保存在cookie中,这样用户每次登陆都可以使用相同的界面主题。

Ext主题切换:

Js代码
if($.cookie('ext.theme') != null && $.cookie('ext.theme') != 'default'){  
     Ext.util.CSS.swapStyleSheet("theme","/js/ext/plugins/theme/css/"+$.cookie('ext.theme'));  
}  

if($.cookie('ext.theme') != null && $.cookie('ext.theme') != 'default'){  Ext.util.CSS.swapStyleSheet("theme","/js/ext/plugins/theme/css/"+$.cookie('ext.theme')); }

9)生成Excel文档
最先参考的资料是ex