掌握 Ajax，第 6 部分: 建立基于 DOM 的 Web 应用程序
| 在不刷新頁面的情況下使用 DOM 改變網(wǎng)頁界面 |
級(jí)別： 中級(jí) Brett McLaughlin (mailto:brett@newInstance.com?subject=建立基于 DOM 的 Web 應(yīng)用程序&cc=htc@us.ibm.com), 作家兼編輯, O'Reilly Media Inc. 2006 年 10 月 12 日 本系列的上一篇文章中考察了文檔對(duì)象模型（DOM）編程中涉及到的概念——Web 瀏覽器如何把網(wǎng)頁看作一棵樹，現(xiàn)在您應(yīng)該理解了 DOM 中使用的編程結(jié)構(gòu)。本期教程將把這些知識(shí)用于實(shí)踐，建立一個(gè)簡單的包含一些特殊效果的 Web 頁面，所有這些都使用 JavaScript 操縱 DOM 來創(chuàng)建，不需要重新加載或者刷新頁面。前面兩期文章已經(jīng)詳細(xì)介紹了文檔對(duì)象模型或者 DOM，讀者應(yīng)該很清楚 DOM 是如何工作的了。（前兩期 DOM 文章以及 Ajax 系列更早文章的鏈接請參閱參考資料。）本教程中將把這些知識(shí)用于實(shí)踐。我們將開發(fā)一個(gè)簡單的 Web 應(yīng)用程序，其用戶界面可根據(jù)用戶動(dòng)作改變，當(dāng)然要使用 DOM 來處理界面的改變。閱讀完本文之后，就已經(jīng)把學(xué)習(xí)到的關(guān)于 DOM 的技術(shù)和概念付諸應(yīng)用了。 假設(shè)讀者已經(jīng)閱讀過上兩期文章，如果還沒有的話，請先看一看，切實(shí)掌握什么是 DOM 以及 Web 瀏覽器如何將提供給它的 HTML 和 CSS 轉(zhuǎn)化成單個(gè)表示網(wǎng)頁的樹狀結(jié)構(gòu)。到目前為止我一直在討論的所有 DOM 原理都將在本教程中用于創(chuàng)建一個(gè)能工作的（雖然有點(diǎn)簡單）基于 DOM 的動(dòng)態(tài) Web 頁面。如果遇到不懂的地方，可以隨時(shí)停下來復(fù)習(xí)一下前面的兩期文章然后再回來。 從一個(gè)示例應(yīng)用程序開始
我們首先建立一個(gè)非常簡單的應(yīng)用程序，然后再添加一點(diǎn) DOM 魔法。要記住，DOM 可以移動(dòng)網(wǎng)頁中的任何東西而不需要提交表單，因此足以和 Ajax 媲美；我們創(chuàng)建一個(gè)簡單的網(wǎng)頁，上面只顯示一個(gè)普通的舊式大禮帽，還有一個(gè)標(biāo)記為 Hocus Pocus! 的按鈕（猜猜這是干什么的？） 初始 HTML 清單 1 顯示了這個(gè)網(wǎng)頁的 HTML。除了標(biāo)題和表單外，只有一個(gè)簡單的圖片和可以點(diǎn)擊的按鈕。 清單 1. 示例應(yīng)用程序的 HTML
可以在本文后面的下載中找到這段 HTML 和本文中用到的圖片。不過我強(qiáng)烈建議您只下載那個(gè)圖片，然后隨著本文中逐漸建立這個(gè)應(yīng)用程序自己動(dòng)手輸入代碼。這樣要比讀讀本文然后直接打開完成的應(yīng)用程序能夠更好地理解 DOM 代碼。 查看示例網(wǎng)頁 這里沒有什么特別的竅門，打開網(wǎng)頁可以看到圖 1 所示的結(jié)果。 圖 1. 難看的大禮帽 關(guān)于 HTML 的補(bǔ)充說明 應(yīng)該 注意的重要一點(diǎn)是，清單 1 和圖 1 中按鈕的類型是 button 而不是提交按鈕。如果使用提交按鈕，單擊該按鈕將導(dǎo)致瀏覽器提交表單，當(dāng)然表單沒有 action 屬性（完全是有意如此），從而會(huì)造成沒有任何動(dòng)作的無限循環(huán)。（應(yīng)該自己試試，看看會(huì)發(fā)生什么。）通過使用一般輸入按鈕而不是提交按鈕，可以把 javaScript 函數(shù)和它連接起來與瀏覽器交互而無需 提交表單。
向示例應(yīng)用程序添加元素 現(xiàn)在用一些 JavaScript、DOM 操作和小小的圖片戲法裝扮一下網(wǎng)頁。 使用 getElementById() 函數(shù) 顯然，魔法帽子沒有兔子就沒有看頭了。這里首先用兔子的圖片替換頁面中原有的圖片（再看看圖 1），如圖 2 所示。 圖 2. 同樣的禮帽，這一次有了兔子 完成這個(gè) DOM 小戲法的第一步是找到網(wǎng)頁中表示 img 元素的 DOM 節(jié)點(diǎn)。一般來說，最簡單的辦法是用 getElementById() 方法，它屬于代表 Web 頁面的 document 對(duì)象。前面已經(jīng)見到過這個(gè)方法，用法如下：
為 HTML 添加 id 屬性 這是非常簡單的 JavaScript，但是需要修改一下 HTML：為需要訪問的元素增加 id 屬性。也就是希望（用帶兔子的新圖片）替換的 img 元素，因此將 HTML 改為清單 2 的形式。 清單 2. 增加 id 屬性
如果重新加載（或者打開）該頁面，可以看到毫無變化，增加 id 屬性對(duì)網(wǎng)頁的外觀沒有影響。不過，該屬性可以幫助 JavaScript 和 DOM 更方便地處理元素。 抓住 img 元素 現(xiàn)在可以很容易地使用 getElementById() 了。已經(jīng)有了需要元素的 ID，即 topHat，可以將其保存在一個(gè)新的 JavaScript 變量中。在 HTML 頁面中增加清單 3 所示的代碼。 清單 3. 訪問 img 元素
現(xiàn)在打開或重新加載該網(wǎng)頁同樣沒有什么驚奇的地方。雖然現(xiàn)在能夠訪問圖片，但是對(duì)它還什么也沒有做。
修改圖片，麻煩的辦法 完成所需修改有兩種方法：一種簡單，一種麻煩。和所有的好程序員一樣，我也喜歡簡單的辦法；但是運(yùn)用較麻煩的辦法是一次很好的 DOM 練習(xí)，值得您花點(diǎn)時(shí)間。首先看看換圖片比較麻煩的辦法；后面再重新分析一下看看有沒有更簡單的辦法。 用帶兔子的新照片替換原有圖片的辦法如下： 創(chuàng)建新的 img 元素 通過上兩期文章應(yīng)該記住 DOM 中最關(guān)鍵的是 document 對(duì)象。它代表整個(gè)網(wǎng)頁，提供了 getElementById() 這樣功能強(qiáng)大的方法，還能夠創(chuàng)建新的節(jié)點(diǎn)。現(xiàn)在要用到的就是這最后一種性質(zhì)。 具體而言，需要?jiǎng)?chuàng)建一個(gè)新的 img 元素。要記住，在 DOM 中一切都是節(jié)點(diǎn)，但是節(jié)點(diǎn)被進(jìn)一步劃分為三種基本類型：
還有其他類型，但是這三種可以滿足 99% 的編程需要。這里需要一個(gè) img 類型的新元素。因此需要下列 JavaScript 代碼：
這行代碼可以創(chuàng)建一個(gè) element 類型的新節(jié)點(diǎn)，元素名為 img。在 HTML 中基本上就是：
要記住，DOM 會(huì)創(chuàng)建結(jié)構(gòu)良好的 HTML，就是說這個(gè)目前為空的元素包括起始和結(jié)束標(biāo)簽。剩下的就是向該元素增加內(nèi)容或?qū)傩?#xff0c;然后將其插入到網(wǎng)頁中。 對(duì)內(nèi)容來說，img 是一個(gè)空元素。但是需要增加一個(gè)屬性 src，它指定了要加載的圖片。您也許認(rèn)為要使用 addAttribute() 之類的方法，但情況并非如此。DOM 規(guī)范的制定者認(rèn)為程序員可能喜歡簡潔（的確如此！），因此他們規(guī)定了一個(gè)方法同時(shí)用于增加新屬性和改變已有的屬性值：setAttribute()。 如果對(duì)已有的屬性調(diào)用 setAttribute()，則把原來的值替換為指定的值。但是，如果調(diào)用 setAttribute() 并指定一個(gè)不 存在的屬性，DOM 就會(huì)使用提供的值增加一個(gè)屬性。一個(gè)方法，兩種用途！因此需要增加下列 JavaScript 代碼：
它創(chuàng)建一個(gè)圖片元素然后設(shè)置適當(dāng)?shù)馁Y源屬性。現(xiàn)在，HTML 應(yīng)該如清單 4 所示。 清單 4. 使用 DOM 創(chuàng)建新圖片
可以加載該頁面，但是不要期望有任何改變，因?yàn)槟壳八龅男薷膶?shí)際上還沒有影響頁面。另外，如果再看看任務(wù)列表中的第 5 步，就會(huì)發(fā)現(xiàn)還沒有調(diào)用我們的 JavaScript 函數(shù)！ 獲得原始圖片的父元素 現(xiàn)在有了要插入的圖片，還需要找到插入的地方。但是不能將其插入到已有的圖片中，而是要將其插入到已有圖片之前然后再刪除原來的圖片。為此需要知道已有圖片的父元素，實(shí)際上這就是插入和刪除操作的真正關(guān)鍵所在。 應(yīng)該記得，前面的文章中曾經(jīng)指出 DOM 確實(shí)把網(wǎng)頁看成一棵樹，即節(jié)點(diǎn)的層次結(jié)構(gòu)。每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)（樹中更高層次的節(jié)點(diǎn)，該節(jié)點(diǎn)是它的一個(gè)子級(jí)），可能還有自己的子節(jié)點(diǎn)。對(duì)于圖片來說，它沒有子級(jí) —— 要記住圖片是空元素，但是它肯定有父節(jié)點(diǎn)。甚至不需要知道父節(jié)點(diǎn)是什么，但是需要訪問它。 為此，只要使用每個(gè) DOM 節(jié)點(diǎn)都有的 parentNode 屬性即可，比如：
確實(shí)非常簡單！可以肯定這個(gè)節(jié)點(diǎn)有子節(jié)點(diǎn)，因?yàn)橐呀?jīng)有了一個(gè)：原來的圖片。此外，完全不需要知道它是一個(gè) div、p 或者頁面的 body，都沒有關(guān)系！ 插入新圖片 現(xiàn)在得到了原來圖片的父節(jié)點(diǎn)，可以插入新的圖片了。很簡單，有多種方法可以添加子節(jié)點(diǎn)：
因?yàn)橄Ｍ研聢D片放在舊圖片的位置上，需要使用 insertBefore()（后面還要使用 removeChild() 方法）。可使用下面這行 JavaScript 代碼把新圖片元素插入到原有圖片之前：
現(xiàn)在原圖片的父元素有了兩個(gè) 子元素：新圖片和緊跟在后面的舊圖片。必須指出，這里包圍 這些圖片的內(nèi)容沒有變，而且這些內(nèi)容的順序也和插入之前完全相同。僅僅是這個(gè)父節(jié)點(diǎn)中增加了一個(gè)子節(jié)點(diǎn)，即舊圖片之前的新圖片。 刪除舊圖片 現(xiàn)在只需要?jiǎng)h除舊圖片，因?yàn)榫W(wǎng)頁中只需要新圖片。很簡單，因?yàn)橐呀?jīng)得到了舊圖片元素的父節(jié)點(diǎn)。只要調(diào)用 removeChild() 并把需要?jiǎng)h除的節(jié)點(diǎn)傳遞給它即可：
現(xiàn)在，用新圖片替換舊圖片的工作已基本完成了。HTML 應(yīng)該如清單 5 所示。 清單 5. 用新圖片替換舊圖片
連接 JavaScript 最后一步，可能也是最簡單的，就是把 HTML 表單連接到剛剛編寫的 JavaScript 函數(shù)。需要每當(dāng)用戶點(diǎn)擊 Hocus Pocus! 按鈕的時(shí)候運(yùn)行 showRabbit() 函數(shù)。為此只要向 HTML 中增加一個(gè)簡單的 onClick 事件處理程序即可。
這種簡單的 JavaScript 編程應(yīng)該非常容易了。將其添加到 HTML 頁面中，保存它然后在 Web 瀏覽器中打開。頁面初看起來應(yīng)該和圖 1 相同，但是點(diǎn)擊 Hocus Pocus! 后應(yīng)該看到圖 3 所示的結(jié)果。 圖 3. 兔子戲法
替換圖片，簡單的辦法 如果回顧替換圖片的步驟，再看看節(jié)點(diǎn)的各種方法，可能會(huì)注意到方法 replaceNode()。該方法可用于把一個(gè)節(jié)點(diǎn)替換為另一個(gè)節(jié)點(diǎn)。再考慮一下前面的步驟： 使用 replaceNode() 可以減少需要的步驟數(shù)。可以將第 3 步和第 4 步合并在一起： 這看起來不是什么大事，但確實(shí)能夠簡化代碼。清單 6 說明了這種修改：去掉了 insertBefore() 和 removeChild() 方法調(diào)用。 清單 6. 用新圖片替換舊圖片（一步完成）
當(dāng)然這不是什么大的修改，但是說明了 DOM 編碼中一件很重要的事：執(zhí)行一項(xiàng)任務(wù)通常有多種方法。如果仔細(xì)審閱可用 DOM 方法看看是否有更簡單的方法可以完成任務(wù)，很多時(shí)候都會(huì)發(fā)現(xiàn)可以將四五個(gè)步驟壓縮為兩三個(gè)步驟。
替換圖片，（真正）簡單的辦法 既然指出了執(zhí)行一項(xiàng)任務(wù)幾乎總是有更簡單的方法，現(xiàn)在就說明用兔子圖片替換帽子圖片的簡單得多 的辦法。閱讀本文的過程中有沒有想到這種方法？提示一下：與屬性有關(guān)。 要記住，圖片元素很大程度上是由其 src 屬性控制的，他引用了某個(gè)地方的文件（不論是本地 URI 還是外部 URL）。到目前為止，我們一直用新圖片替換圖片節(jié)點(diǎn)，但是直接修改已有圖片的 src 屬性要簡單得多！這樣就避免了創(chuàng)建新節(jié)點(diǎn)、尋找父節(jié)點(diǎn)和替換舊節(jié)點(diǎn)的所有工作，只要一步就能完成了：
這樣就夠了！看看清單 7，它顯示了這種解決方案，包括整個(gè)網(wǎng)頁。 清單 7. 修改 src 屬性
這是 DOM 最棒的一點(diǎn)：更新屬性的時(shí)候網(wǎng)頁馬上就會(huì)改變。只要圖片指向新的文件，瀏覽器就加載該文件，頁面就更新了。不需要重新加載，甚至不需要?jiǎng)?chuàng)建新的圖片元素！結(jié)果仍然和圖 3 相同，只不過代碼簡單得多了。
把兔子藏起來 現(xiàn)在網(wǎng)頁看起來很漂亮，但是仍然有點(diǎn)原始。雖然兔子從帽子中跳出來了，但是屏幕下方的按鈕仍然顯示 Hocus Pocus! 和調(diào)用 showRabbit()。這就是說如果在兔子出來之后仍然點(diǎn)擊按鈕，就是在浪費(fèi)處理時(shí)間。更重要的是，它毫無用處，而沒有用的按鈕不是好東西。我們來看看能否利用 DOM 再作一些修改，無論兔子在帽子里還是出來都讓這個(gè)按鈕派上用場。 修改按鈕的標(biāo)簽 最簡單的是當(dāng)用戶點(diǎn)擊按鈕之后改變它的標(biāo)簽。這樣就不會(huì)看起來像還有什么魔法，網(wǎng)頁中最糟糕的就是暗示用戶錯(cuò)誤的東西。在修改按鈕的標(biāo)簽之前需要訪問該節(jié)點(diǎn)，而在此之前需要引用按鈕 ID。這是老套路了，清單 8 為按鈕增加了 id 屬性。 清單 8. 增加 id 屬性
現(xiàn)在用 JavaScript 訪問按鈕很簡單了：
當(dāng)然，您可能已經(jīng)輸入了下面這行 JavaScript 來改變按鈕的標(biāo)簽值。這里再次用到了 setAttribute()：
通過這個(gè)簡單的 DOM 操作，兔子跳出來之后按鈕的標(biāo)簽馬上就會(huì)改變。現(xiàn)在，HTML 和完成的 showRabbit() 函數(shù)如清單 9 所示。 清單 9. 完成的網(wǎng)頁
把兔子收回去 從此新的按鈕標(biāo)簽中可能已經(jīng)猜到，現(xiàn)在要把兔子收回帽子中去。基本上和放兔子出來完全相反：將圖片的 src 屬性再改回舊圖片。創(chuàng)建一個(gè)新的 JavaScript 函數(shù)來完成這項(xiàng)任務(wù)：
實(shí)際上僅僅把 showRabbit() 函數(shù)的功能翻轉(zhuǎn)了過來。將圖片改為原來的沒有兔子的大禮帽，抓取按鈕，將標(biāo)簽改為 Hocus Pocus!
事件處理程序 現(xiàn)在這個(gè)示例應(yīng)用程序有一個(gè)大問題：雖然按鈕的標(biāo)簽 改變了，但是單擊按鈕時(shí)的動(dòng)作沒有 變。幸運(yùn)的是，當(dāng)用戶單擊按鈕時(shí)可以使用 DOM 改變事件或者發(fā)生的動(dòng)作。因此，如果按鈕上顯示 Get back in that hat!，點(diǎn)擊的時(shí)候需要運(yùn)行 hideRabbit()。相反，一旦兔子藏了起來，按鈕又返回來運(yùn)行 showRabbit()。
查看 HTML 就會(huì)發(fā)現(xiàn)這里處理的事件是 onClick。在 JavaScript 中，可以通過按鈕的 onclick 的屬性來引用該事件。（要注意，在 HTML 中該屬性通常稱為 onClick，其中 C 大寫；而在 JavaScript 中則稱為 onclick，全部小寫。）因此可以改變按鈕觸發(fā)的事件：只要賦給 onclick 屬性一個(gè)新的函數(shù)。 但是有點(diǎn)細(xì)微的地方：onclick 屬性需要提供函數(shù)引用——不是函數(shù)的字符串名稱，而是函數(shù)本身的引用。在 JavaScript 中，可以按名稱引用函數(shù)，不需要帶括號(hào)。因此可以這樣修改點(diǎn)擊按鈕時(shí)執(zhí)行的函數(shù)：
因此在 HTML 中作這種修改很簡單。看看清單 10，它切換按鈕觸發(fā)的函數(shù)。 清單 10. 改變按鈕的 onClick 函數(shù)
這樣就得到了一個(gè)完成的、可以使用的 DOM 應(yīng)用程序。自己試試吧！
結(jié)束語 現(xiàn)在您應(yīng)該非常熟悉 DOM 了。前面的文章介紹了使用 DOM 所涉及到的基本概念，詳細(xì)地討論了 API，現(xiàn)在又建立一個(gè)簡單的基于 DOM 的應(yīng)用程序。一定要花點(diǎn)時(shí)間仔細(xì)閱讀本文，并自己嘗試一下。 雖然這是專門討論文檔對(duì)象模型的系列文章的最后一期，但肯定還會(huì)看到其他關(guān)于 DOM 的文章。事實(shí)上，如果在 Ajax 和 JavaScript 世界中不使用 DOM 就很難做多少事，至少在一定程度上如此。無論要?jiǎng)?chuàng)建復(fù)雜的突出顯示還是移動(dòng)效果，或者僅僅處理文本塊或圖片，DOM 都提供了一種非常簡單易用的訪問 Web 頁面的方式。 如果對(duì)如何使用 DOM 仍然感覺沒有把握，花點(diǎn)時(shí)間溫習(xí)一下這三篇文章；本系列的其他文章在使用 DOM 的時(shí)候不再多作解釋，讀者也不希望迷失在這些細(xì)節(jié)之中而忽略關(guān)于其他概念的重要信息，比如 XML 和 JSON。為了保證能夠熟練地使用 DOM，自己編寫幾個(gè)基于 DOM 的應(yīng)用程序試試，這樣就很容易理解后面將要討論的一些數(shù)據(jù)格式問題了。
下載
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TrackBack：http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/
轉(zhuǎn)載于:https://www.cnblogs.com/hdjjun/archive/2008/07/04/1235652.html
總結(jié)
以上是生活随笔為你收集整理的掌握 Ajax，第 6 部分: 建立基于 DOM 的 Web 应用程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： strcpy和memcpy的区别 | s
- 下一篇： IOS 开发中判断NSString是否为