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

15.1  什么是Ajax

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

— 使用XHTML和CSS實(shí)現(xiàn)標(biāo)準(zhǔn)化的呈現(xiàn)界面。

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

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

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

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

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

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

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

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

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

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

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

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

— 頁面初始化：頁面初始化加載，準(zhǔn)備處理用戶輸入或者刷新頁面內(nèi)容。

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

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

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

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

— 瀏覽器更新頁面：請求調(diào)用函數(shù)根據(jù)響應(yīng)結(jié)果更新DOM內(nèi)容，比如DOM變量或者任何的JavaScript變量，更新頁面內(nèi)容。

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

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

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

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

圖15-3  Ajax的生命周期

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

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

—  JavaScript調(diào)用DOM處理“data”，更新頁面內(nèi)容：JavaScript調(diào)用DOM相應(yīng)的方法，解析“data”，然后更新相應(yīng)的頁面內(nèi)容。

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

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