ajax完全自學(xué)手冊教程第18章進度條

1、第18章 Ajax進度條進度條是在Ajax應(yīng)用系統(tǒng)中較為常用的功能，進度條可以極大豐富客戶體驗，在很多網(wǎng)站如Google Earth中就提供了進度條。在本章中講解一個簡單的進度條，這個進度條實現(xiàn)了所有進度條應(yīng)有的功能。18.1 需求分析和概要設(shè)計本節(jié)將講述進度條的需求，以及所要達到的效果，和一些在開發(fā)中應(yīng)注意的細節(jié)。18.1.1 需求分析在多數(shù)Ajax開發(fā)中，由于多線程異步提交方式，經(jīng)常會遇到線程等待，這時就需要使用進度條在用戶等待時間內(nèi)顯示，這樣做可以極大豐富用戶體驗。進度條需要實現(xiàn)以下功能：當加載數(shù)據(jù)時，進度條顯示，并根據(jù)加載數(shù)據(jù)的速度動態(tài)顯示進度條進程。根據(jù)數(shù)據(jù)加載的事件，判斷是否加載進

2、度條。進度條當加載數(shù)據(jù)完畢時，因自動消失，并且釋放進度條資源，減輕服務(wù)器壓力。在制作進度條過程中，應(yīng)注意對進度條的控制，當進度條已經(jīng)行進至盡頭時，應(yīng)迅速停止進度條，釋放資源，防止腳本報錯而影響用戶體驗。18.1.2 概要設(shè)計在進行進度條開發(fā)時，流程如圖所示：18.2 實現(xiàn)代碼進度條的實現(xiàn)實際上較為簡單，進度條的開發(fā)中有很多細節(jié)需要注意，并且這些細節(jié)可能直接影響到進度條開發(fā)的成敗。本示例中的進度條模擬了數(shù)據(jù)加載過程，進度條的顯示和隱藏。在本示例中，使用了定時局部刷新的方式來使進度條行進，本節(jié)中的關(guān)于定時局部刷新細節(jié)描述非常清晰，需要讀者仔細閱讀本節(jié)，掌握定時局部刷新方式開發(fā)Ajax應(yīng)用。18.2

3、.1 功能頁面本示例中，功能頁面僅有一個，其前臺HTML代碼非常簡單，部分代碼如下所示：在功能頁面中，僅僅提供了一個Panel和Button，而在Panel中放置了10個，并為這些的id屬性以升序規(guī)則賦值，這些就是顯示進度條中灰色矩形的區(qū)域。進度條運行效果如圖所示：18.2.2 前臺JavaScript腳本對于進度條，在需求明確指出需要及時停止，并保證不出現(xiàn)任何錯誤，這種定時局部刷新的方式在開發(fā)中有很多開發(fā)細節(jié)需要注意。pollCallBack 函數(shù)會不斷解析服務(wù)器回傳的XmlDom對象，以決定進度條的行進速度。pollCallBack()函數(shù)當發(fā)現(xiàn)進度條行進至尾部時，會使用window.cl

4、earTimeout()方法并傳入在readyStateChangeHandler()函數(shù)中使用全局變量記錄的定時刷新timerid，這樣就可以終止進度條行進。18.2.3 服務(wù)器端代碼在上一節(jié)中已經(jīng)講解了如何使用JavaScript實現(xiàn)定時刷新進度條，所有進度條都依賴于服務(wù)器端數(shù)據(jù)支持，決定進度條的行進速度和顯示、隱藏。由于本章示例僅是模擬進度條加載數(shù)據(jù)，服務(wù)器端較為簡單，但是也揭示了進度條服務(wù)器端支持的特點，代碼如下所示：(詳細內(nèi)容請參照本書)服務(wù)器回傳XML數(shù)據(jù)至前臺腳本，由前臺腳本解析XML進行進度條的顯示和行進，從而完美的實現(xiàn)了無刷新進度條。18.3 小結(jié)在本章中展示了一個進度條示例，在該示例中使用記錄定時刷新timerid，定時請求服務(wù)器獲取進度、進度全滿即通過timerid終止請求，并提示用戶。在本示例中，還比較了兩種請求服務(wù)器方式的特點，并根據(jù)不同的情況使用不同的請求方式提高效率。本示例雖然