jQuery实现Session过期提示

起初项目中session过期的时候需要做一个提示框(并不进行过期跳转到指定页面,在点击确定的时候才会执行跳转),告诉用户session已经过期了,具体实现在本文的最后,一下是common-popup.js,和common-popup.css的代码:

/**
 * This is common popup/dialog/tips plugin of jquery.
 *
 * @author lgscofield
 *
 * 2013-4-15
 */
/**
 * private function, but you also can invoking it.
 *
 * @param {Object} title
 * @param {Object} string
 * @param {Object} args
 * @param {Object} callback
 * @memberOf {TypeName}
 */
function apprise(title, string, args, callback){
    var default_args = {
        'confirm': false, // Ok and Cancel buttons
        'verify': false, // Yes and No buttons
        'input': false, // Text input (can be true or string for default text)
        'textarea': false,// Text Area (can be true or string for default text)
        'animate': false, // Groovy animation (can true or number, default is 400)
        'textOk': 'Ok', // Ok button default text
        'textCancel': 'Cancel', // Cancel button default text
        'textYes': 'Yes', // Yes button default text
        'textNo': 'No' // No button default text
    };
    
    if (args) {
        for (var index in default_args) {
            if (typeof args[index] == "undefined") 
                args[index] = default_args[index];
        }
    }
    
    var aHeight = $(document).height();
    var aWidth = $(document).width();
    $('body').append('<div class="appriseOverlay" id="aOverlay"></div>');
    $('.appriseOverlay').css('height', aHeight).css('width', aWidth).fadeIn(100);
    $('body').append('<div class="appriseOuter"></div>');
    $('.appriseOuter').append('<div class="appriseTitle"></div>');
    $('.appriseTitle').append(title);
    $('.appriseOuter').append('<div class="appriseInner"></div>');
    $('.appriseInner').append(string);
    $('.appriseOuter').css("left", ($(window).width() - $('.appriseOuter').width()) / 2 + $(window).scrollLeft() + "px");
    
    if (args) {
        if (args['animate']) {
            var aniSpeed = args['animate'];
            if (isNaN(aniSpeed)) {
                aniSpeed = 400;
            }
            $('.appriseOuter').css('top', '-200px').show().animate({
                top: "150px"
            }, aniSpeed);
        }
        else {
            $('.appriseOuter').css('top', '150px').fadeIn(200);
        }
    }
    else {
        $('.appriseOuter').css('top', '150px').fadeIn(200);
    }
    
    if (args) {
        if (args['input']) {
            if (typeof(args['input']) == 'string') {
                $('.appriseInner').append('<div class="aInput"><input type="text" class="aTextbox" t="aTextbox" value="' + args['input'] + '" /></div>');
            }
            else {
                $('.appriseInner').append('<div class="aInput"><input type="text" class="aTextbox" t="aTextbox" /></div>');
            }
            $('.aTextbox').focus();
        }
        if (args['textarea']) {
            if (typeof(args['textarea']) == 'string') {
                $('.appriseInner').append('<div class="aTextarea"><textarea type="text" class="aTextArea" t="aTextArea" value="' + args['textarea'] + '" /></div>');
            }
            else {
                $('.appriseInner').append('<div class="aTextarea"><textarea type="text" class="aTextArea" t="aTextArea" /></div>');
            }
            $('.aTextArea').focus();
        }
    }
    
    $('.appriseInner').append('<div class="aButtons"></div>');
    if (args) {
        if (args['confirm'] || args['input']) {
            $('.aButtons').append('<button value="ok">' + args['textOk'] + '</button>');
            $('.aButtons').append('<button value="cancel">' + args['textCancel'] + '</button>');
        }
        else if (args['verify']) {
            $('.aButtons').append('<button value="ok">' + args['textYes'] + '</button>');
            $('.aButtons').append('<button value="cancel">' + args['textNo'] + '</button>');
        }
        else {
            $('.aButtons').append('<button value="ok">' + args['textOk'] + '</button>');
        }
    }
    else {
        $('.aButtons').append('<button value="ok">Ok</button>');
    }
    
    $(document).keydown(function(e){
        if ($('.appriseOverlay').is(':visible')) {
			
            // whitespace forbidden.
            if (!(args['textarea'] || args['input'])) {
            	if (e.keyCode == 13) {
                    $('.aButtons > button[value="ok"]').click();
                }
                if (e.keyCode == 27) {
                    $('.aButtons > button[value="cancel"]').click();
                }
                if (event.keyCode == 32) {
                    event.returnValue = false;
                    return false;
                }
            }
        }
    });
    
    var aText = $('.aTextbox').val();
    if (!aText) {
        aText = false;
    }
    $('.aTextbox').keyup(function(){
        aText = $(this).val();
    });
    
    var areaText = $('.aTextArea').val();
    if (!areaText) {
        areaText = false;
    }
    $('.aTextArea').keyup(function(){
        areaText = $(this).val();
        $('.error').hide();
    });
    
    $('.aButtons > button').click(function(){
    	if (args['textarea'] && !areaText && $(this).attr("value") != 'cancel') {
    		if($('div').hasClass('error')) {
                return;
    		}
    		$('.aButtons').before('<div class="error"></div>');
    		$('.error').append('<p class="perror">Please fill out the content effectively!</p>');
    	}
    	else {
    		$('.appriseOverlay').remove();
	        $('.appriseOuter').remove();
    	}
        if (callback) {
            var wButton = $(this).attr("value");
            if (wButton == 'ok') {
                if (args) {
                    if (args['input']) {
                        callback(aText);
                    }
                    else if (args['textarea']) {
                    	callback(areaText);
                    }
                    else {
                        callback(true);
                    }
                }
                else {
                    callback(true);
                }
            }
            else if (wButton == 'cancel') {
                callback(false);
            }
        }
    });
}

/**
 * Browser key event
 * @param {Object} evt
 */
function prDefault(evt){
    if ($.browser.msie) {
        evt.keyCode = 0;
        evt.returnValue = false;
    }
    else {
        evt.preventDefault();
    }
}

/**
 * This is common popup/dialog/tips plugin of jquery.
 * 
 * @author lgscofield
 * 
 * 2013-4-15
 */
.appriseOverlay { 
	/**position:fixed;
	top:0;
	left:0;
	background:rgba(0, 0, 0, 0.3);
	display:none;
	background: #000;**/
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	/**filter: alpha(opacity=70);
	opacity: 0.7;
	-moz-opacity:0.7;**/
	/**background:rgba(0, 0, 0, 0.3); background:#000\0; filter:alpha(opacity=30);**/
	/*background: #aaaaaa url(css/flick/images/ui-bg_flat_0_aaaaaa_40x100.png)
		50% 50% repeat-x;*/
	background-color: #000;
	filter: Alpha(Opacity = 30) !important /*{opacityFilterOverlay}*/;
	opacity: 0.3 /*{opacityOverlay}*/;
}

.appriseOuter {
	background: #eee;
	border: 1px solid #fff;
	box-shadow: 0px 3px 7px #333;
	-moz-box-shadow: 0px 3px 7px #333;
	-webkit-box-shadow: 0px 3px 7px #333;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-khtml-border-radius: 4px;
	position: absolute;
	z-index: 99999999;
	min-width: 200px;
	min-height: 50px;
	max-width: 75%;
	position: fixed;
	display: none;
}

.appriseTitle {
	height: 20px;
	color: #333;
	font-weight: bolder;
	vertical-align: middle !important;
	text-shadow: 0px 1px 0px #fff;
	border: 1px solid #ddd;
	padding: 5px;
}

.appriseInner {
	padding: 20px;
	color: #333;
	background-color: #fff !important;
	text-shadow: 0px 1px 0px #fff;
}

.appriseInner button {
	border: 1px solid #bbb;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-khtml-border-radius: 3px;
	background: -moz-linear-gradient(100% 100% 90deg, #eee, #d5d5d5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee),
		to(#d5d5d5) );
	background: -webkit-linear-gradient(#eee, #d5d5d5);
	background: -o-linear-gradient(#eee, #d5d5d5);
	color: #232d3d;
	font-size: 12px;
	font-weight: bold;
	padding: 4px 10px;
	margin: 0 3px;
	text-shadow: 0px 1px 0px #fff;
	cursor: pointer;
	box-shadow: 0px 1px 2px #ccc;
	-moz-box-shadow: 0px 1px 2px #ccc;
	-webkit-box-shadow: 0px 1px 2px #ccc;
}

.appriseInner button:hover {
	color: #d85054;
}

.aButtons,.aInput {
	margin: 20px 10px 0px 10px;
	text-align: center;
}

.aTextarea {
	margin: 20px 0px 0px 0px;
	text-align: center;
}

.aTextbox {
	border: 1px solid #aaa;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-khtml-border-radius: 4px;
	box-shadow: 0px 1px 0px #fff;
	-moz-box-shadow: 0px 1px 0px #fff;
	-webkit-box-shadow: 0px 1px 0px #fff;
	width: 180px;
	font-size: 12px;
	font-weight: bold;
	padding: 5px 10px;
}

.aTextArea {
	border: 1px solid #aaa;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-khtml-border-radius: 4px;
	box-shadow: 0px 1px 0px #fff;
	-moz-box-shadow: 0px 1px 0px #fff;
	-webkit-box-shadow: 0px 1px 0px #fff;
	width: 250px;
	max-width: 250px;
	height: 78px;
	max-height: 78px;
	font-size: 12px;
	font-weight: bold;
	padding: 5px 10px;
	font-size: 12px;
}

.error{
	border: 1px solid #D5D5D5;
	/**background-color: #DDDDDD;**/
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-khtml-border-radius: 4px;
	box-shadow: 0px 1px 0px #fff;
	-moz-box-shadow: 0px 1px 0px #fff;
	-webkit-box-shadow: 0px 1px 0px #fff;
	background-color: #eedc94;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
	background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
	background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
	background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
	background-image: -o-linear-gradient(top, #fceec1, #eedc94);
	background-image: linear-gradient(top, #fceec1, #eedc94);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border-color: #eedc94 #eedc94 #e4c652;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	border-width: 1px;
	border-style: solid;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.perror{
	margin: 1px 10px;
}

 最后,在做一系列操作前判断session是否过期,其实就是使用了setTimeout,一下是具体实现:

var $$ = function(func){
	            if (document.addEventListener) {
	                window.addEventListener("load", func, false);
	            }
	            else if (document.attachEvent) {
	                window.attachEvent("onload", func);
	            }
	        };
	        
	        $$(function(){
        		var inactiveTimes = '<%=session.getMaxInactiveInterval()%>';
        		if(inactiveTimes != null && inactiveTimes != '') {
        			expireTime = inactiveTimes * 1000;
        		}
        		else {
        			expireTime = 600 * 1000;
        		}
        		
        		window.setTimeout(sessionTips, expireTime);
        		
        		$("input[type='button'], a").ajaxStart(function () {
        			if(window.console && console.log) {
        				console.log('ajax start', expireTime);
        			}
			    	clearTimeout(sessionTips);
			    });
			  
			    $("input[type='button'], ad").ajaxStop(function () {
			    	if(window.console && console.log) {
			    		console.log('ajax end', expireTime);
			    	}
			    	window.setTimeout(sessionTips, expireTime);
			    }); 
	        });
function sessionTips() {
	        	if(window.console && console.log) {
	        		console.log('session expired.');
	        	}
	        	
	        	$('a, img, input, textarea, #xpMenuCont tr td, button, th').attr('onclick', '').unbind('click').bind('click', function(){
                    popupWin(expireMes);
                    return false;
                });
	        	
	        	$('select').mouseover(function(){
					$(this).find('option').attr('disabled', 'disabled').hide();
				}).click(function(){
					popupWin(expireMes);
					return false;
				});
	        }
/**
	         * popup the dialog/window
	         * @param {Object} sess
	         */
	        function popupWin(sess){
	            apprise('Warm prompt!', sess, {
	                'confirm': true,
	                'textOk': 'Yes',
	                'textCancle': 'No'
	            }, function(to){
	                if (to) {
	                   // parent.location.reload();
	                	window.location.reload();
	                }
	            });
	        }

PS: 上述代码中popupWin(sess)是调用common-popup.js插件中的apprise函数.具体的API会在以后完善之后整理出来.

调用的时候只要在<script>...</script>标记中插入上面那段代码即可,这就是所谓的主动式session过期提示.上面这段代码中使用了ajaxStart和ajaxStop函数,其主要目的是在做ajax操作时重置计时函数而已.简单吧...