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

來源:互聯網
上載者:User

我們知道,開源架構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來處理吧。

 

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.