`

jQuery实现Session过期提示

jquerysession过期提示tipssessiontimeout 
阅读更多

起初项目中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操作时重置计时函数而已.简单吧...

分享到：
| 使用Eclipse构建Maven的SpringMVC项目
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquerySession.js

    以下是一个简单的示例，展示如何使用 `jQuery Session` 实现用户登录状态的管理： ```javascript // 用户登录成功 $.session.set('isLoggedIn', true); // 在需要判断登录状态的地方 if ($.session.get('isLogged...

    基于JQuery的用户统一认证系统的设计与实现

    本文将深入探讨基于JQuery实现的用户统一认证系统的设计与实现，这是一项重要的毕业设计课题，旨在提高Web应用的安全性和用户体验。 首先，我们需要理解JQuery的核心概念。JQuery是一个轻量级、高性能的JavaScript...

    session-timeout:在会话即将到期时警告用户。 无依赖

    我构建了这个新版本，以消除对jQuery和jQuery UI的依赖。安装方法1：CDN 通过UNPKG在您的页面上添加脚本。 &lt; script src =" https://unpkg.com/@travishorn/session-timeout " &gt; &lt;/ script &gt;方法2：...

    自己整理的一个导航菜单页面

    当检测到session过期或失效时，通常会提示用户重新登录。在PHP中，可以使用`$_SESSION`数组来存取session值，`session_start()`启动session，`session_destroy()`销毁session。在JavaScript中，通常通过Ajax请求向...

    使用Ajax时处理用户session失效问题的解决方法

    总结来说，处理Ajax请求中的用户session失效问题，需要在后端识别Ajax请求并返回特定的响应头，然后在前端监听并处理这些响应，以便在session过期时提示用户重新登录。通过这种方式，我们可以确保无论用户如何与页面...

    ajax 操作全局监测,用户session失效的解决方法

    文章中提供的代码示例展示了如何在全局范围内重写jQuery的ajax方法，增加对session状态的检查，并在检测到session失效时进行特定的处理。这里使用的jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件...

    JS Ajax请求会话过期处理问题解决方法分析

    如果发现会话过期，可以在响应头中添加一个自定义的标识，如"SessionStatus"，并设置值为"sessionTimeOut"。同时，返回一个特定的状态码，如401，以表明会话已过期。以下是一个Java示例： ```java try { String ...

    java web 实现短信登陆注册

    10. **前端交互**：使用JavaScript或者jQuery可以实现表单验证，如手机号格式检查，以及在用户点击发送验证码后的倒计时功能。 在`TestPhone1`文件中，可能包含了实现上述功能的测试代码，包括Servlet、JSP页面、...

    ajax 6.7.5.1

    在Ajax调用中，可以继续使用Session来保持用户状态，但需要注意的是，异步请求可能导致Session状态丢失，因此需要正确处理Session过期和并发访问的问题。 4. **Caching.aspx** 缓存是提高Web应用程序性能的有效...

    验证码倒计时

    在给定的文件名"jQuery-djs20151222"中，我们可以推断这可能是一个基于jQuery的JavaScript库或脚本，可能包含了实现验证码倒计时功能的一部分代码。jQuery是一个流行的JavaScript库，简化了DOM操作、事件处理以及...

    ajax提交session超时跳转页面使用全局的方法来处理

    然而，当用户在一定时间内没有与服务器交互，Session可能会因为过期而失效，这被称为Session超时。在AJAX（Asynchronous JavaScript and XML）请求中，如果Session超时，通常需要有合适的机制来处理这种情况，以免...

    asp.net验证码 不区分大小写

    在`VerifyCode.aspx`中，我们将用户输入与`Session`中的验证码进行比较，如果匹配则继续处理请求，否则提示用户输入无效。 为了提高用户体验，可以考虑使用AJAX实现无刷新验证。使用jQuery或其他JavaScript库，可以...

    微信扫码登录

    通常，会使用session或者cookie来保持用户的登录状态，直到用户主动登出或session过期。 在提供的`CJWechatLogin-master`压缩包中，可能包含了实现微信扫码登录的示例代码，包括前端展示二维码的HTML和JavaScript...

    UniGUI集合说明

    设置UniGUI的超时时间可以通过调整服务器端的配置来实现，以防止长时间未操作导致的会话过期。 #### 45. UniGUI如何实现登陆页面 实现UniGUI的登陆页面通常包括： - **设计界面**：设计登录表单的UI。 - **验证...

    登录超时给出提示跳到登录页面（ajax、导入、导出）

    本文将详细介绍如何实现登录超时后给出提示并跳转到登录页面，主要涉及Ajax提交、过滤器（Filter）以及数据导入导出等相关技术。 一、登录超时验证过滤器 在Java Web应用中，我们可以使用Servlet的Filter接口来...

    dwz与thinkphp结合项目

    在ThinkPHP中，我们可以设置session过期时间和检查机制。当用户长时间未操作，session自动失效，用户需要重新登录。DWZ则可以通过监听用户的活动，如鼠标移动或键盘按键，定期向服务器发送心跳请求，保持session的...

    ASP.Net.技巧收集.pdf

    - **实现方法**: 设置Cookie的过期时间为过去的时间。 #### 22. 获取错误信息并到指定页面 - **定义**: 捕获错误信息并跳转到错误处理页面。 - **实现方法**: 使用异常处理机制和`Response.Redirect()`方法。 ####...

    图片拖动验证码土豪版

    JavaScript库如jQuery可以帮助我们轻松实现这一功能，而Ajax可以用于异步通信。 5. **用户验证**：当用户拖动元素并提交时，前端会发送一个新的图片位置到服务器。服务器会比较这个位置与原始位置，如果匹配则验证...

    网站验证码例子程序，可以直接使用

    8. **验证逻辑**: 在用户提交表单时，服务器端会检查输入的验证码是否与Session中存储的值匹配，如果不匹配，则提示用户重新输入。 在实际应用中，为了提高验证码的安全性，还可以考虑以下策略： - 使用更复杂的...

    js 弹窗 http://hi.baidu.com/18201670151/home

    在标题“js 弹窗”中提到的“弹窗”，是指利用JavaScript来实现的一种网页提示或者警告功能，它可以是警告信息、确认对话框或者自定义的窗口样式。 在描述中，“js弹窗记录cookie完全突破IE 谷歌 firefox 等主流...

Magicbox
Global site tag (gtag.js) - Google Analytics