靈活運用ajax的方法beforeSend改善使用者體驗

我們知道，開源架構jquery的API—— jquery.ajax中有一個方法beforeSend，用於在向伺服器發送請求前添加一些處理函數。這是一個ajax事件，在ajax請求開始之前就被觸發，通常允許使用者修改XMLHttpRequest對象（比如說設定附加的頭部資訊），關於ajax事件的解釋可參考文檔：http://docs.jquery.com/Ajax_Events

 

這裡我們討論的，是如何改善Web應用程式互動體驗的問題。通常由於網路等客觀因素導致當瀏覽器向伺服器發送請求的時候，伺服器並沒有立刻做出響應，需要等待若干毫秒甚至數秒的時間。而很多互連網使用者並不知道這種存在這種現象，他們當中有的誤認為是自己沒有操作成功（比如按鈕沒有點擊上），從而會重複剛才的運算元次，如果沒有對網頁前端代碼做相應的處理，通常會導致這種相同的請求被重複提交多次。要避免這種現象的發生，我們通常會在代碼中增加對beforeSend事件的處理，比方說在使用者點擊按鈕後立刻給出一個諸如“請求發送中，請稍候”的 提示。

 

往往我們還見到一種情況，很多網站在載入內容的過程中給出“資料載入中，請稍候”的提示，當內容被載入完畢後顯示內容。很顯然這樣的需求也可以通過對beforeSend事件處理來滿足，但是筆者不推薦這種處理方法，那麼稍微最佳化一些的方法是什麼呢？請往下看。

 

假定我們要顯示內容的HTML標籤為<p id="content"></p>,我們可以設定標籤的預設文本為載入中的提示。範例程式碼如下：

<p id="content">資料載入中，請稍候</p>

當內容載入完畢時，我們可以通過ID選取器，將該標籤中的文本替換成最終的內容。以此來取代beforeSend，效率更高。

 

總結一下，什麼時候用beforeSend，什麼時候用文本替換，取決於ajax請求前後你所展示的DOM元素是否一致，如果你所展示的DOM元素在請求之前已經存在，那麼通過上述文本替換的方式來處理會好些，如果除此以外你還需增加其他的需求，那麼還是用beforeSend來處理吧。

 

問題雖然很簡單，但是如果能深入考慮一下，得到的解法可能不同。筆者旨在拋磚引玉，希望對一些細小的需求也能做到深入分析，持續最佳化，改進你的代碼。