基于Prototype的文本框自動填充功能的實現(xiàn)

張玉葉

摘 要： 以醫(yī)院管理系統(tǒng)醫(yī)生開具藥方模塊中文本框自動填充功能的實現(xiàn)為例，詳細介紹了如何利用Prototype框架和基于文本的數(shù)據(jù)交換格式JSON實現(xiàn)文本框的自動填充功能，介紹了Prototype框架中實現(xiàn)AJAX的異步通信時用到的關(guān)鍵技術(shù)，給出了具體實現(xiàn)過程及主要代碼。實踐證明，基于AJAX的異步請求原理實現(xiàn)的文本框的自動填充功能，不但方便了醫(yī)護人員的使用，也大大提高了其工作效率，減少了病人的等待時間。

關(guān)鍵詞： AJAX； Prototype； JSON； 自動填充

中圖分類號：TP311 文獻標志碼：A 文章編號：1006-8228（2013）06-53-03

Implementation of automatic filling of texts based on Prototype

Zhang Yuye

（Dept. of computer， Jinan Vocational College， Jinan， Shandong 250014， China）

Abstract： Taking the function of automatic filling of text in module of prescription in the hospital management system as an example， it is explained in detail how to use the Prototype framework and text-based data interchange format JSON to realize automatic filling of texts. The key technology used to realize the asynchronous communication of AJAX in Prototype framework， the concrete process of realization and the main code are introduced. The practice has proved that the function of the automatic filling of texts based on AJAX asynchronous request principle is not only convenient for hospital workers， but also greatly improves the work efficiency， and thus reduces the waiting time of patients.

Key words： AJAX； Prototype； JSON； automatic filling

0 引言

隨著Web2.0技術(shù)的日漸成熟及其在網(wǎng)站開發(fā)中的廣泛應(yīng)用，出現(xiàn)了越來越多更人性化的功能，這些人性化的功能使得用戶在上網(wǎng)瀏覽時更加方便快捷，極大增強了用戶的使用體驗。其中比較受大家歡迎的一個功能就是文本框的自動填充功能。無論是在使用百度還是谷歌等搜索引擎的時候，當在搜索文本框中輸入內(nèi)容時就會自動在下面出現(xiàn)以輸入內(nèi)容為前綴的一些搜索提示供用戶選擇，這種文本框的自動填充功能極大地方便了用戶，其應(yīng)用也越來越廣泛。為提高醫(yī)院管理水平和工作效率，解決看病難的問題，眾多醫(yī)院也都紛紛開始辦公自動化。在醫(yī)院的自動化辦公管理系統(tǒng)中有多處用到文本框的自動填充功能，這些應(yīng)用不但方便了醫(yī)護人員的使用，同時也大大提高了他們的工作效率。本文以醫(yī)生開藥方模塊中的一個文本框自動填充功能的實現(xiàn)為例，詳細介紹其實現(xiàn)過程和用到的關(guān)鍵技術(shù)。

1 應(yīng)用背景和實現(xiàn)原理

本系統(tǒng)的使用對象是中醫(yī)醫(yī)院。中醫(yī)的醫(yī)生開具的一個藥方中可能有十幾種中草藥。傳統(tǒng)做法是將中草藥分類，提供一系列下拉列表框讓醫(yī)生從中進行選擇。這樣實現(xiàn)的弊端是需要將所有的數(shù)據(jù)都下載下來，既浪費服務(wù)器資源，同時響應(yīng)時間也較長[1]。為了提高醫(yī)生開具藥方的效率和減少病人的等待時間，利用AJAX的異步請求原理在系統(tǒng)中實現(xiàn)了一個文本框的自動填充功能。模塊界面中提供了一個文本框，供醫(yī)生輸入藥方中的每種草藥的簡稱，在輸入的時候每輸入一個字符系統(tǒng)就自動從后臺數(shù)據(jù)庫中查詢以文本框中輸入內(nèi)容為前綴的所有中草藥并將其顯示在文本框的下面，供醫(yī)生選擇（如圖1所示），這樣可大大提高醫(yī)生的輸入速度，從而縮短其開具藥方的時間，同時也減少了病人的等待時間，可有效緩解看病排長隊的問題。

圖1 文本框的自動填充功能

2 實現(xiàn)過程及用到的關(guān)鍵技術(shù)

整個系統(tǒng)的實現(xiàn)采用MVC開發(fā)模式，這種分層開發(fā)的模式有利于系統(tǒng)的重構(gòu)和代碼的重用，且層次清晰，易于分工合作開發(fā)和維護。開發(fā)時通常先從底層開始，逐層向上。

2.1 開發(fā)工具和運行環(huán)境

系統(tǒng)開發(fā)工具采用MyEclipse 8.6，JDK1.6，服務(wù)器采用MyEclipse 8.6本身自帶的MyEclipse Tomcat，后臺數(shù)據(jù)庫采用Oracle 10g。客戶端可以采用IE瀏覽器或FireFox瀏覽器等。

2.2 數(shù)據(jù)庫設(shè)計

在數(shù)據(jù)庫中建立一個用來存放中草藥名的表medicine，表結(jié)構(gòu)和表內(nèi)容分別如表1和表2所示。

表1 medicine的結(jié)構(gòu)

[列名＼&含義＼&ID＼&草藥簡稱＼&name＼&草藥全稱＼&]

表2 medicine的示例內(nèi)容

[ID＼&name＼&dh＼&大黃＼&dj＼&大薊＼&dj＼&大姜＼&dz＼&大棗＼&tch＼&天蟲＼&tl＼&天龍＼&tm＼&天麻＼&]

2.3 模型層實現(xiàn)

模型層主要用于數(shù)據(jù)處理，實現(xiàn)底層數(shù)據(jù)庫的基本操作。為了便于管理和體現(xiàn)MVC開發(fā)模式，文件按其所在的層存放在不同的包中。在當前項目src目錄中新建一db包，用于存放所有模型層的類文件。

2.3.1 數(shù)據(jù)庫的連接

在進行數(shù)據(jù)庫操作前先要建立與數(shù)據(jù)庫的連接，在db包中新建一DBUtil.java類文件，用于建立與數(shù)據(jù)庫的連接。與數(shù)據(jù)庫連接代碼通常為通用代碼，整個項目中只須編寫一次即可。只要后臺數(shù)據(jù)庫采用Oracle 10g，與數(shù)據(jù)庫連接的代碼基本都大同小異，只須根據(jù)實際情況替換一下里面的數(shù)據(jù)庫名、用戶名和密碼即可，代碼較為簡單，這里不再給出。

2.3.2 數(shù)據(jù)庫的查詢

在db包中再新建一類文件getContentJSON.java，用于從數(shù)據(jù)庫中根據(jù)輸入的草藥簡稱查詢相應(yīng)的草藥全稱，草藥信息存放在表medicine中，查詢返回的結(jié)果以JSON格式封裝。因為JSON數(shù)據(jù)封裝格式與XML數(shù)據(jù)封裝格式相比不但節(jié)省空間，而且解析速度較快[2-3]，所以在此采用JSON數(shù)據(jù)封裝格式而沒有采用XML數(shù)據(jù)封裝格式。getContentJSON.java文件主要代碼如下：

……

/*此處省略了須引入的包名*/

public class getContentJSON {

public String query（String search） {

StringBuffer suggestInfo=new StringBuffer（）；

suggestInfo.append（"{medicinesInfo：["）； //返回數(shù)據(jù)封裝成JSON格式

Connection conn=DBUtil.getCon（）；

Statement rst；

try {

rst=conn.createStatement（）；

ResultSet rs=rst.executeQuery（"select name from

medicine where ID like '"+search+"%' order by ID"）；

/*查找以輸入內(nèi)容為前綴的所有草藥名，采用模糊查詢實現(xiàn)*/

while（rs.next（）） {

suggestInfo.append（"{medicineName：'" + rs.getString

（"name"）+"'}，"）； }

suggestInfo.deleteCharAt（suggestInfo.length（）-1）；

//刪除最后一個逗號

suggestInfo.append（"]}"）；

} catch（Exception e） {

e.printStackTrace（）；

} finally {

DBUtil.close（）； }

return suggestInfo.toString（）； }

}

2.4 業(yè)務(wù)邏輯層實現(xiàn)

業(yè)務(wù)邏輯層的功能比較簡單，主要用于實現(xiàn)請求處理。同樣為了便于管理，在當前項目的src目錄中建一個servlet包，用于存放業(yè)務(wù)邏輯層的文件。在servlet包中新建一個servlet文件contentServletJSON.java，用以處理從客戶端發(fā)送來的請求。首先接收用戶在前臺頁面文本框中輸入的內(nèi)容，然后根據(jù)輸入的內(nèi)容調(diào)用數(shù)據(jù)庫查詢模塊，取得相應(yīng)的數(shù)據(jù)，最后將數(shù)據(jù)返回。

contentServletJSON中的doPost函數(shù)代碼如下：

public void doPost（HttpServletRequest request，

HttpServletResponse response）

throws ServletException， IOException {

response.setContentType（"text/html"）；

response.setCharacterEncoding（"gb2312"）；

String search=request.getParameter（"search"）；

String medicinesName=new getContentJSON（）.query（search）；

PrintWriter out=response.getWriter（）；

out.println（medicinesName）；

out.flush（）；

out.close（）； }

2.5 界面層的實現(xiàn)

界面層用于實現(xiàn)展示給用戶的前臺頁面。界面層文件存放在當前項目的webroot目錄中。在webroot目錄下新建一個html頁面autoComplete.html。此頁面完成的功能主要有兩個：一是呈現(xiàn)用戶界面，二是實現(xiàn)請求的異步發(fā)送和接收處理。本文省略了autoComplete.html頁面中一些常規(guī)內(nèi)容，只給出關(guān)鍵部分代碼。

2.5.1 用戶界面呈現(xiàn)部分

請輸入草藥簡稱：