AvoidRepeatSubmit-通过Javascript避免客户端重复提交请求

Web项目上线后当访问压力增大时，处理速度往往比在测试环境时慢好多倍。当用户点击页面控件提交请求半天没反应时，他就会不停的重复点击该控件，造成请求的重复提交，这个时候很多问题就暴露出来了。上个项目是用Asp.net+C#开发的，为了避免这个重复提交问题，在以前的一个js版本上做了一些完善，虽然技术比较传统，但还是能做为应急之用。

Asp.net客户端提交的路径分为以下几种：

a) 点button提交 -> form的onsubmit事件
b) 点button提交 -> button的WebForm_DoPostBackWithOptions ->form的WebForm_OnSubmit(包含了自定义的submit事件)
c) 点button -> __doPostBack -> 运行form的onsubmit –> submit
d) 点button -> WebForm_DoPostBackWithOptions -> __doPostBack -> 运行form的onsubmit(WebForm_OnSubmit) –> submit

该js的代码如下：

//---------------------------------------------------------
// 作者：野文(Jasson) http://qguohog.cnblogs.com // 日期：2010-12-18
// 功能：避免重复提交数据。若某个按钮控件不需要启用重复提交，
//       则在其上添加属性AvoidRepeatSubmit="false"
//---------------------------------------------------------

$(document).ready(
function() {
var isPosting = false;
var divMask = null;
var divTipContent = null;
var formOnSubEvts = new Object();
var submitByClickCtrl = null;

function _doPostBack() { };

if (typeof (__doPostBack) == "function") {
_doPostBack = __doPostBack;
__doPostBack = _doPostBackNew;
}

function _doPostBackNew(sender, args) {
try {
submitByClickCtrl = $("#" + sender);
}
catch (e) {
try {
submitByClickCtrl = $("#" + sender.replace('$', '_'));
}
catch (ex) {
submitByClickCtrl = null;
}
}
_doPostBack(sender, args);
}

function createLayerMask() {
if (divMask == null) {
divMask = $("<div tabindex='0'></div>");
$(divMask).addClass("arsMask");
$(document.body).append(divMask);
bindEvents(divMask);
}
}

function createTipContent() {
if (divTipContent == null) {
divTipContent = $("<div></div>");
$(divTipContent).addClass("arsTipContent");
$(document.body).append(divTipContent);
bindEvents(divTipContent);
}
}

function bindEvents(divObj) {
$(divObj).blur(function() { this.focus(); });
$(divObj).bind("drag", function() { return false; });
$(divObj).bind("selectstart", function() { return false; });
$(divObj).bind("contextmenu", function() { return false; });
$(divObj).bind("focus", function() { this.blur(); });
}

function setLocation() {
$(divMask).height(document.documentElement.scrollTop + document.documentElement.clientHeight);
$(divMask).width(document.documentElement.scrollLeft + document.documentElement.clientWidth);

$(divTipContent).css("left", document.documentElement.scrollLeft + (document.documentElement.clientWidth - $(divTipContent).width()) / 2);
$(divTipContent).css("top", document.documentElement.scrollTop + (document.documentElement.clientHeight - $(divTipContent).height()) / 2);
}

function showMaskAndTipContent(isShow) {
isPosting = isShow;
createLayerMask();
createTipContent();

if (isShow) {
setProgressInfo();
$(divMask).show();
$(divTipContent).show();
setLocation();
$(window).bind("scroll", setLocation);
$(window).bind("resize", setLocation);
}
else {
$(divMask).hide();
$(divTipContent).hide();
$(window).unbind("scroll", setLocation);
$(window).unbind("resize", setLocation);
}
}

function setProgressInfo(text, width, height) {
if (divTipContent != null) {
proText = text || "处理中，请稍候...";
proWidth = width || 140;
proHeight = height || 40;

$(divTipContent).html(proText);
$(divTipContent).width(proWidth);
$(divTipContent).height(proHeight);
}
}

function useAvoidRepeatSubmit(ctl) {
var avoid = $(ctl).attr("AvoidRepeatSubmit");
return (typeof (avoid) == "undefined" || avoid.toLowerCase() != "false");
}

$("input[type=submit],input[type=image]").click(
function() {
submitByClickCtrl = this;
}
);

$("form").each(
function() {
var eSubmit = this.onsubmit;
if (typeof (this.onsubmit) == "function") {
formOnSubEvts[$(this).attr("name")] = eSubmit;
this.onsubmit = null;
}

this.onsubmit = function(e) {
var evt = e || window.event;

if (isPosting && evt != null) {
return evt.returnValue = !(evt.cancelBubble = true);
}

var eSubmit = formOnSubEvts[$(this).attr("name")];
if (typeof (eSubmit) == "function" && !eSubmit()) {
return false;
}

if (submitByClickCtrl != null) {
if (useAvoidRepeatSubmit(submitByClickCtrl)) {
showMaskAndTipContent(true);
}
}

return true;
}
}
);
}
);

效果如下：





示例Demo代码下载：AvoidRepeatSubmit.