Ajax

Ajax 客戶機/伺服器通訊可以很巧妙簡介：在 本系列的上一篇文章 中，您看到了 Ajax 應用程式如何以 XML 格式化發往伺服器的請求。 還瞭解了為什麼這在大多數情況下並不是一個好主意。這篇文章主要探討在大多數情況下確實是 好主意 的一種做法：向客戶機返回 XML 響應。我其實並不喜歡寫那種主要告訴您什麼不應該 做的文章。很多時候，那都會是一篇非常愚蠢的文章。 我要在前半篇文章中解釋某些東西，然後在後半篇文章中說明使用您剛剛才學會的那種技術是一個多麼糟

瞭解什麼時候適合什麼時候不適合使用 XML簡介：偶爾使用 Ajax 的開發人員也會注意到 Ajax 中的 x 並意識到它代表 XML。XML 是編程中最常 用的資料格式之一，對於非同步應用程式中的伺服器響應能夠帶來切實的好處。在本文中，您將看到伺服器 如何在請求響應中發送 XML。現在如果不使用 XML 就不能進行任何有意義的編程。無論考慮轉向 XHTML 的網頁設計人員、使用 JavaScript 的 Web 程式員、使用部署描述檔案和資料繫結的伺服器端程式員，還是研究基於 XML 的數

在不重新整理頁面的情況下使用 DOM 改變網頁介面簡介：本系列的上一篇文章中考察了文件物件模型（DOM）編程中涉及到的概念——網頁瀏覽器如何把 網頁看作一棵樹，現在您應該理解了 DOM 中使用的編程結構。本期教程將把這些知識用於實踐，建立一 個簡單的包含一些特殊效果的 Web 頁面，所有這些都使用 JavaScript 操縱 DOM 來建立，不需要重新加 載或者重新整理頁面。前面兩期文章已經詳細介紹了文件物件模型或者 DOM，讀者應該很清楚 DOM

使用 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

廢話不多說，先看看我們最終達到的效果.　源碼下載在文章最後。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()函數中，我 們想要尋找兩個元素：段落元素，我們為它設定樣式;空的標籤，我們為它添加