extjs的几个技巧,解决ajax请求时用户session超时问题

阅读更多

来自转载：http://chamcon.iteye.com/blog/1671986

解决两种情况下的用户访问超时。
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文档
最先参考的资料是extjs论坛上面的这篇文章：GridPanel directly to Excel.
作者思路不错，就是利用javascript直接读取GridPanel的store数据，然后生成一个描述excel文档的xml数据，最后
再通过一个包含了该xml数据的"data" URL下载该excel。
该方法的好处是通用性比较强，生成的excel文档也不难看，并且是不需要服务器端参与处理的一种纯客户端解决方案。
但是最大的缺点是目前IE7不支持（This needs a browser that supports data URLs. FF, Opera and IE8 will support this.）。
而后发现dojochina网站上的一个用户整理和修改了这个生成excel文档的实现方法。

引用以下的几个问题我都已经整理和修改：
1、没有考虑到含有序号和选择框的grid，
2、utf8转换bug.
3、宽度的bug
4、不支持ie6、ie7和Safari

原文地址：官方Grid导出到Excel修正版 （作者给出的代码有些小问题，需要略微进行些调整）

如果是IE浏览器，客户端将以multipart/form-data方式向服务器端提交该xml数据。
原文给出了后台由php实现时的exportexcel.php代码。


如果后台由java实现，exportexcel.jsp

Java代码
<%@page import="java.util.Date"%>  
<%@page import="org.apache.commons.lang.time.DateFormatUtils"%>  
<%@page import="com.oreilly.servlet.multipart.*"%>  
<%  
     response.setContentType("application/vnd.ms-excel");  
     response.setHeader("Content-disposition","attachment;filename="+  
                        (DateFormatUtils.format(new Date(),"yyyyMMddHHmmss"))+".xls" );   
  
     MultipartParser parse = new MultipartParser(request,1000000000);  
     Part part = null;  
    int maxcount = 0;  
     ParamPart param = null;  
      
    while(true){  
         part = parse.readNextPart();  
        if(part == null || maxcount>1000)  
            break;  
        if(part.isParam() && part.getName().equalsIgnoreCase("exportContent")){  
             param = (ParamPart)part;  
            break;  
         }  
         maxcount++;  
     }  
      
    if(param!=null){  
         response.getWriter().println(param.getStringValue());  
     }else{  
         ;  
     }  
%>  

<%@page import="java.util.Date"%> <%@page import="org.apache.commons.lang.time.DateFormatUtils"%> <%@page import="com.oreilly.servlet.multipart.*"%> <%  response.setContentType("application/vnd.ms-excel");  response.setHeader("Content-disposition","attachment;filename="+                        (DateFormatUtils.format(new Date(),"yyyyMMddHHmmss"))+".xls" );    MultipartParser parse = new MultipartParser(request,1000000000);  Part part = null;  int maxcount = 0;  ParamPart param = null;    while(true){   part = parse.readNextPart();   if(part == null || maxcount>1000)    break;   if(part.isParam() && part.getName().equalsIgnoreCase("exportContent")){    param = (ParamPart)part;    break;   }   maxcount++;  }    if(param!=null){   response.getWriter().println(param.getStringValue());  }else{   ;  } %>

这里使用 com.oreilly.servlet 解析multipart/form-data类型数据。com.oreilly.servlet 很适合文件，表单混合提
交、多文件上传的数据解析。


10）js文件管理

凡是这种基于javascript的富客户端解决方案一大问题就是js文件太多。每个页面不仅要导入Ext的css,js文件，
还要导入每个页面应用需要的一些js文件，这样管理起来很麻烦。
原来的情况，至少要导入：

Html代码
  
  
  
  
  
  
  
  
  
  
  

   

推荐使用 JSLoader 管理众多的js，css文件
1，编写一个js文件统一管理支持所有公用css，js文件的动态导入

Js代码
//添加jquery支持  
JSLoader.loadJavaScript("/js/ext/adapter/jquery/jquery.js");  
JSLoader.loadJavaScript("/js/jquery.cookie.js");  
JSLoader.loadJavaScript("/js/ext/adapter/jquery/ext-jquery-adapter.js");  
//Ext支持  
JSLoader.loadStyleSheet("/js/ext/resources/css/ext-all.css");  
JSLoader.loadJavaScript("/js/ext/ext-base.js");  
JSLoader.loadJavaScript("/js/ext/ext-all.js");  
JSLoader.loadJavaScript("/js/ext/ext-lang-zh_CN.js");  
//加载自定义toolbar图标css样式  
JSLoader.loadStyleSheet("/js/ext/plugins/icon/css/ext-extend.css");  
//加载用户超时,异常处理  
JSLoader.loadJavaScript("/js/extajax.js");  
//主题管理  
JSLoader.loadJavaScript("/js/exttheme.js");  
//Excel导出支持  
JSLoader.loadJavaScript("/js/ext.excel.js");  

//添加jquery支持 JSLoader.loadJavaScript("/js/ext/adapter/jquery/jquery.js"); JSLoader.loadJavaScript("/js/jquery.cookie.js"); JSLoader.loadJavaScript("/js/ext/adapter/jquery/ext-jquery-adapter.js"); //Ext支持 JSLoader.loadStyleSheet("/js/ext/resources/css/ext-all.css"); JSLoader.loadJavaScript("/js/ext/ext-base.js"); JSLoader.loadJavaScript("/js/ext/ext-all.js"); JSLoader.loadJavaScript("/js/ext/ext-lang-zh_CN.js"); //加载自定义toolbar图标css样式 JSLoader.loadStyleSheet("/js/ext/plugins/icon/css/ext-extend.css"); //加载用户超时,异常处理 JSLoader.loadJavaScript("/js/extajax.js"); //主题管理 JSLoader.loadJavaScript("/js/exttheme.js"); //Excel导出支持 JSLoader.loadJavaScript("/js/ext.excel.js");
2，每个页面只需要引入：

Html代码