這一章，將介紹SVG如何同數(shù)據(jù)庫進行交互，程序自 動從數(shù)據(jù)庫獲得相關數(shù)據(jù)，并且使用SVG作為數(shù)據(jù)的展現(xiàn)手段。這樣SVG更加符合表現(xiàn)層的要求，數(shù)據(jù)由專門的數(shù)據(jù)庫保存和處理，盡量減少SVG處理商業(yè)邏 輯運算，甚至一些SVG的配置項也可以保存在數(shù)據(jù)庫中，供載入SVG文檔的時候使用，可以提高SVG的靈活性和可配置性。

15.1  什么是Ajax

Ajax (（Asynchronous JavaScript and XML)）并不是一項新的技術，而是多種技術的綜合，或者說是一種設計方式，這些技術包括JavaScript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest等技術。其中：

— 使用XHTML和CSS實現(xiàn)標準化的呈現(xiàn)界面。

— 使用DOM實現(xiàn)動態(tài)的顯示和交互。

— 使用XMLHttpRequest實現(xiàn)與服務器的異步通信(（ASV3中由“getURL”函數(shù)提供該功能)）。

— 使用JavaScript將XHTML、DOM、XML、XMLHttpRequest綁定。

各種技術在Ajax引擎中的作用如圖15-1所示。

圖15-1  各種技術在Ajax引擎中的作用

整個交互通信過程是異步進行的，異步這個詞是指 Ajax應用軟件與主機服務器進行聯(lián)系的方式。如果使用傳統(tǒng)模式，每當用戶執(zhí)行某種操作、向服務器請求獲得新數(shù)據(jù)，Web瀏覽器就會更新當前窗口。圖 15-2展示了Ajax所采用的異步模式，瀏覽器不必等待用戶請求操作，也不必更新整個窗口就可以顯示新獲取的數(shù)據(jù)。只要來回傳送采用XML格式的數(shù)據(jù)， 在瀏覽器里面運行的JavaScript代碼就可以與服務器進行聯(lián)系。執(zhí)行結果到達時，才會通知瀏覽器客戶端，使之能夠在合適的時間顯示執(zhí)行結果。 JavaScript代碼還可以把樣式表加載到檢索到的數(shù)據(jù)上，然后在現(xiàn)有網(wǎng)頁的某個部分加以顯示。

圖15-2  Ajax的異步傳輸過程

Ajax的主要功能在于，改變?yōu)g覽器客戶端和服務器 端傳統(tǒng)的同步的交互通信方式為異步通信交互方式，從而豐富瀏覽器客戶端功能，解決瀏覽器頻繁刷新頁面等待數(shù)據(jù)傳輸?shù)膯栴}，改善Web應用程序的用戶體驗。 使用Ajax，就算不重載刷新Web頁面，用戶也可以順利的快速的得到Web服務器的數(shù)據(jù)。

典型的，看看微軟的Vitual Earth的功能（http://local.）。當用戶拖動地圖左上角的放大標尺的時候，Web頁上的地圖立即被放大，頁面卻沒有刷 新。當按住鼠標左鍵移動地圖的時候，地圖跟著移動。這個過程是快速的，而期間用戶并沒有向服務器提交表單或者單擊一個超鏈接。如果用傳統(tǒng)的Web應用程序 交互思維來理解，這個過程是難以理解的。這正是Ajax的魅力。

作為Web應用程序一部分的Ajax的生命周期更像 桌面系統(tǒng)的GUI，而DOM在扮演了類似GUI控件的角色。JavaScript腳本向DOM注冊事件監(jiān)聽器，操作DOM響應事件。在響應事件的過程 中，Web服務器可能被調用。這個調用是異步進行的，所以事件監(jiān)聽階段和事件響應階段是分開的。

下面是一個典型的瀏覽器中Ajax應用的生命周期。

— 用戶訪問：用戶訪問一個網(wǎng)站，比如單擊鏈接或者在瀏覽器中輸入網(wǎng)站的URL地址。

— 頁面初始化：頁面初始化加載，準備處理用戶輸入或者刷新頁面內容。

— 觸發(fā)瀏覽器事件：瀏覽器觸發(fā)一個事件，比如鼠標單擊或者按下鍵盤。

— 向服務器發(fā)起請求：瀏覽器向服務器發(fā)出一個請求。

— 服務器處理請求：服務器收到瀏覽器發(fā)出的請求，調用業(yè)務邏輯接口處理請求。

— 服務器響應請求：服務器響應瀏覽器發(fā)出的請求，將處理結果返回。這個返回結果傳遞給在發(fā)出請求時指定的請求調用函數(shù)。

— 瀏覽器更新頁面：請求調用函數(shù)根據(jù)響應結果更新DOM內容，比如DOM變量或者任何的JavaScript變量，更新頁面內容。

“觸發(fā)瀏覽器事件à向服務器發(fā)起請求à服務器處理請 求à服務器響應請求à瀏覽器更新頁面”這個過程是可以多次循環(huán)的，如圖15-3所示。在循環(huán)過程中通常會有很多的變量產(chǎn)生，很多事件也可能在客戶端解決而 不提交到服務器。有些Ajax應用的生命周期可能是短暫的，隨著用戶提交表單或者重新刷新頁面而結束。其他則持續(xù)呈現(xiàn)在瀏覽器上（用戶不重新刷新頁面，也 不提交表單），一直響應用戶的行為。

而在SVG中，Ajax使用變得更加簡單，它將采取如下的工作方式：

—  JavaScript事件觸發(fā)：用戶操作Web頁面上的某個控件或者文字鏈接，觸發(fā)一個JavaScript事件。比如單擊一個按鈕，或者自動請求一個頁面。

—  JavaScript 事件處理函數(shù)執(zhí)行，調用getURL函數(shù)：JavaScript事件被觸發(fā)，相應的事件處理函數(shù)即被調用。在getURL函數(shù) 中，XMLHttpRequest對象被初始化，并根據(jù)情況向服務器發(fā)出異步通信請求，將用戶的請求提交到服務器。只不過這個過程被封裝了，對開發(fā)者不可 見了。

圖15-3  Ajax的生命周期

— 服務器接收用戶請求：這個步驟與傳統(tǒng)的Web應用程序交互模式一致。服務器接收到用戶請求后，根據(jù)URL地址判斷用戶行為，響應用戶行為，并將響應結果以HTML/XHTML/XML的形式打印（Response）出來。

—  XMLHttpRequest接收服務器的響應數(shù)據(jù)：XMLHttpRequest檢測到服務器已經(jīng)將響應結果打印出來，即將響應結果以文本或者XML文檔的形式返回，賦予一個JavaScrip變量，在SVG中這個變量為“data”。

—  JavaScript調用DOM處理“data”，更新頁面內容：JavaScript調用DOM相應的方法，解析“data”，然后更新相應的頁面內容。

— 頁面被更新，一次Ajax處理過程結束。

這個工作方式和過程需要Ajax的各個組成技術 相互配合，Ajax的主要角色在于JavaScript事件觸發(fā)和響應、發(fā)起異步通信請求、接收返回的數(shù)據(jù)并更新Web頁面內容。而生成 HTML/XHTML/XML格式的數(shù)據(jù)的任務，由服務器完成。生成HTML/XHTML/XML格式的數(shù)據(jù)的方法，取決于Web應用程序所選擇的解決方 案，會有所不同。本書將使用微軟的.NET技術作為服務器端技術。