ajax完全自學(xué)手冊(cè)教程第18章進(jìn)度條

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

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

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

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