本文为博主原创，未经允许不得转载：
在应用ajax的过程中，当我们再前台提交请求的时候，如果服务端响应事件比较长，就会导致需要等很长时间在前台才能接受到服务端返回的
响应结果，往往会导致用户重复点击按钮，进行重复请求，如何可以避免这种情况发生，ajax提供了一个beforeSend属性，用这个既可以避免这种
情况发生。
用这个属性可以定义客户端向服务端请求过程中的事件，比如在请求过程中禁用请求按钮的属性，或定义请求加载状态等，
实现的代码如下：
function exportData(){ ???????????$.ajax({ ???????????????type: "post", ???????????????cache: false, ???????????????async: true, ???????????????data: { ???????????????????"name":$("#cameraName").val(), ???????????????????"createTime":$("#createTime").val(), ???????????????????"lastTime":$("#lastTime").val() ???????????????}, ???????????????beforeSend: function () { ???????????????????//此处定义并调用jquery-confirm的加载层事件 ???????????????????obj = jqconfirmTip(‘正在响应请求,请稍候...‘,‘fa fa-spinner fa-spin‘); ???????????????????return true; ???????????????}, ???????????????dataType: ‘json‘, ???????????????url: "exportDetail?rnd=" + Math.random(), ???????????????success: function (a) { ???????????????????if (a.resultCode == "SUCCESS") { ??????????????????????????obj.close(); ?//关闭加载层 ???????????????????} else { ???????????????????????alert("导出失败"); ???????????????????????obj.close(); ???????????????????} ???????????????}, ???????????????error: function (msg) { ???????????????????alert("请求失败"); ???????????????????obj.close(); ???????????????} ???????????}); ???????} ???????//jquery-confirm插件，需要引入jquery-confirm.js ???（该方法可以直接调用） ???function jqconfirmTip(title, icon) { ???var obj = $.confirm({ ???????backgroundDismiss : false, ???????content : false, ???????icon : icon, ???????title : title, ???????// autoClose : ‘confirm|10000‘, ???????animation : ‘scaleY‘, ???????closeIcon : false, ???????columnClass : ‘col-md-4 col-md-offset-4‘,// col-md-6 col-md-offset-3 ???????confirmButton : false, ???????cancelButton : false, ???????theme : ‘black‘ ???}); ???return obj;} ???????????????效果如图：
上述例子中的应用根据服务端返回的结果类型，去关闭该加载层。
同时ajax也提供了请求完成后回调函数 (请求成功或失败之后均调用)的属性，该属性为：complete，可在此处定义回调事件，关闭或停止beforeSend处定义的事件
示例如下：
$.ajax({ ???type: "post", ???contentType: "application/json", ???url: "/userList", ???beforeSend: function () { ???????$("loading").show(); ???}, ???success: function (data) { ???????if (data == "Success") { ???????????// ... ???????} ???}, ???complete: function () { ???????$("loading").hide(); ???}, ???error: function (data) { ?????????$("loading").hide(); ???}});。
ajax用beforeSend自定义请求过程中客户端事件，提高用户体验
原文地址：http://www.cnblogs.com/zjdxr-up/p/7867773.html