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

15.1  什么是Ajax

Ajax (（Asynchronous JavaScript and XML)）并不是一項(xiàng)新的技術(shù)，而是多種技術(shù)的綜合，或者說(shuō)是一種設(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)動(dòng)態(tài)的顯示和交互。

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

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

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

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

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

圖15-2  Ajax的異步傳輸過(guò)程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖15-3  Ajax的生命周期

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

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

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

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

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