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