ajax提交等待服务器响应友好提示信息的实现

众所周知，在客户端向服务器发送AJAX请求时，会有一个等待服务器响应的过程，在网络环境好而且服务器负荷小的时候，业务逻辑不大太复杂的请求可能一下子就处理完并返回响应结果了，但当网络环境不理想或请求涉及到大量的运算时，服务器响应的时间或许就会比较漫长了，特别对于正在操作，正期待操作结果的用户来说，这段等待时候是无比的漫长，如果你没有过这样的操作体验，你回想一下约会时别人迟到的时候或有急事出门时在公交站苦苦等车的滋味，相信你就能感同身受了，而让用户忍受如此煎熬，对于强调用户体验的Web2.0时代，是大忌，是追求“为用户创造价值，让用户享受电子商务所带来的方便快捷”为宗旨的我所不能接受的。虽然，我不能改变客观环境因素带来的长响应时间，但我可以告诉用户系统正在做什么，让他们感受到，系统很在乎他们的感受，并愿意亲切地和他们交流的，而不是传统的软件那样，死板、霸道、冷冰冰的，好了，不多说大道理了，看看我的做法吧。

首先声明，我现在正在介绍的并不是一个多么强大，多么了不起，技术含量多么高、能领先人类文明多少年的做法，其实这种做法，在咸丰年代开始就有了，不过，那是别人的事，下面介绍的，是我自己一个字母一个字母敲的，旨在交流与分享，也为了整理一下自己的思路，好了，正式开始：

<form id='loginFormId' action="#" method="post" οnsubmit="return false;"> <input type="hidden" id="tenantId" name="tenantId" value="1b487d9c-1855-4ebf-93c8-bbbb6c878801"/> <div class="formRow"> <label>用户名：</label> <input type="text" name="userName" id="userName" /> </div> <div class="formRow"> <label>密 码：</label> <input type="password" name="pwd" id="pwd" /> </div> <div class="otherChooice"> <input type="checkbox" name="isRemPwd" id="isRemPwd" /> <label for="isRemPwd">记住密码</label> </div> <div class="formBtn"> <a id="loginBtn" href="javascript:void(0)" mce_href="javascript:void(0)" class="loginBtn" title="点击登录原点商业平台"></a> <a href="#" mce_href="#" id="forgetPwd">忘记密码？</a> </div> <input type="submit" id='submitBtn'/> </form> 

这是登录表单的html代码，没什么特别的，我的目的是为了大家在读下面的JS代码时能够更加容易理解而已。可以看到，表单中的提交按钮，并非一个传统意义上的<input type="submit"/>的标签，而是一个<a></a>，为什么用a?我觉得用a控制起样式比较简单，最重要是它的hover属性能够兼容各浏览器，这样的话我想做点炫一点的效果简单很多而不用又去写些HACK来兼容该死的IE6们。不过事实上，在上面的代码中没看到这个a是怎样与提交登录请求关联起来的。不用着急，马上送上：

//为登录按钮添加点击事件 $("#loginBtn").click(function(){ loginSubmit(); }); 

那么loginSubmit方法又做了什么事情呢？来看看代码先：

/** *登录按钮点击响应方法 */ function loginSubmit(){ //检查loginConfig中的状态，如果处于加载登录验证结果的状态，就不继续发送登录验证请求了 if(loginConfig.isLoadingData){ return; } var userName = $.trim($("#userName").val()); var pwd = $.trim($("#pwd").val()); var tenantId = $.trim($("#tenantId").val()); if(userName == ""){ quickTips("userName","请先输入用户名"); return; } if(pwd == ""){ quickTips("pwd","请输入密码"); return; } loginWaiting(); checkLogin(userName,pwd,tenantId); } 

这个方法其实是用来做提交验证登录信息请求前的一些处理的，比如空值的判断等等，可能你们看了方法的第一行关于loginConfig.isLoadingData这个判断会比较疑惑，先介绍一下这个变量吧，loginConfig是一个登录信息配置的对象字面量，而其中的isLoadingData是标记当前是否在加载数据的，为true时，表示已经发送了AJAX请求，但还没有得到服务器的回应，为false时，表示当前没有正在等待响应的请求。这个机制是为了防止用户不断点击登录按钮而导致客户端在还没得到服务器的请求的情况下不断地发送AJAX请求，造成无论是客户端还是服务器都产生无谓的负荷而设的。

在继续向下的代码中，有个叫quickTips的方法，这个方法用于显示一些快速提示，如quickTips表示在id为userName的输入框附近提示用户输入用户名，这里不多介绍了，在一些常规的检测完毕后，执行loginWaiting方法，这个方法是本篇博客的关键，也就是开始向用户显示友好的登录信息的，在此之后，马上执行checkLogin方法，向服务器提交登录验证请求，本来，这两个动作应该是严格意义上的同时执行的，但JAVASCRIPT是单线程的，所以，唯有偏心一下了，呵呵，来看看loginWaiting方法做了什么吧：

/** *已经发送登录请求，等等服务器响应过程中的一些处理（包括禁用登录按钮，更换登录按钮背景图片，切换提示信息等等） */ function loginWaiting(){ $("#loginBtn").attr("disabled",true); $("#loginBtn").css("background-position","right"); var waitingText = "正在验证登录信息，请稍候"; $("#forgetPwd").html(waitingText); var i = 1; waitingInterval = setInterval(function(){ var dots = ""; if(i > 6){ i = 0; dots = ""; }else{ for(var k = 0;k < i;k++){ dots += ">"; } } $("#forgetPwd").html(waitingText+dots); i++; },500); } 

首先，将登录按钮的disabled属性设成true,这句代码的本意是将这个按钮设成不可用状态，但事实上，这样做，在很多浏览器上是无效的，所以只是个掩耳盗铃的做法，真正要达到这样的目的，还是靠下面的代码来实现。第二句代码，实现的是改变登录按钮的背景图片铺设的方向，之前是从左到右，现在是从右到左，我在做什么？看一下这幅图片到底是怎样的就清楚了*—*，on,god，CSDN blog原来是不支持上传图片的，所以没法展示这张图片给你们看了，其实只是一种很常见的做法，也就是将一张图片的原图放在左侧，右侧则放一张图片相应的灰度图（也就是当这个按钮不可用的状态时给按钮安排的背景图片），这样子把两张图片合成为一张有什么好处呢？一个是可以服务器的压力，因为一张图片意味着浏览器只需向服务器发一次请求，而两张就意味着两次。第二点，也就是最关键的地方在于，浏览器并不是一次性将所有页面用到的图片加载回来的，而是展示哪张时加载哪张，如果分开两张图片的话，当我们在切换按钮背景图片的时候，浏览器加载稍慢的话，会导致这个切换的过程中，按钮的背景是空白的，这是任何人都不想见到的结果，而我们之前是将其做成一张图片的话，只需要将加载好的图片向左或向右滑动一下就可以了，方便快捷、老少咸宜^_^，你说呢？

从表单的html可以看得到，在登录按钮的右侧有一个取回密码的链接，在等待登录响应过程中，这个链接的存在是没什么必要的，甚至在看起来是有点多余的，所以我决定将其替换成友好的等待信息，$("#forgetPwd").html(waitingText);这句代码做的就是这件事，这样，感觉上，也差不多了，但老感觉还缺点什么，到底是缺什么呢？对了，缺一点生气，这时候，想起来在其它WEB站点或软件中，在后台运算时，通常会有动态的类似省略号的点在不停地跳动，有点像进度条的效果，感觉挺好的，所以我也决定做一个这样的效果，使提示更加友好，也跟得上潮流，呵呵，想了一下，感觉上这样的效果用定时执行会比较好，那就setInterval吧，下面的代码就不多作解释咯，记着在loginComplete后clearInterval就好了。