ajax提交等待伺服器響應友好提示資訊的實現

眾所周知，在用戶端向伺服器發送AJAX請求時，會有一個等待伺服器響應的過程，在網路環境好而且伺服器負荷小的時候，商務邏輯不大太複雜的請求可能一下子就處理完並返迴響應結果了，但當網路環境不理想或請求涉及到大量的運算時，伺服器響應的時間或許就會比較漫長了，特別對於正在操作，正期待操作結果的使用者來說，這段等待時候是無比的漫長，如果你沒有過這樣的操作體驗，你回想一下約會時別人遲到的時候或有急事出門時在公交站苦苦等車的滋味，相信你就能感同身受了，而讓使用者忍受如此煎熬，對於強調使用者體驗的Web2.0時代，是大忌，是追求“為使用者創造價值，讓使用者享受電子商務所帶來的方便快捷”為宗旨的我所不能接受的。雖然，我不能改變客觀環境因素帶來的長回應時間，但我可以告訴使用者系統正在做什麼，讓他們感受到，系統很在乎他們的感受，並願意親切地和他們交流的，而不是傳統的軟體那樣，死板、霸道、冷冰冰的，好了，不多說大道理了，看看我的做法吧。

首先聲明，我現在正在介紹的並不是一個多麼強大，多麼了不起，技術含量多麼高、能領先人類文明多少年的做法，其實這種做法，在鹹豐年代開始就有了，不過，那是別人的事，下面介紹的，是我自己一個字母一個字母敲的，旨在交流與分享，也為了整理一下自己的思路，好了，正式開始：

<form id='loginFormId' action="#" method="post" onsubmit="return false;"><br /> <input type="hidden" id="tenantId" name="tenantId" value="1b487d9c-1855-4ebf-93c8-bbbb6c878801"/><br /> <div class="formRow"><br /> <label>使用者名稱：</label><br /> <input type="text" name="userName" id="userName" /><br /> </div><br /> <div class="formRow"><br /> <label>密 碼：</label><br /> <input type="password" name="pwd" id="pwd" /><br /> </div><br /> <div class="otherChooice"><br /> <input type="checkbox" name="isRemPwd" id="isRemPwd" /><br /> <label for="isRemPwd">記住密碼</label><br /> </div><br /> <div class="formBtn"><br /> <a id="loginBtn" href="javascript:void(0)" mce_href="javascript:void(0)" class="loginBtn" title="點擊登入原點商業平台"></a><br /> <a href="#" mce_href="#" id="forgetPwd">忘記密碼？</a><br /> </div><br /> <input type="submit" id='submitBtn'/><br /> </form> 

這是登入表單的html代碼，沒什麼特別的，我的目的是為了大家在讀下面的JS代碼時能夠更加容易理解而已。可以看到，表單中的提交按鈕，並非一個傳統意義上的<input type="submit"/>的標籤，而是一個<a></a>，為什麼用a?我覺得用a控制起樣式比較簡單，最重要是它的hover屬效能夠相容各瀏覽器，這樣的話我想做點炫一點的效果簡單很多而不用又去寫些HACK來相容該死的IE6們。不過事實上，在上面的代碼中沒看到這個a是怎樣與提交登入請求關聯起來的。不用著急，馬上送上：

//為登入按鈕添加點擊事件<br />$("#loginBtn").click(function(){<br /> loginSubmit();<br />}); 

那麼loginSubmit方法又做了什麼事情呢？來看看代碼先：

/**<br />*登入按鈕點擊回應程式法<br />*/<br />function loginSubmit(){<br />//檢查loginConfig中的狀態，如果處於載入登入驗證結果的狀態，就不繼續發送登入驗證請求了<br />if(loginConfig.isLoadingData){<br />return;<br />}<br /> var userName = $.trim($("#userName").val());<br /> var pwd = $.trim($("#pwd").val());<br /> var tenantId = $.trim($("#tenantId").val());<br />if(userName == ""){<br />quickTips("userName","請先輸入使用者名稱");<br />return;<br />}<br />if(pwd == ""){<br />quickTips("pwd","請輸入密碼");<br />return;<br />}<br /> loginWaiting();<br /> checkLogin(userName,pwd,tenantId);<br />} 

這個方法其實是用來做提交驗證登入資訊請求前的一些處理的，比如空值的判斷等等，可能你們看了方法的第一行關於loginConfig.isLoadingData這個判斷會比較疑惑，先介紹一下這個變數吧，loginConfig是一個登入資訊配置的對象字面量，而其中的isLoadingData是標記當前是否在載入資料的，為true時，表示已經發送了AJAX請求，但還沒有得到伺服器的回應，為false時，表示當前沒有正在等待響應的請求。這個機制是為了防止使用者不斷點擊登入按鈕而導致用戶端在還沒得到伺服器的請求的情況下不斷地發送AJAX請求，造成無論是用戶端還是伺服器都產生無謂的負荷而設的。

在繼續向下的代碼中，有個叫quickTips的方法，這個方法用於顯示一些快速提示，如quickTips表示在id為userName的輸入框附近提示使用者輸入使用者名稱，這裡不多介紹了，在一些常規的檢測完畢後，執行loginWaiting方法，這個方法是本篇部落格的關鍵，也就是開始向使用者顯示友好的登入資訊的，在此之後，馬上執行checkLogin方法，向伺服器提交登入驗證請求，本來，這兩個動作應該是嚴格意義上的同時執行的，但JAVASCRIPT是單線程的，所以，唯有偏心一下了，呵呵，來看看loginWaiting方法做了什麼吧：

/**<br />*已經發送登入請求，等等伺服器響應過程中的一些處理（包括禁用登入按鈕，更換登入按鈕背景圖片，切換提示資訊等等）<br />*/<br />function loginWaiting(){<br />$("#loginBtn").attr("disabled",true);<br />$("#loginBtn").css("background-position","right");<br />var waitingText = "正在驗證登入資訊，請稍候";<br />$("#forgetPwd").html(waitingText);<br />var i = 1;<br />waitingInterval = setInterval(function(){<br />var dots = "";<br />if(i > 6){<br />i = 0;<br />dots = "";<br />}else{<br />for(var k = 0;k < i;k++){<br />dots += ">";<br />}<br />}<br />$("#forgetPwd").html(waitingText+dots);<br />i++;<br />},500);<br />} 

首先，將登入按鈕的disabled屬性設成true,這句代碼的本意是將這個按鈕設成不可用狀態，但事實上，這樣做，在很多瀏覽器上是無效的，所以只是個掩耳盜鈴的做法，真正要達到這樣的目的，還是靠下面的代碼來實現。第二句代碼，實現的是改變登入按鈕的背景圖片鋪設的方向，之前是從左至右，現在是從右至左，我在做什嗎？看一下這幅圖片到底是怎樣的就清楚了*—*，on,god，CSDN blog原來是不支援上傳圖片的，所以沒法展示這張圖片給你們看了，其實只是一種很常見的做法，也就是將一張圖片的原圖放在左側，右側則放一張圖片相應的灰階圖（也就是當這個按鈕停用狀態時給按鈕安排的背景圖片），這樣子把兩張圖片合成為一張有什麼好處呢？一個是可以伺服器的壓力，因為一張圖片意味著瀏覽器只需向伺服器發一次請求，而兩張就意味著兩次。第二點，也就是最關鍵的地方在於，瀏覽器並不是一次性將所有頁面用到的圖片載入回來的，而是展示哪張時載入哪張，如果分開兩張圖片的話，當我們在切換按鈕背景圖片的時候，瀏覽器載入稍慢的話，會導致這個切換的過程中，按鈕的背景是空白的，這是任何人都不想見到的結果，而我們之前是將其做成一張圖片的話，只需要將載入好的圖片向左或向右滑動一下就可以了，方便快捷、老少鹹宜^_^，你說呢？

從表單的html可以看得到，在登入按鈕的右側有一個取回密碼的連結，在等待登入響應過程中，這個連結的存在是沒什麼必要的，甚至在看起來是有點多餘的，所以我決定將其替換成友好的等待資訊，$("#forgetPwd").html(waitingText);這句代碼做的就是這件事，這樣，感覺上，也差不多了，但老感覺還缺點什麼，到底是缺什麼呢？對了，缺一點生氣，這時候，想起來在其它WEB網站或軟體中，在後台運算時，通常會有動態類似省略符號的點在不停地跳動，有點像進度條的效果，感覺挺好的，所以我也決定做一個這樣的效果，使提示更加友好，也跟得上潮流，呵呵，想了一下，感覺上這樣的效果用定時執行會比較好，那就setInterval吧，下面的代碼就不多作解釋咯，記著在loginComplete後clearInterval就好了。