【JQuery】页面关闭时使用JQuery进行Ajax请求

目前测试发现，jquery对unload事件支持较好，页面刷新或关闭时，都能触发unload事件。

$(window).bind('unload', function(){
	console.log('unload');//页面刷新、关闭都会触发该事件
});

beforeunload事件，仅在页面刷新时可以触发，在页面关闭时，未触发。

$(window).bind('beforeunload', function(){
	console.log('beforeunload');//页面刷新时触发，页面关闭时未触发
});

window.onbeforeunload也一样，仅在页面刷新时可以触发，在页面关闭时，未触发。

window.onbeforeunload = function(){
	console.log('beforeunload');//页面刷新时触发，页面关闭时未触发
};

暂不清楚具体原因，有知道的大佬，请留言指导。

页面关闭前进行ajax请求

对于chrome浏览器，由于chrome已经不允许在unload的时候发送同步的ajax请求，所以只能采用navigator.sendBeacon(URL, params)；进行请求。该方法各个浏览器都能正常执行。

var isFresh = false;
//页面关闭之前请求接口
$(window).unload(function(e){
	if(!isFresh){
        //参数也可以采用formData或blob形式
		var params = new URLSearchParams({ Id : mId,
			 type : '1' })
		if (!navigator.sendBeacon) return;
		  var URL = 'a/b/c';
		  navigator.sendBeacon(URL, params);
	}
});

//根据变量判断是刷新还是关闭
$(window).bind('beforeunload', function(){
	isFresh = true;
})

若不考虑chrome浏览器，可以发送ajax请求，请求设为async：false即可。

//该方法在firefox浏览器测试有效
$(window).unload(function(e){
	var param = { 
		Id : mId,
		type : '1' 
	}
	if(!isFresh){
		$.ajax({
		 url:"a/b/c",
		 async: false,
		 data : param,
		 type : 'post',
		 dataType : 'json',
		 success : function(data){
			 console.log(data);
		 }
	 });
	}
});

经测试，

页面加载时只执行onload

页面关闭时只执行onunload

页面刷新时先执行onbeforeunload，然后onunload，最后onload

所以用isFresh标志位表示，当前操作是刷新还是关闭。