基于Ajax實現(xiàn)科技信息資源可視化研究

孫素華，高國棟

（1. 衡水學(xué)院 數(shù)學(xué)與計算機學(xué)院，河北 衡水 053000；2. 石家莊鐵道大學(xué) 信息科學(xué)與技術(shù)學(xué)院，河北 石家莊 050043）

基于Ajax實現(xiàn)科技信息資源可視化研究

孫素華1，高國棟2

（1. 衡水學(xué)院 數(shù)學(xué)與計算機學(xué)院，河北 衡水 053000；2. 石家莊鐵道大學(xué) 信息科學(xué)與技術(shù)學(xué)院，河北 石家莊 050043）

Ajax通過異步交互技術(shù)，提高了在B/S模式下服務(wù)器與客戶端之間的傳輸效率和響應(yīng)速度．在科技信息數(shù)據(jù)量與日俱增的今天，利用Ajax技術(shù)管理這些數(shù)據(jù)并且以可視化的形式展示在人們面前，有效地表現(xiàn)和發(fā)掘數(shù)字化信息中包含的信息特征，從而使人們可以高效地獲取信息所表達(dá)的知識．

Ajax；科技信息；可視化；Google Maps

1 Ajax原理及相關(guān)技術(shù)

Ajax(Asynchronous Java Script and XML)一詞最早在2005年由Adaptive Path公司的Garrett J J提出．Ajax綜合了 JavaScript、DOM、XMLHttpRequest、XMI和 XSTL等現(xiàn)有技術(shù)．其中 XML和 CSS、DOM、XMLHttpRequest和JavaScript是AJAX的核心技術(shù)[1]．

1.1 XML和CSS

XML（Extensible Markup Language）即可擴展標(biāo)記語言，它與 HTML一樣，都是標(biāo)準(zhǔn)通用標(biāo)記語言．XML是Internet環(huán)境中跨平臺的，依賴于內(nèi)容的技術(shù)，是當(dāng)前處理結(jié)構(gòu)化文檔信息的有力工具．?dāng)U展標(biāo)記語言 XML是一種簡單的數(shù)據(jù)存儲語言，使用一系列簡單的標(biāo)記描述數(shù)據(jù)，而這些標(biāo)記可以用方便的方式建立，雖然XML占用的空間比二進制數(shù)據(jù)要占用更多的空間，但XML極其簡單易于掌握和使用，它是Ajax技術(shù)標(biāo)準(zhǔn)中推薦使用的作為服務(wù)器與客戶端通信的數(shù)據(jù)格式[2]．

CSS（Cascading Style Sheet）是一組格式設(shè)置規(guī)則，用于控制Web頁面的外觀．通過使用CSS樣式設(shè)置頁面的格式，可將頁面的內(nèi)容與表現(xiàn)形式分離．頁面內(nèi)容存放在 HTML文檔中，而用于定義表現(xiàn)形式的 CSS規(guī)則則存放在另一個文件中或HTML文檔的某一部分，通常為文件頭部分．它在Ajax中CSS擔(dān)當(dāng)表現(xiàn)層的角色，近年來利用CSS和DIV成為頁面布局的主流趨勢，給開發(fā)人員和頁面設(shè)計人員提供了很好的方法．

1.2 DOM

文檔對象模型（Document Object Model，DOM）是一種用于HTML和XML文檔的編程接口．它給文檔提供了一種結(jié)構(gòu)化的表示方法，可以改變文檔的內(nèi)容和呈現(xiàn)方式．我們最為關(guān)心的是，DOM 把網(wǎng)頁和腳本以及其他的編程語言聯(lián)系了起來．用 JavaScript對網(wǎng)頁進行的所有操作都是通過 DOM 進行的．DOM 屬于瀏覽器，而不是JavaScript語言規(guī)范里的核心內(nèi)容．Ajax中JavaScript正是利用特定的方法來獲得DOM對象，從而實現(xiàn)對對象的動態(tài)交互與更新，即達(dá)到無刷新改變頁面狀態(tài)的效果[3]．

1.3 XMLHttpRequest

XMLHttpRequest是瀏覽器內(nèi)置的對象，它是整個 Ajax技術(shù)的核心部分．XMLHttpRequest 對象提供了對HTTP協(xié)議的完全的訪問，包括做出POST和HEAD請求以及普通的GET請求的能力．XMLHttpRequest可以同步或異步地返回Web服務(wù)器的響應(yīng)，并且能夠以文本或者一個DOM文檔的形式返回內(nèi)容．

1.4 JavaScript

JavaScript是一種基于對象和事件驅(qū)動并具有安全性能的腳本語言．這是一門被許多人熟知的編程語言，它擁有自己的編程標(biāo)準(zhǔn)，最主要的是它可以直接在客戶端進行一些事件的處理，充分地發(fā)揮了客戶端的運算能力，這樣就不需要將用戶所提交的簡單的請求傳到服務(wù)器處理再傳回來，從而大大減輕了服務(wù)器的負(fù)擔(dān)[4]．

2 Ajax工作流程

Ajax 基本上就是把 JavaScript技術(shù)和 XMLHttpRequest對象放在 Web表單和服務(wù)器之間．當(dāng)用戶填寫表單時，數(shù)據(jù)發(fā)送給一些JavaScript代碼而不是直接發(fā)送給服務(wù)器．相反，JavaScript代碼捕獲表單數(shù)據(jù)并向服務(wù)器發(fā)送請求．同時用戶屏幕上的表單也不會閃爍、消失或延遲．換句話說，JavaScript代碼在幕后發(fā)送請求，用戶甚至不知道請求的發(fā)出．更好的是，請求是異步發(fā)送的，就是說 JavaScript代碼（和用戶）不用等待服務(wù)器的響應(yīng)[5]．因此用戶可以繼續(xù)輸入數(shù)據(jù)，滾動屏幕和使用應(yīng)用程序．然后服務(wù)器將數(shù)據(jù)返回 JavaScript代碼，后者決定如何處理這些數(shù)據(jù)．它可以迅速更新表單數(shù)據(jù)，讓人感覺應(yīng)用程序是立即完成的，表單沒有提交或刷新而用戶得到了新數(shù)據(jù)．JavaScript代碼甚至可以對收到的數(shù)據(jù)執(zhí)行某種計算，再發(fā)送另一個請求，完全不需要用戶干預(yù)，這就是 XMLHttpRequest的強大之處[6]．它可以根據(jù)需要自行與服務(wù)器進行交互，用戶甚至可以完全不知道幕后發(fā)生的一切，結(jié)果就是類似于桌面應(yīng)用程序的動態(tài)、快速響應(yīng)、高交互性的體驗，但是背后又擁有互聯(lián)網(wǎng)的全部強大力量．其工作流程如圖1所示：

3 信息可視化相關(guān)理論研究

3.1 信息可視化基本含義

“信息可視化”這一術(shù)語最早出現(xiàn)1989年GRobertson，S．Card與J．Mackinlay的論文中，可以看作是從數(shù)據(jù)信息到可視化形式再到人的感知系統(tǒng)的可調(diào)節(jié)的映射[7]．目前信息可視化已成為一個與科學(xué)可視化并列的研究領(lǐng)域．科學(xué)可視化的研究內(nèi)容包括圖像生成和圖像理解兩部分．按其結(jié)合程度將可視化分為3個層次：一是后置處理(postprocessing)，即將科學(xué)和工程計算的結(jié)果解釋成可視圖形；二是實時跟蹤處理(tracking)，即圖形可視化顯示與計算過程同步進行；三是交互控制(steering)，表明在計算過程中根據(jù)顯示結(jié)果可隨時對模型和控制參數(shù)進行修改和引導(dǎo)．

3.2 信息可視化的基本特征信息可視化技術(shù)是現(xiàn)代信息管理技術(shù)的新成果之一，它具有以下主要特點：1）直觀形象性

信息可視化是通過生動、直觀、形象的圖形、圖像、影像、聲音、模型等方式，把各種信息展示給用戶，以便進行科技信息查詢和圖像分析．

2）多源數(shù)據(jù)的采集和集成性

運用信息可視化技術(shù)，可方便地接收與采集不同類型、不同介質(zhì)和不同格式的科技信息．不論它們被收集時的形式是圖形、圖像、文字、數(shù)字還是視頻，也不論它們的數(shù)據(jù)格式是否一致，都能用統(tǒng)一的數(shù)據(jù)庫進行管理，從而為多源數(shù)據(jù)的綜合分析提供便利[8]．

3）交互探討性

在大量數(shù)據(jù)中，交互方式有利于視覺思維．在探討分析的過程中，可以靈活檢索數(shù)據(jù)，可以改變信息交互方式．多源信息集成在一起，并用統(tǒng)一數(shù)據(jù)庫進行管理，同時具有較強的空間分析與查詢功能，因此可以方便地對多源信息進行對比、綜合、分析，從中獲得規(guī)律，以用于人們規(guī)劃、決策和經(jīng)營．

4）信息的動態(tài)性

科技信息在可視化形式下不僅是空間信息，還表現(xiàn)為信息的動態(tài)性，并且信息的動態(tài)表示和動態(tài)檢索也成為可能．

5）信息載體的多樣性

隨著多媒體技術(shù)的發(fā)展，發(fā)達(dá)信息不在局限于表格、圖形和文件，而拓展到圖像、聲音、動畫、視頻圖像、三維仿真乃至虛擬現(xiàn)實等[9]．

4 結(jié)合Google Maps實現(xiàn)科技信息可視化

4.1 Google Maps開發(fā)功能分析

Google Maps作為Google Earth的后續(xù)產(chǎn)品，雖然和Google Earth有著本質(zhì)上的不同，但是在Google的產(chǎn)品鏈上卻分擔(dān)著Google“三維空間搜索”相輔相成的角色．目前針對Google Maps的二次開發(fā)應(yīng)用正處于蓬勃發(fā)展的階段，國內(nèi)外都出現(xiàn)了不少這方面的應(yīng)用[10]．

Google公司于2005年推出了自己的Google Maps API，開發(fā)者可以利用它自行開發(fā)自己的Google Maps服務(wù)，而Google也可以通過API來對這些服務(wù)進行管理．開發(fā)者可以利用Google Maps API向公眾提供簡單而有效的地圖服務(wù)．可以嵌入大量的在線地圖和網(wǎng)絡(luò)服務(wù)，并且可以和數(shù)據(jù)庫結(jié)合起來，創(chuàng)建自己的應(yīng)用程序．

用戶點擊客戶端“搜索”按鈕時，會根據(jù)數(shù)據(jù)庫坐標(biāo)記錄以標(biāo)注的形式展示的地圖上，也可進行標(biāo)注點擊操作，會彈出一個信息框顯示該標(biāo)注的詳細(xì)信息．整個過程中沒有發(fā)生全頁面刷新．這就是 Ajax所帶來的頁面局部刷新的效果．當(dāng)客戶端向服務(wù)器端發(fā)送請求后，服務(wù)端返回給客戶端的信息只是客戶所需要的數(shù)據(jù)．在客戶等待響應(yīng)的過程中，客戶可以繼續(xù)在頁面上做其他操作，而不需要等待服務(wù)器端的響應(yīng)．基于 Ajax技術(shù)的科技信息可視化開發(fā)模型如圖2所示：

圖2 科技信息可視化開發(fā)模型

4.2 功能實現(xiàn)

4.2.1 導(dǎo)入Google Maps API庫文件和創(chuàng)建地圖容器

首先，必須在網(wǎng)頁中導(dǎo)人Google Maps API庫文件．在HTML文件的Head部分加入如下格式的代碼：然后在 HTML的 Body部分加入一個具有 id屬性的元素作為 Google地圖的容器(通常會使用 DIV元素)．另外，通過此元素還可以定義地圖大小和其他一些屬性：