Ajax技術(shù)在療養(yǎng)院信息系統(tǒng)目錄樹菜單中的應(yīng)用

陳燕群　張華貴

摘要：隨著網(wǎng)絡(luò)技術(shù)，WEB技術(shù)的高速發(fā)展，網(wǎng)頁上的動(dòng)態(tài)交互與感知已經(jīng)被越來越多的用戶所喜歡并接受，原來只有在客戶端程序才能實(shí)現(xiàn)的交互與動(dòng)態(tài)響應(yīng)，現(xiàn)在利用JavaScript和Ajax技術(shù)也能在WEB程序中實(shí)現(xiàn)了。通過這兩種技術(shù)的結(jié)合，使得開發(fā)者構(gòu)建的WEB程序能夠像WINDOWS中的桌面程序一樣自由、豐富、更好的響應(yīng)用戶，而不用每次都需要提交頁面，刷新后才能看到結(jié)果。文章通過對(duì)Ajax技術(shù)的開發(fā)研究，成功地運(yùn)用到療養(yǎng)院信息系統(tǒng)中，提高了頁面的響應(yīng)速度。

關(guān)鍵詞：Ajax技術(shù)；JavaScript；WEB信息系統(tǒng)

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2017）22-0114-02

Ajax的全稱是Asynchronous iavascript and XML其中，Asyn-chronous的意思是異步，這是一種利用異步調(diào)用的方式解決WEB頁面局部刷新的技術(shù)，無論你的瀏覽器是哪種，它都可以很好的執(zhí)行，而服務(wù)端的開發(fā)語言無論是PHP、ASP、JSP、.NET等語言開發(fā)的WEB程序都能很好地融合到里面。異步交互的意思就是：利用iavascript來技術(shù)實(shí)現(xiàn)瀏覽器和服務(wù)器間的數(shù)據(jù)交互，就是頁面程序無需重新載入或刷新，就可以向服務(wù)器端發(fā)送請(qǐng)求，服務(wù)器端響應(yīng)后返回所需數(shù)據(jù)，返回的數(shù)據(jù)可以是XML、文本、JsON等格式，利用iavascript對(duì)返回的數(shù)據(jù)進(jìn)行解析和處理，顯示在用戶界面。

1Ajax技術(shù)及其核心對(duì)象

我們都知道Ajax使用的是JavaScript技術(shù)，這是一種客戶端使用的腳本語言，在網(wǎng)頁中應(yīng)用比較廣泛，而且支持跨平臺(tái)運(yùn)行。Ajax主要是利用JavaScript和XMLHttpRequest核心對(duì)象，發(fā)及DOM、XML、JSON來響應(yīng)和操作數(shù)據(jù)。

1.1Don

DOM就是英文（Document Object Model）的縮寫，全稱叫文檔對(duì)象模型，它提供了整個(gè)網(wǎng)頁文件內(nèi)容的表述結(jié)構(gòu)。通過DOM，瀏覽器把頁面看做是一組對(duì)象，程序員就可以操作對(duì)象中所有的成員，如建立或更改對(duì)象中成員的名稱、ID、響應(yīng)的事件，甚至通過與腳本語言的結(jié)合可以實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)顯示、隱藏、存儲(chǔ)，增加或者修改成員，使得網(wǎng)頁與用戶的交互性大大增強(qiáng)。

1.2XML

DOM就是英文（Extensible Markup Language）的縮寫，全稱叫可擴(kuò)展標(biāo)記語言，這是一種標(biāo)準(zhǔn)的通用的一種標(biāo)記語言，用于將電子文件進(jìn)行結(jié)構(gòu)化標(biāo)記，并且標(biāo)記的數(shù)據(jù)或文檔可以很方便地進(jìn)行數(shù)據(jù)共享，而且它是一種跨平臺(tái)的標(biāo)記語言，使得程序員可以在各種環(huán)境中進(jìn)行程序開發(fā)并共享其數(shù)據(jù)。

1.3JSON

JSON就是英文（JavaScript Object Notationl的縮寫，它是一種輕量級(jí)的數(shù)據(jù)交換格式，說得直白一些，它就是將一組數(shù)據(jù)以標(biāo)準(zhǔn)化的方式返回給程序員，這種標(biāo)準(zhǔn)化的格式易于閱讀和編程，通過Ajax返回的這種JsON數(shù)據(jù)，能夠更快的被解析和渲染，響應(yīng)速度更快。

1.4XMLHttpRequest

XMLHttpRequest是Ajax技術(shù)的核心對(duì)象，它是通過瀏覽器中的JavaScript腳本程序來與服務(wù)器進(jìn)行通信，并且在頁面不刷新時(shí)就可以獲取到服務(wù)器數(shù)據(jù)，并返回給用戶的頁面端，也可以直接向服務(wù)器提交數(shù)據(jù)。

通過上面幾種技術(shù)的混合運(yùn)行，就可以完全實(shí)現(xiàn)Ajax，并實(shí)時(shí)操作用戶端頁面。

2建立Ajax應(yīng)用代碼分析

對(duì)于一個(gè)Ajax程序來說，有些代碼是必要的，即便你使用JQUERY或別的JAVASCRIPT框架，其中依然要使用類似下面這些代碼。下面我們來看這個(gè)函數(shù)：

在Ajax請(qǐng)求對(duì)象中，有一些專用的屬性，這里來介紹一下常用屬性的作用和功能。

readyState：服務(wù)器處理請(qǐng)求時(shí)會(huì)作出多次響應(yīng)，這個(gè)屬性用來指示請(qǐng)求處理的情況。共有四種情況，0表示未初始化，尚未調(diào)用open（）方法；1表示啟動(dòng)，尚未調(diào)用send（）方法；2表示已發(fā)送，但尚未收到響應(yīng)；3表示接收，已經(jīng)收到部分響應(yīng)數(shù)據(jù)；4表示已完成，收到全部響應(yīng)數(shù)據(jù)。

responseXML：如果服務(wù)器將數(shù)據(jù)作為XML發(fā)回來，這個(gè)屬性表示發(fā)回的數(shù)據(jù)格式包含XML的樹形結(jié)構(gòu)，其中也包含服務(wù)器的響應(yīng)。

responseText：服務(wù)器的響應(yīng)數(shù)據(jù)會(huì)存儲(chǔ)在responseText中，也就是文本文件了。

status和statusText：這兩個(gè)屬性用來告訴你的服務(wù)器所返回的HTTP的狀態(tài)，如果是200，就表示“OK”，服務(wù)器已準(zhǔn)備就緒了，如果是404就表示“未找到”，服務(wù)器無法找到所需請(qǐng)求的URL地址。

orrreadystatechange：這個(gè)屬性用于執(zhí)行服務(wù)器響應(yīng)請(qǐng)求時(shí)需要的回調(diào)函數(shù)。

下面，我們就來具體分析Ajax技術(shù)在療養(yǎng)院信息系統(tǒng)的讀取目錄樹的主要應(yīng)用方式。

3療養(yǎng)院信息系統(tǒng)目錄樹的研究分析

在療養(yǎng)院信息系統(tǒng)中，目錄樹的顯示方式如下圖所示：

首先，我們來分析一下為何要在目錄樹里采用Ajax技術(shù)，在這個(gè)信息系統(tǒng)的目錄樹中，每個(gè)療養(yǎng)員都有相同的各種檢查記錄功能，通過權(quán)限的設(shè)置可以增加或刪除其權(quán)限菜單，有時(shí)不同的醫(yī)師具有不同的權(quán)限菜單，多的時(shí)候可能會(huì)多達(dá)二十多種功能。如果療養(yǎng)員的人數(shù)較多，如有時(shí)多達(dá)二百多人時(shí)，所有人的功能菜單相加起來就會(huì)很龐大，提取數(shù)據(jù)速度會(huì)很慢，有時(shí)多達(dá)十分多鐘，為了改變這種方式，所以采用Ajax技術(shù)，首先將每個(gè)療養(yǎng)員提取出來，然后再點(diǎn)擊每個(gè)“+”加號(hào)，動(dòng)態(tài)載入所需的功能菜單，通過這種方式，大大節(jié)約了瀏覽器載人頁面的時(shí)間，也減少了網(wǎng)絡(luò)開銷，原來需要十多分鐘載人的頁面，現(xiàn)在幾秒鐘就可以完全載人了。

數(shù)據(jù)庫系統(tǒng)我們使用的是ORACLEllg，由于目錄樹中的功能菜單層級(jí)比較多，所以設(shè)計(jì)時(shí)按照下圖來設(shè)計(jì)：

NO序號(hào)為頂層節(jié)點(diǎn)，NAME為節(jié)點(diǎn)的名稱，PARENTNO為父節(jié)點(diǎn)，也就是它的上一級(jí)菜單的NO號(hào)，DISPLAY_ORDER為顯示的序號(hào)，序號(hào)越小顯示位置越靠前。MODELID數(shù)據(jù)庫中的模板號(hào)，本項(xiàng)功能菜單的模板。URL本項(xiàng)功能菜單的地址。FLAG執(zhí)行標(biāo)志，DEFT能夠執(zhí)行此項(xiàng)功能的科室。對(duì)于目錄樹的頂層療養(yǎng)員姓名，通過數(shù)據(jù)庫的SQL查詢語句可以一次性取出來，目錄樹的功能菜單則通過NO和PARENTNO序號(hào)使用遞歸算法來提取出父子關(guān)系放入一個(gè)視圖中，然后根據(jù)需要提出異步Ajax請(qǐng)求，在需要時(shí)返回子功能菜單名稱以及URL地址，這樣就完成了整個(gè)目錄樹的異步請(qǐng)求，并成功讀取各級(jí)子菜單功能。endprint