js监测页面关闭发送Ajax请求(浏览器关闭注销用户,清空session)

本文介绍了一种在用户关闭页面时通过发送AJAX请求来即时清除session的方法,旨在解决同一账号多处登录的问题。代码区分了不同浏览器的特性,如IE、Firefox和Chrome,并在页面刷新前执行注销操作。

说明:

需求为页面关闭发送一个ajax请求,使关闭浏览器及时清空session(浏览器关闭session并不会清空)

网站同时只能一个用户登录,同一账号后登录的用户不能把前一个登录的用户踢下线,有一个问题是前一个用户不点击注销,那么只能等到session超时下一个用户才能登录。下面代码主要就是解决这个问题。

但是,下面代码只能监测一个页面的关闭而不能监测整个浏览器的关闭。这个问题目前还没有解决,还望各位大神给出解决方案。

 

 

<script src="static/js/jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
	function logout() {
		var logoutURL = "/logout"; //用于注销用户的url
		if (logoutURL == "")
			return;
		var userAgent = navigator.userAgent.toLowerCase();
		//firefox在处理js时的安全级别较高,很多IE、Chrome中js可以使用的权限在Friefox中被限制
		if (userAgent.indexOf("msie") > -1) { //IE
			$.ajax({
				url : logoutURL,
				crossDomain : true,//crossDomain设置为true是为了解决跨域访问问题
				async : false,
				dataType : "jsonp"//dataType:"jsonp"这个属性也是为解决跨域访问问题,和crossDomain配合使用
			});
		} else { //FireFox Chrome
			$.ajax({
				url : logoutURL,
				async : false
			});
		}
	}
	//页面刷新之前执行
	window.onbeforeunload = function() {
		logout();
	}
	//在onbeforeunload后执行
	/* 	window.onunload = function(){
	 logout();
	 } */
</script>

 

1. 实现用户的登录、注销基础功能,登录失败需要显示错误消息; ​ 2. 用户登录后才可以进行图片上传操作; ​ 3. 上传的文件保存在当前项目目录下,保存时需要使用随机生成的文件名,以防止存在同名文件而被覆盖的情况。 二、功能说明 页面相关 - 登录页面(访问地址:/login) ​ - 账号或密码错误提示(访问地址:/login?msg=账号或密码错误) ​ - 未登录访问需登录页面时(地址:/login?msg=尚未登录) ​ - 登录成功后,点击注销(地址:/logout)退出登录状态并跳转至登录页面(地址:/login?msg=已注销),同时提供文件控件,用于图片选择并自动实现异步上传(地址:/user/avatar) ​ - 图片上传需要重命名文件,随机生成32位文件名,上传成功实时加载图片 访问地址说明 1. GET请求:/login,转发至登录表单页面 ​ 2. POST请求:/login,实现账号、密码验证 ​ 3. GET请求:/logout,注销登录 ​ 4. GET请求:/user/home,转发至用户中心页面 ​ 5. POST请求:/user/avatar,实现上传文件的保存和JSON响应 三、项目结构 - /WEB-INF/classes/cn/edu/lyu/fxfx/base:Database(模拟数据库访问) ​ - /WEB-INF/classes/cn/edu/lyu/fxfx/filter:LoginFilter(登录状态过滤) ​ - /WEB-INF/classes/cn/edu/lyu/fxfx/servlet/:UserAvatarServlet(图片上传处理)、UserHomeServlet(用户中心)、LoginServlet(登录)、LogoutServlet(注销) ​ - /WEB-INF/jsp/user/home.jsp ​ - /WEB-INF/jsp/login.jsp ​ - /css ​ - /js ​ - /upload(将上传的文件保存至此目录,打包提交前将该目录清空) 四、评分要求 浏览器端HTML、CSS、JS编码要求 1. 使用任一开源、免费的前端框架完成相关HTML页面编写。(5分) ​ 2. 登录页面表单、错误信息提示实现。(5分) ​ 3. 用户中心页面使用JS图片异步上传实现。(10分) ​ 4. 用户中心页面使用JSP处理响应JSON结果(5分) 服务器端Java程序编码要求 1. 实现用户登录功能,存在三个可登录用户,如下:(10分) ​ - 账号:manager,密码:123456 ​ - 账号:guest,密码:234567 ​ - 账号:editor,密码:345678 ​ 2. 使用过滤器实现登录验证功能。(15分) ​ 3. 使用异步上传完成图片上传。(20分) ​ 4. 完成上传后实现JSON响应。(10分) ​ 5. 实现用户注销登录功能(10
最新发布
11-09
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值