Ajax

使用 JavaScript 即時更新 Web 頁面簡介：上一期中 Brett 介紹了文件物件模型（DOM），它的元素在幕後定義了 Web 頁面。這一期文 章中他將進一步探討 DOM。瞭解如何建立、刪除和修改 DOM 樹的各個部分，瞭解如何?網頁的即時更 新！如果閱讀過本系列的 上一期文章，那麼您就非常清楚當 網頁瀏覽器顯示網頁時幕後發生的一切了。 前面已經提到，當 HTML 或為頁面定義的 CSS 發送給 網頁瀏覽器時，網頁被從文本轉化成物件模型。無

將 HTML 轉換為物件模型簡介：程式員（使用後端應用程式）和 Web 程式員（編寫 HTML、CSS 和 JavaScript 上）之間的分 水嶺是長久存在的。但是，Document Object Model (DOM) 彌補了這個裂縫，使得在後端使用 XML 同時 在前端使用 HML 切實可行，並成為極其有效工具。在本文中，Brett McLaughlin 介紹了 Document Object Model，解釋它在 Web 頁面中的應用，並開始挖掘其在 JavaScript

全面理解 HTTP 的狀態碼、就緒狀態和 XMLHttpRequest 對象簡介：對於很多 Web 開發人員來說，只需要產生簡單的請求並接收簡單的響應即可；但是對於希望掌 握 Ajax 的開發人員來說，必須要全面理解 HTTP 狀態碼、就緒狀態和 XMLHttpRequest 對象。在本文 中，Brett McLaughlin 將向您介紹各種狀態碼，並展示瀏覽器如何對其進行處理，本文還給出了在 Ajax 中使用的比較少見的 HTTP 要求。在本系列的 上篇文章 中，我們將詳細介紹

在 Web 請求中使用 XMLHttpRequest多數 Web 應用程式都使用請求/響應模型從伺服器上獲得完整的 HTML 頁面。常常是點擊一個按鈕， 等待伺服器響應，再點擊另一個按鈕，然後再等待，這樣一個反覆的過程。有了 Ajax 和 XMLHttpRequest 對象，就可以使用不必讓使用者等待伺服器響應的請求/響應模型了。本文中，Brett McLaughlin 介紹了如何建立能夠適應不同瀏覽器的 XMLHttpRequest 執行個體，建立和發送請求，並響應服

理解 Ajax 及其工作原理，構建網站的一種有效方法簡介：Ajax 由 HTML、JavaScript技術、DHTML 和 DOM 組成，這一傑出的方法可以將笨拙的 Web 界 面轉化成互動性的 Ajax 應用程式。本系列的作者是一位 Ajax 專家，他示範了這些技術如何協同工作 —— 從總體概述到細節的討論 —— 使高效的 Web 開發成為現實。他還揭開了 Ajax 核心概念的神秘面 紗，包括 XMLHttpRequest

想法與目標從AJAX誕生至今，就存在著Back/Forward Button和bookmark失效的問題，我 以前一般提倡，一個好的AJAX應用應該不讓使用者有點擊“Back/Forward”的想法 ，並且使用某種方式提供給使用者一個能夠記錄直接產生頁面的Bookmark。 Windows Live Local應該是這種應用最好的典範之一，其靈活的互動，良好的界 面讓我在初遇時不得不眼前一亮。另外，我也曾經見過把後退按鈕禁用的做法（其實這樣對於解決問題的確不

廢話不多說，先看看我們最終達到的效果.　源碼下載在文章最後。Style1:Style2:上面的tag cloud實現思想如下：1. Server端提供Tag的相關資訊，包括TagName，Posts等，使用JSON格式傳 輸 資料這個例子中，我使用Servlet，使用json-lib將Bean轉成JSON字串。當然 Tag 的相關資訊這裡只是示範，真實環境中可能就需要從資料庫取出來再處理了。代碼如下：import java.io.IOException;import

使用 GWT 更輕鬆地測試非同步應用程式簡介： 您可能從編寫 Ajax 應用程式中獲得了極大樂趣，但是對它們執行單 元測試卻著實讓人頭痛。 在本文中，Andrew Glover 著手解決 Ajax 的弱點（ 其中之一），即應對非同步 Web 應用程式執行單元測試的固有挑戰。幸運的是， 他發現在 Google Web Toolkit 的協助下，解決這個特殊的代碼品質問題要比預 想的容易。Ajax 在近期無疑是 Web 開發界最時髦的字眼之一 —— 與 Ajax 相關的工具、

目錄AJAX 模式的影響單頁介面模型單頁介面模型的 缺點可訪問的富 Internet 應用程式AJAX 模式概述唯一 URL 模式逾時模式與當今構建的絕大多數 Web 應用程式所採用 的開發模式相比，AJAX 對 Web 解決方案架構師而言意味著一種模式轉變。它立 足於一些新的原則和規則來解釋基於 Web 的系統的行為，並要求採用一些新的 演算法來實現它們。AJAX 背後的主要原則是使用者將純資料發送到 Web 服 務器，然後接收更多的純資料。AJAX 的第二個原則是使用者自行協調操作

簡介：後端處理 — 伺服器端指令碼和程式 — 並不總能一投入到 Ajax 應用 程 序中就很好地運轉。相反，若能仔細地提前規劃以確保資料以恰當及有效格式 發送，反而能讓整個應用程式更內聚，並能減少不必要的複雜性。在本文中， Brett McLaughlin 展示了一個好的伺服器端指令碼如何能補足 Ajax 行為。在本系列的 第 1 部分，我們在 Nathan Smith 的 Hoverbox 代碼（到初始 Hoverbox 代碼的相關連結可以在 參考資料

簡介：如今，Ajax 仍然是業界的熱門字眼，越來越多的應用程式都採用 Ajax 技術構建。然而，構建一個好的 應用程式並不容易。本文將著重討論如果構建 直 觀易用的受 Ajax 驅動的應用程式。Ajax 並不只是一種技術。大多數開發人員卻認為它是，並試圖藉助諸如 XML 和 JavaScript 這類語言證明其觀點。但這種觀點非常局限，並且，忽視了付錢 給您的人：客戶，不管是諮詢代理還是您的老闆（只有您建立了令人滿意的使用者

一、引言如今，有相當多的Web應用程式，如Backpack，Blinksale和Gmail，都把資料庫技術與AJAX整合到一起。通過提供與資料庫通訊而不用重新整理瀏覽器這種強有力的技術，這種整合對web應用程式和使用者體驗產生巨大的影響-這意味著，在使用者繼續其它互動的同時可以實現即時的資料轉送。本文將集中討論上述技術整合機理。同時提供了完整的參考源碼。這個樣本是一個簡單的職務記錄應用程式，其中每個職務包含一個標題，描述和日期-允許使用者添加、編輯和刪除職務。所有這些都是你與資料庫記錄資料打交道

基於瀏覽器的應用程式框架一般分為兩種：Aplication frameworks:提供了瀏覽器功能，但其最著名的還是在於通過視窗 產生組件建立案頭GUI。Infrastructural frameworks:提供基本的架構功能和 輕便式瀏覽器端操作，讓開發人員去建立具體應用，主要功能包括：基於 XMLHttpRequest組件的瀏覽器互動功能XML解析和操作功能根據 XMLHttpRequest的返回資訊進行相應的DOM操作一些特殊情況下，和其他的瀏 覽器端技術如Flash（或Java

一、AJAX最值得稱讚的是非同步互動，而不是無重新整理很多人都看好AJAX無重新整理的技術，以至於認同AJAX就是用來做無重新整理的。這個認識是錯誤的，什麼是無重新整理？無重新整理就是頁面無需重載，那什麼又是非同步互動？非同步互動就是一個簡單的多線程，當你在一個blog裡看文章時，同時也可以利用AJAX進行無重新整理的回複提交，看起來雖然也是無重新整理，但這裡最重要的是非同步，即你能一邊看文章，一邊又能向伺服器提交你的回複資訊，利用好這個非同步，才能算是掌握了AJAX的精髓。很多場合，無重新整理

眾所周知，非同步互動、JavaScript指令碼和XML封裝資料是AJAX的三大特徵。其實，在實際應用中，不需要牢牢套死這三條大律，在我看來，AJAX -

我們在前面一直將注意力集中於應用中的小細節。現在可以擴大一下視野， 考慮啟動時交付在瀏覽器上的完整的JavaScript應用。這也可以按MVC模式進行 結構化，由於清晰地分離了關注點，得到較大的最佳化。在這個層級，模型由業務領域對象組成，視圖是整個可程式化處理的頁面，控 制器是將UI和領域對象相串連的代碼中所有事件處理函數的組合。圖4-2展示了 這個層級的MVC操作。這可能是對於Ajax開發人員最重要的MVC使用方式，因為它很

建議的解決方案是定義一個通用的事件路由器對象，它為目標元素附加一個 標準函數，作為一個事件回調，並且維護一個監聽器函數的列表。這允許我們以 下面的方式重寫mousemat的初始化代碼：window.onload=function(){var mat=document.getElementById('mousemat');...var mouseRouter=new

用JavaScript操作DOM的第一件事就是找到要修改的元素。前面已經提到，我 們開始只能得到根節點的一個引用，它儲存在全域變數document中。DOM中的每 一個節點都是document的子節點(或孫節點、曾孫節點等等)，但是要在大型的複 雜文檔中，一步一步地緩慢搜尋是件體力活。幸運的是，我們可以走一些捷徑。 最常用的方法就是給元素附加唯一的ID。在代碼清單2-5的onload()函數中，我 們想要尋找兩個元素：段落元素，我們為它設定樣式;空的標籤，我們為它添加

通過XMLHttpRequest對象向伺服器發送請求是一件相當直接的事情。我們需 要做的所有事情就是給它傳遞一個伺服器頁面的URL，這個頁面將產生資料。就 像下面這樣：XMLHttpRequest支援大量的HTTP調用語義，包括用來動態產生頁面的可選查 詢字串參數(你可能已經知道這些CGI參數、Form參數或者ServletRequest參數 ，取決於伺服器端開發背景)。在考察請求對象如何支援這些功能之前，我們先

到目前為止，我們已經考察了使用DOM來操作文檔的結構(一個元素如何被另 外一個元素所包含，諸如此類)。這使得我們可以有效地改造在靜態HTML中聲明 的結構。DOM還提供了另外一類方法，允許以編程方式修改元素的樣式和改造定 義在樣式表中的結構。通過DOM操作，Web頁面上的每一個元素都可以擁有多種視覺樣式，例如位置 、高度和寬度、顏色、邊框和空白。儘管分別修改每一個屬性可以更加精細地控 制元素的外觀，但是這樣做是很單調乏味的。幸運的是，Web瀏覽器為我們所提