摘 要： 隨著用戶對(duì)Internet網(wǎng)絡(luò)服務(wù)器提出更高的要求，傳統(tǒng)Web技術(shù)的同步請(qǐng)求-響應(yīng)系統(tǒng)架構(gòu)逐漸顯現(xiàn)出不足，其中最為突出的一點(diǎn)是每次客戶端更新信息、獲取數(shù)據(jù)時(shí)都要浪費(fèi)大量時(shí)間讀取整個(gè)頁(yè)面的數(shù)據(jù)。采用Ajax技術(shù)可以挖掘并開(kāi)發(fā)Web瀏覽器的潛力，借助MiniUI使用戶方便地為網(wǎng)站提供Ajax交互，改變傳統(tǒng)Web應(yīng)用和開(kāi)發(fā)模式，提供全新的用戶上網(wǎng)體驗(yàn)。
關(guān)鍵詞： Web技術(shù)；Ajax交互；MiniUI
0 引言
傳統(tǒng)Web開(kāi)發(fā)往往在頁(yè)面中嵌入服務(wù)端腳本代碼，如JSP、ASP、PHP等[1]。這種開(kāi)發(fā)方式很容易滋生一種傾向：習(xí)慣不好的程序員會(huì)把大量的業(yè)務(wù)邏輯代碼、數(shù)據(jù)庫(kù)訪問(wèn)代碼夾雜在頁(yè)面中，導(dǎo)致很難讀懂，不易維護(hù)。
服務(wù)端頁(yè)面會(huì)生成很多HTML內(nèi)容進(jìn)行界面展示，必須使用“Form”標(biāo)簽提交錄入的數(shù)據(jù)，這兩種操作都將刷新整個(gè)頁(yè)面[2]。如果服務(wù)端處理、數(shù)據(jù)庫(kù)操作、網(wǎng)絡(luò)加載等任何一個(gè)環(huán)節(jié)發(fā)生延遲，網(wǎng)頁(yè)將處于一種空白“假死”狀態(tài)，造成極差的用戶體驗(yàn)。
Ajax能刷新頁(yè)面局部?jī)?nèi)容可以不通過(guò)“Form”標(biāo)簽提交數(shù)據(jù)[3]。這意味著，在用戶查詢表格、提交表單時(shí)，可以在不刷新頁(yè)面的情況下與Web服務(wù)器交換數(shù)據(jù)，從而獲得良好的用戶體驗(yàn)。
狹義的Ajax僅僅只是一個(gè)數(shù)據(jù)交互技術(shù)，沒(méi)有與之配套的UI體系，一般僅僅為了解決個(gè)別場(chǎng)景的操作優(yōu)化。在狹義的Ajax開(kāi)發(fā)場(chǎng)景下，開(kāi)發(fā)者需要在服務(wù)端、客戶端分別處理數(shù)據(jù)交互的格式，并且需要編寫(xiě)基礎(chǔ)的界面UI，將獲取的數(shù)據(jù)內(nèi)容進(jìn)行UI填充，進(jìn)而在界面展現(xiàn)。這造成實(shí)際開(kāi)發(fā)的極大困難，提升用戶體驗(yàn)的同時(shí)，開(kāi)發(fā)的工作量大大增加，系統(tǒng)的穩(wěn)定性大大降低，很容易出現(xiàn)瀏覽器兼容不一致、性能變慢、內(nèi)存泄漏、布局錯(cuò)亂等問(wèn)題。而且，用戶體驗(yàn)的提升也是有限的，開(kāi)發(fā)者只能解決一些受到重點(diǎn)關(guān)注的操作場(chǎng)景，不能完整開(kāi)發(fā)出成為媲美C/S應(yīng)用界面風(fēng)格和操作習(xí)慣的應(yīng)用系統(tǒng)。
廣義的Ajax技術(shù)提供了一整套用于快速開(kāi)發(fā)的“富客戶端UI庫(kù)”，為數(shù)據(jù)交互提供快速的開(kāi)發(fā)機(jī)制，讓UI與數(shù)據(jù)的裝配更天然便捷。開(kāi)發(fā)者可以集中精力開(kāi)發(fā)業(yè)務(wù)功能，只需要簡(jiǎn)單的處理步驟，就能快速打造媲美C/S應(yīng)用系統(tǒng)的B/S軟件。
1 MiniUI使用介紹
一般來(lái)說(shuō)，使用MiniUI框架開(kāi)發(fā)Web應(yīng)用，只需要在Web頁(yè)面的head區(qū)域引用服務(wù)器端或本地JS庫(kù)文件即可。最新的MiniUI庫(kù)文件可以從http：//www.miniui.com/下載，該網(wǎng)站提供了支持不同開(kāi)發(fā)環(huán)境的MiniUI開(kāi)發(fā)包（.Net版本、java版本、PHP版本），開(kāi)發(fā)人員可以根據(jù)實(shí)際的開(kāi)發(fā)環(huán)境選擇合適的開(kāi)發(fā)包。使用該庫(kù)文件的語(yǔ)法如下（MiniUI庫(kù)文件名為boot.js，存放在網(wǎng)站根目錄下scripts文件夾中）：
<script src="scripts/boot.js"type="text/javascript"></script>
一般情況下還需要顯示MiniUI的樣式，否則頁(yè)面布局會(huì)有不規(guī)整的現(xiàn)象，這時(shí)要引入其css文件（css樣式文件名為demo.css，存放在網(wǎng)站根目錄下的css文件夾中），具體如下：
<link href="css/demo.css"rel="stylesheet"type="text/css"/>
在HTML文件的body區(qū)域只需要一行簡(jiǎn)單的代碼，就能實(shí)現(xiàn)一個(gè)漂亮的“刪除”按鈕顯示。具體的功能實(shí)現(xiàn)可以在JS中通過(guò)remove（）方法完成。
<a class="mini-button" iconCls="icon-remove" onclick="remove（）">刪除</a>
2 實(shí)例分析及實(shí)現(xiàn)代碼
通過(guò)MiniUI框架開(kāi)發(fā)Web頁(yè)面可以輕松實(shí)現(xiàn)頁(yè)面無(wú)需刷新為前提的各種功能，擁有良好的界面，為用戶提供更好的用戶體驗(yàn)[4-5]。下面用《西藏自治區(qū)高校人文社會(huì)科學(xué)研究項(xiàng)目管理系統(tǒng)》的開(kāi)發(fā)作為實(shí)際的例子來(lái)簡(jiǎn)單說(shuō)明MiniUI的使用，服務(wù)器端開(kāi)發(fā)語(yǔ)言使用Java[6]。
2.1 設(shè)計(jì)思路
HTML頁(yè)面包含一個(gè)tool-bar工具欄和一個(gè)datagrid數(shù)據(jù)網(wǎng)格列表，工具欄負(fù)責(zé)具體的增加、刪除、查詢等操作（以刪除為例），datagrid控件負(fù)責(zé)顯示從數(shù)據(jù)庫(kù)中讀取的相關(guān)數(shù)據(jù)，可根據(jù)每頁(yè)顯示的條數(shù)自動(dòng)進(jìn)行分頁(yè)顯示，包括當(dāng)前頁(yè)和總頁(yè)數(shù)，并內(nèi)置了前一頁(yè)、后一頁(yè)、首頁(yè)、尾頁(yè)、總條數(shù)統(tǒng)計(jì)等功能。打開(kāi)頁(yè)面時(shí)數(shù)據(jù)直接加載至列表中顯示，執(zhí)行刪除操作后頁(yè)面也無(wú)需刷新，操作后的新數(shù)據(jù)直接顯示在頁(yè)面中，同時(shí)數(shù)據(jù)條數(shù)及其總頁(yè)數(shù)也會(huì)隨之變化。效果圖如圖1所示。
2.2 HTML頁(yè)面主要代碼及其分析
<a class="mini-button" iconCls="icon-remove" onclick="remove（）">刪除</a>
<div id="datagrid1" class="mini-datagrid" style="width：95%；height：310px；" pageSize="10" allowResize="true" url="psmanagerservletzyp?method=getPsList" idField="PSID" multiSelect="true" showSummaryRow="true">
首先通過(guò)mini-button在mini-toolbar工具欄中定義一個(gè)“刪除”按鈕，然后通過(guò)mini-datagrid實(shí)現(xiàn)頁(yè)面列表的展現(xiàn)。在上面的HTML代碼中，MiniUI對(duì)傳統(tǒng)HTML頁(yè)面控件進(jìn)行了封裝升級(jí)。比如傳統(tǒng)開(kāi)發(fā)頁(yè)面列表是通過(guò)table來(lái)實(shí)現(xiàn)的，需要開(kāi)發(fā)人員編寫(xiě)pagebean，每新增或者刪除一條記錄，都要判斷總記錄數(shù)及每頁(yè)顯示的條數(shù)來(lái)計(jì)算總頁(yè)數(shù)，而MiniUI則不再需要開(kāi)發(fā)人員去完成這些細(xì)節(jié)，mini-datagrid內(nèi)置了pagebean需要實(shí)現(xiàn)的所有功能，使開(kāi)發(fā)人員能有更多的精力去實(shí)現(xiàn)更多的功能，有效縮短工期。mini-datagrid只需要設(shè)置一個(gè)URL就能自動(dòng)訪問(wèn)后臺(tái)程序，完成數(shù)據(jù)的讀取和顯示。
2.3 PsManager.js部分代碼及其分析
mini.parse（）；
var grid=mini.get（"datagrid1"）；
grid.load（）；
function remove（）{
$.ajax（{
url："psmanagerservletzyp method=DelPs&psid="+id，
success： function（text）{
var res=String（$.trim（text））；
if（res.indexOf（"DeleteSuccess"）!=-1）{
grid.loading（"刪除成功！"，"刪除成功"）；
setTimeout（function（）{grid.reload（）；}， 1000）；
}
if（res.indexOf（"DeleteFail"）!=-1）{
grid.loading（"刪除失??！"，"刪除失敗"）；
setTimeout（function（）{grid.reload（）；}， 1000）；
}
}
在上面的JS代碼中，mini-datagrid只需要load（）方法即可通過(guò)URL地址直接完成后臺(tái)數(shù)據(jù)的加載。而刪除操作也因?yàn)閙ini-datagrid的multiSelect屬性為true而支持同時(shí)刪除多條記錄，MiniUI對(duì)HTTPRequest對(duì)象進(jìn)行封裝，同時(shí)提供了Ajax交互方式，通過(guò)URL設(shè)置執(zhí)行后臺(tái)程序，根據(jù)后臺(tái)返回的字符串判斷刪除是否成功。
2.4 后臺(tái)處理的Servlet核心代碼及其分析
HashMap result=manager.getPsList（pageIndex，pageSize，sortField，sortOrder）；
String json=test.JSON.Encode（result）；
out.println（json）；
在上面的Java代碼中，可以直接通過(guò)parameter參數(shù)獲取到mini-datagrid的分頁(yè)參數(shù)和排序參數(shù)，執(zhí)行具體的方法獲取數(shù)據(jù)庫(kù)數(shù)據(jù)之后，通過(guò)MiniUI的test.JSON.Encode（）方法將取得的數(shù)據(jù)編碼成JSON格式之后輸出至頁(yè)面即可。
3 結(jié)論
通過(guò)以上對(duì)MiniUI前臺(tái)開(kāi)發(fā)的實(shí)踐可以了解到，使用MiniUI技術(shù)可以使Web頁(yè)面業(yè)務(wù)邏輯更加輕量級(jí)，使B/S模式Web前臺(tái)程序的運(yùn)行速度也更快，這極大地改善了用戶的瀏覽Web的體驗(yàn)，使用戶更加愿意停留在本文所設(shè)計(jì)的Web頁(yè)面。
參考文獻(xiàn)
[1] 張玲玲.深入體驗(yàn)Java Web項(xiàng)目開(kāi)發(fā)[M].北京：清華大學(xué)出版社，2011.
[2] ZELDMAN J.網(wǎng)站重構(gòu)——應(yīng)用Web標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)（第3版）[M].傅捷，譯.北京：電子工業(yè)出版社，2011.
[3] 辛剛，王清心.基于Ajax的Java Web應(yīng)用的開(kāi)發(fā)與研究[J].山西電子技術(shù)，2010（1）：57-58.
[4] 王正玉，李斌.基于DAO模式的Hibernate在Java Web開(kāi)發(fā)中的應(yīng)用[J].微型機(jī)與應(yīng)用，2015，34（11）：14-17.
[5] 張耀民.SSH框架在Web項(xiàng)目開(kāi)發(fā)中的構(gòu)建和應(yīng)用實(shí)踐[J].微型機(jī)與應(yīng)用，2013，32（15）：18-21.
[6] BLOCH J.Effective Java中文版（第2版）[M].楊青花，譯.北京：機(jī)械工業(yè)出版社，2009.