這一章，將介紹SVG如何同數據庫進(jìn)行交互，程序自動(dòng)從數據庫獲得相關(guān)數據，并且使用SVG作為數據的展現手段。這樣SVG更加符合表現層的要求，數據由專(zhuān)門(mén)的數據庫保存和處理，盡量減少SVG處理商業(yè)邏輯運算，甚至一些SVG的配置項也可以保存在數據庫中，供載入SVG文檔的時(shí)候使用，可以提高SVG的靈活性和可配置性。
Ajax (（AsynchronousJavaScript and XML)）并不是一項新的技術(shù)，而是多種技術(shù)的綜合，或者說(shuō)是一種設計方式，這些技術(shù)包括JavaScript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest等技術(shù)。其中：
— 使用XHTML和CSS實(shí)現標準化的呈現界面。
— 使用DOM實(shí)現動(dòng)態(tài)的顯示和交互。
— 使用XMLHttpRequest實(shí)現與服務(wù)器的異步通信(（ASV3中由“getURL”函數提供該功能)）。
— 使用JavaScript將XHTML、DOM、XML、XMLHttpRequest綁定。
各種技術(shù)在A(yíng)jax引擎中的作用如圖15-1所示。
圖15-1 各種技術(shù)在A(yíng)jax引擎中的作用
整個(gè)交互通信過(guò)程是異步進(jìn)行的，異步這個(gè)詞是指Ajax應用軟件與主機服務(wù)器進(jìn)行聯(lián)系的方式。如果使用傳統模式，每當用戶(hù)執行某種操作、向服務(wù)器請求獲得新數據，Web瀏覽器就會(huì )更新當前窗口。圖15-2展示了Ajax所采用的異步模式，瀏覽器不必等待用戶(hù)請求操作，也不必更新整個(gè)窗口就可以顯示新獲取的數據。只要來(lái)回傳送采用XML格式的數據，在瀏覽器里面運行的JavaScript代碼就可以與服務(wù)器進(jìn)行聯(lián)系。執行結果到達時(shí)，才會(huì )通知瀏覽器客戶(hù)端，使之能夠在合適的時(shí)間顯示執行結果。JavaScript代碼還可以把樣式表加載到檢索到的數據上，然后在現有網(wǎng)頁(yè)的某個(gè)部分加以顯示。
圖15-2 Ajax的異步傳輸過(guò)程
Ajax的主要功能在于，改變?yōu)g覽器客戶(hù)端和服務(wù)器端傳統的同步的交互通信方式為異步通信交互方式，從而豐富瀏覽器客戶(hù)端功能，解決瀏覽器頻繁刷新頁(yè)面等待數據傳輸的問(wèn)題，改善Web應用程序的用戶(hù)體驗。使用Ajax，就算不重載刷新Web頁(yè)面，用戶(hù)也可以順利的快速的得到Web服務(wù)器的數據。
典型的，看看微軟的VitualEarth的功能（http://local.live.com）。當用戶(hù)拖動(dòng)地圖左上角的放大標尺的時(shí)候，Web頁(yè)上的地圖立即被放大，頁(yè)面卻沒(méi)有刷新。當按住鼠標左鍵移動(dòng)地圖的時(shí)候，地圖跟著(zhù)移動(dòng)。這個(gè)過(guò)程是快速的，而期間用戶(hù)并沒(méi)有向服務(wù)器提交表單或者單擊一個(gè)超鏈接。如果用傳統的Web應用程序交互思維來(lái)理解，這個(gè)過(guò)程是難以理解的。這正是Ajax的魅力。
作為Web應用程序一部分的Ajax的生命周期更像桌面系統的GUI，而DOM在扮演了類(lèi)似GUI控件的角色。JavaScript腳本向DOM注冊事件監聽(tīng)器，操作DOM響應事件。在響應事件的過(guò)程中，Web服務(wù)器可能被調用。這個(gè)調用是異步進(jìn)行的，所以事件監聽(tīng)階段和事件響應階段是分開(kāi)的。
下面是一個(gè)典型的瀏覽器中Ajax應用的生命周期。
— 用戶(hù)訪(fǎng)問(wèn)：用戶(hù)訪(fǎng)問(wèn)一個(gè)網(wǎng)站，比如單擊鏈接或者在瀏覽器中輸入網(wǎng)站的URL地址。
— 頁(yè)面初始化：頁(yè)面初始化加載，準備處理用戶(hù)輸入或者刷新頁(yè)面內容。
— 觸發(fā)瀏覽器事件：瀏覽器觸發(fā)一個(gè)事件，比如鼠標單擊或者按下鍵盤(pán)。
— 向服務(wù)器發(fā)起請求：瀏覽器向服務(wù)器發(fā)出一個(gè)請求。
— 服務(wù)器處理請求：服務(wù)器收到瀏覽器發(fā)出的請求，調用業(yè)務(wù)邏輯接口處理請求。
— 服務(wù)器響應請求：服務(wù)器響應瀏覽器發(fā)出的請求，將處理結果返回。這個(gè)返回結果傳遞給在發(fā)出請求時(shí)指定的請求調用函數。
— 瀏覽器更新頁(yè)面：請求調用函數根據響應結果更新DOM內容，比如DOM變量或者任何的JavaScript變量，更新頁(yè)面內容。
“觸發(fā)瀏覽器事件à向服務(wù)器發(fā)起請求à服務(wù)器處理請求à服務(wù)器響應請求à瀏覽器更新頁(yè)面”這個(gè)過(guò)程是可以多次循環(huán)的，如圖15-3所示。在循環(huán)過(guò)程中通常會(huì )有很多的變量產(chǎn)生，很多事件也可能在客戶(hù)端解決而不提交到服務(wù)器。有些Ajax應用的生命周期可能是短暫的，隨著(zhù)用戶(hù)提交表單或者重新刷新頁(yè)面而結束。其他則持續呈現在瀏覽器上（用戶(hù)不重新刷新頁(yè)面，也不提交表單），一直響應用戶(hù)的行為。
而在SVG中，Ajax使用變得更加簡(jiǎn)單，它將采取如下的工作方式：
— JavaScript事件觸發(fā)：用戶(hù)操作Web頁(yè)面上的某個(gè)控件或者文字鏈接，觸發(fā)一個(gè)JavaScript事件。比如單擊一個(gè)按鈕，或者自動(dòng)請求一個(gè)頁(yè)面。
— JavaScript事件處理函數執行，調用getURL函數：JavaScript事件被觸發(fā)，相應的事件處理函數即被調用。在getURL函數中，XMLHttpRequest對象被初始化，并根據情況向服務(wù)器發(fā)出異步通信請求，將用戶(hù)的請求提交到服務(wù)器。只不過(guò)這個(gè)過(guò)程被封裝了，對開(kāi)發(fā)者不可見(jiàn)了。
圖15-3 Ajax的生命周期
— 服務(wù)器接收用戶(hù)請求：這個(gè)步驟與傳統的Web應用程序交互模式一致。服務(wù)器接收到用戶(hù)請求后，根據URL地址判斷用戶(hù)行為，響應用戶(hù)行為，并將響應結果以HTML/XHTML/XML的形式打?。≧esponse）出來(lái)。
— XMLHttpRequest接收服務(wù)器的響應數據：XMLHttpRequest檢測到服務(wù)器已經(jīng)將響應結果打印出來(lái)，即將響應結果以文本或者XML文檔的形式返回，賦予一個(gè)JavaScrip變量，在SVG中這個(gè)變量為“data”。
— JavaScript調用DOM處理“data”，更新頁(yè)面內容：JavaScript調用DOM相應的方法，解析“data”，然后更新相應的頁(yè)面內容。
— 頁(yè)面被更新，一次Ajax處理過(guò)程結束。
這個(gè)工作方式和過(guò)程需要Ajax的各個(gè)組成技術(shù)相互配合，Ajax的主要角色在于JavaScript事件觸發(fā)和響應、發(fā)起異步通信請求、接收返回的數據并更新Web頁(yè)面內容。而生成HTML/XHTML/XML格式的數據的任務(wù)，由服務(wù)器完成。生成HTML/XHTML/XML格式的數據的方法，取決于Web應用程序所選擇的解決方案，會(huì )有所不同。本書(shū)將使用微軟的.NET技術(shù)作為服務(wù)器端技術(shù)。
聯(lián)系客服
