浅谈window.onbeforeunload() 事件调用ajax
更新时间：2016年06月29日 09:10:57 投稿：jingxian
下面小编就为大家带来一篇浅谈window.onbeforeunload() 事件调用ajax。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
经常有这样的需求，就是在离开某个web页面时，用户不一定点注销，这样会导致会话不能及时销毁。为实现用户离开页面时，自动注销功能，需要在web页面的onbeforeunload事件处理函数中发送注销命令。这个地方大多用Ajax实现。有时还涉及到跨域访问的问题。这个地方就存在浏览器的兼容性问题。
浏览器在处理这个需求时的不兼容性有如下两点:
1、处理Ajax时的不兼容性，这里使用jQuery来解决。
2、在发送Ajax请求时的不兼容性
主要代码如下:
function logout() {
var logoutURL = "xxxx"; //用于注销用户的url
if (logoutURL == "") return;
var userAgent = navigator.userAgent.toLowerCase();
if(userAgent.indexOf("msie")>-1) { //IE
$.ajax({ url: logoutURL, crossDomain: true, async: false, dataType: "jsonp" });
}else { //FireFox Chrome
$.ajax({ url: logoutURL, async: false });
}
}
window.onbeforeunload = function () {
logout();
};
代码说明：
firefox在处理js时的安全级别较高，很多IE、Chrome中js可以使用的权限在Friefox中被限制，因此通过
if(userAgent.indexOf("msie")>-1) { //IE
}else { //FireFox Chrome
}
这段代码来判断当前浏览器类型。
针对Firefox、Chrome的兼容代码如下：
$.ajax({ url: logoutURL, async: false });
async需要设为false，即为同步，不能采用true异步的方式，否则请求有可能发不出去。其实Chrome也适用于下面针对IE的代码，在关掉浏览器时会自动发送注销命令，但是点浏览器的刷新按钮时也希望能自动注销用户时，Chrome就只能采用上面这行代码才能发出注销请求
针对IE的兼容代码如下:
$.ajax({ url: logoutURL, crossDomain: true, async: false, dataType: "jsonp" });
crossDomain设置为true是为了解决跨域访问问题，如果不存在这个问题，这个属性可以忽略。async属性最好也设成false，true也可以。dataType:"jsonp"这个属性也是为解决跨域访问问题，和crossDomain配合使用，不存在跨域问题，这两个属性可省略。
以上代码在IE9、Chrome27、Firefox21测试通过。
以上就是小编为大家带来的浅谈window.onbeforeunload() 事件调用ajax（标题）全部内容了，希望大家多多支持脚本之家~
相关文章
select标签的外观问题很恼人，各个浏览器都不一致，单单就IE，一个版本就一个长相，还不能用CSS修饰，接下来将本人对select的美化方法共享出来，感兴趣的朋友可以参考下2013-04-04
刚刚弄好了一个jquery动态分页效果，拿出来与大家分享，效果与时光网的差不多2014-09-09
移除掉某些tr（tr是动态添加的）尝试了很多方法，都不见效，后来发现个不错的方法，于是与大家分享下2014-09-09
本文给大家分享的是使用jquery实现的全选删除插件的代码，非常的实用，本文示例是结合的ThinkPHP,小伙伴们可以自由扩展。2015-03-03
这篇文章主要介绍了jQuery实现精美的多级下拉菜单特效，主要依托于jQuery的fg.menu.js插件来实现的，效果非常棒，推荐给大家。2015-03-03
这篇文章主要介绍了jQuery实现HTML5 placeholder效果实例,本文目的主要是在需要兼容一些浏览器时使用,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了JQuery实现超链接鼠标提示效果的方法,涉及jQuery针对鼠标事件及页面元素样式操作的相关技巧,需要的朋友可以参考下2015-06-06
本文主要分享了基于jQuery实现的打字机效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要为大家详细介绍了jquery鼠标悬停导航下划线滑出效果，菜单鼠标悬停出现下划线，向两边扩展的效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章主要为大家详细介绍了jQuery zTree树插件简单使用教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
最新评论