摘 要： 随着用户对Internet网络服务器提出更高的要求，传统Web技术的同步请求-响应系统架构逐渐显现出不足，其中最为突出的一点是每次客户端更新信息、获取数据时都要浪费大量时间读取整个页面的数据。采用Ajax技术可以挖掘并开发Web浏览器的潜力，借助MiniUI使用户方便地为网站提供Ajax交互，改变传统Web应用和开发模式，提供全新的用户上网体验。
关键词： Web技术；Ajax交互；MiniUI
0 引言
传统Web开发往往在页面中嵌入服务端脚本代码，如JSP、ASP、PHP等[1]。这种开发方式很容易滋生一种倾向：习惯不好的程序员会把大量的业务逻辑代码、数据库访问代码夹杂在页面中，导致很难读懂，不易维护。
服务端页面会生成很多HTML内容进行界面展示，必须使用“Form”标签提交录入的数据，这两种操作都将刷新整个页面[2]。如果服务端处理、数据库操作、网络加载等任何一个环节发生延迟，网页将处于一种空白“假死”状态，造成极差的用户体验。
Ajax能刷新页面局部内容可以不通过“Form”标签提交数据[3]。这意味着，在用户查询表格、提交表单时，可以在不刷新页面的情况下与Web服务器交换数据，从而获得良好的用户体验。
狭义的Ajax仅仅只是一个数据交互技术，没有与之配套的UI体系，一般仅仅为了解决个别场景的操作优化。在狭义的Ajax开发场景下，开发者需要在服务端、客户端分别处理数据交互的格式，并且需要编写基础的界面UI，将获取的数据内容进行UI填充，进而在界面展现。这造成实际开发的极大困难，提升用户体验的同时，开发的工作量大大增加，系统的稳定性大大降低，很容易出现浏览器兼容不一致、性能变慢、内存泄漏、布局错乱等问题。而且，用户体验的提升也是有限的，开发者只能解决一些受到重点关注的操作场景，不能完整开发出成为媲美C/S应用界面风格和操作习惯的应用系统。
广义的Ajax技术提供了一整套用于快速开发的“富客户端UI库”，为数据交互提供快速的开发机制，让UI与数据的装配更天然便捷。开发者可以集中精力开发业务功能，只需要简单的处理步骤，就能快速打造媲美C/S应用系统的B/S软件。
1 MiniUI使用介绍
一般来说，使用MiniUI框架开发Web应用，只需要在Web页面的head区域引用服务器端或本地JS库文件即可。最新的MiniUI库文件可以从http：//www.miniui.com/下载，该网站提供了支持不同开发环境的MiniUI开发包（.Net版本、java版本、PHP版本），开发人员可以根据实际的开发环境选择合适的开发包。使用该库文件的语法如下（MiniUI库文件名为boot.js，存放在网站根目录下scripts文件夹中）：
<script src="scripts/boot.js"type="text/javascript"></script>
一般情况下还需要显示MiniUI的样式，否则页面布局会有不规整的现象，这时要引入其css文件（css样式文件名为demo.css，存放在网站根目录下的css文件夹中），具体如下：
<link href="css/demo.css"rel="stylesheet"type="text/css"/>
在HTML文件的body区域只需要一行简单的代码，就能实现一个漂亮的“删除”按钮显示。具体的功能实现可以在JS中通过remove（）方法完成。
<a class="mini-button" iconCls="icon-remove" onclick="remove（）">删除</a>
2 实例分析及实现代码
通过MiniUI框架开发Web页面可以轻松实现页面无需刷新为前提的各种功能，拥有良好的界面，为用户提供更好的用户体验[4-5]。下面用《西藏自治区高校人文社会科学研究项目管理系统》的开发作为实际的例子来简单说明MiniUI的使用，服务器端开发语言使用Java[6]。
2.1 设计思路
HTML页面包含一个tool-bar工具栏和一个datagrid数据网格列表，工具栏负责具体的增加、删除、查询等操作（以删除为例），datagrid控件负责显示从数据库中读取的相关数据，可根据每页显示的条数自动进行分页显示，包括当前页和总页数，并内置了前一页、后一页、首页、尾页、总条数统计等功能。打开页面时数据直接加载至列表中显示，执行删除操作后页面也无需刷新，操作后的新数据直接显示在页面中，同时数据条数及其总页数也会随之变化。效果图如图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实现页面列表的展现。在上面的HTML代码中，MiniUI对传统HTML页面控件进行了封装升级。比如传统开发页面列表是通过table来实现的，需要开发人员编写pagebean，每新增或者删除一条记录，都要判断总记录数及每页显示的条数来计算总页数，而MiniUI则不再需要开发人员去完成这些细节，mini-datagrid内置了pagebean需要实现的所有功能，使开发人员能有更多的精力去实现更多的功能，有效缩短工期。mini-datagrid只需要设置一个URL就能自动访问后台程序，完成数据的读取和显示。
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地址直接完成后台数据的加载。而删除操作也因为mini-datagrid的multiSelect属性为true而支持同时删除多条记录，MiniUI对HTTPRequest对象进行封装，同时提供了Ajax交互方式，通过URL设置执行后台程序，根据后台返回的字符串判断删除是否成功。
2.4 后台处理的Servlet核心代码及其分析
HashMap result=manager.getPsList（pageIndex，pageSize，sortField，sortOrder）；
String json=test.JSON.Encode（result）；
out.println（json）；
在上面的Java代码中，可以直接通过parameter参数获取到mini-datagrid的分页参数和排序参数，执行具体的方法获取数据库数据之后，通过MiniUI的test.JSON.Encode（）方法将取得的数据编码成JSON格式之后输出至页面即可。
3 结论
通过以上对MiniUI前台开发的实践可以了解到，使用MiniUI技术可以使Web页面业务逻辑更加轻量级，使B/S模式Web前台程序的运行速度也更快，这极大地改善了用户的浏览Web的体验，使用户更加愿意停留在本文所设计的Web页面。
参考文献
[1] 张玲玲.深入体验Java Web项目开发[M].北京：清华大学出版社，2011.
[2] ZELDMAN J.网站重构——应用Web标准进行设计（第3版）[M].傅捷，译.北京：电子工业出版社，2011.
[3] 辛刚，王清心.基于Ajax的Java Web应用的开发与研究[J].山西电子技术，2010（1）：57-58.
[4] 王正玉，李斌.基于DAO模式的Hibernate在Java Web开发中的应用[J].微型机与应用，2015，34（11）：14-17.
[5] 张耀民.SSH框架在Web项目开发中的构建和应用实践[J].微型机与应用，2013，32（15）：18-21.
[6] BLOCH J.Effective Java中文版（第2版）[M].杨青花，译.北京：机械工业出版社，2009.