实例说明 在Web应用开发中,经常需要对信息进行分页显示。本实例将介绍如何应用Ajax实现无刷新分页。运行本实例,如图1所示,单击信息列表下面的“首 页”、“上一页”、“下一页”以及“尾页”超链接时,可以显示不同的信息,此时整个页面不刷新。
图1 实现无刷新分页
关键技术本实例主要应用Ajax异步提交来实现。当单击超链接时,需要将当前页的页码参数值通过Ajax请求方法发送到服务器,在服务器中根据获得的参数值获取不同的分页数据,然后将这些分页数据以XML文档格式响应给客户端页面。客户端通过Ajax回调函数来读取XML文档内容,将这些内容替换页面信息列表中原来的显示内容,而不改变页面其他内容,从而实现页面的无刷新分页。 设计过程 (1)创建request.js文件,用于封装Ajax请求服务器的方法。 (2)创建商品信息列表页index.jsp,在该页中通过<script>标签导入封装Ajax请求的request.js文件,然后在<script>标签中定义一个用于接收Ajax请求方法所返回的XMLHttpRequest对象的变量。创建JavaScript方法getData(),在该方法中调用request.js文件中的Ajax请求方法请求目标服务器。关键代码如下:
<script language="javascript" src="js/request.js"></script>
<script language="javascript">
var request = false; //保存 XMLHttpRequest对象的全局变量
//Ajax请求方法
function getData(page){
var url="GoodsServlet"; //服务器地址
var param ="page="+page+"&nocache="+new Date().getTime();//请求参数
request=httpRequest("post",url,true,callbackFunc,param);//调用request.js请求方法
}
(3)创建Servlet的实现类GoodsServlet,用于获取商品信息。在该类的doPost()方法中接收到Ajax请求中的page参数值,然后设置响应正文的MIME类型为XML格式,从数据库中读取出商品信息以及分页信息添加到XML的节点中,最后将XML格式的信息输出到客户端。doPost()方法的具体代码如下:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType( "text/xml;charset=UTF-8" );//设置响应格式为test/xml
//设置response.addHeader(),禁止页面缓存
response.addHeader( "Cache-Control", "no-store,no-cache,must-revalidate" );
response.addHeader( "Cache-Control", "post-check=0,pre-check=0" );
response.addHeader( "Expires", "0" );
response.addHeader( "Pragma", "no-cache" );
PrintWriter out = response.getWriter();
PageElement pageArgs = getPageArgs(); // 获取数据分页参数
List goodses = null; // 创建保存商品信息的数据集合
// 获取请求对象的分页参数
int page=1;
if(null!=request.getParameter("page")){
page = Integer.parseInt(request.getParameter("page"));
}
pageArgs.setPageCount(page);
out.println( "<?xml version=\"1.0\" encoding=\"utf-8\"?>" );
out.println( "<goodses>" );
out.println( "<pageElement>" );
out.println( "<pageNum>" +pageArgs.getPageNum()+"</pageNum>");
out.println( "<maxPage>" +pageArgs.getMaxPage()+"</maxPage>");
out.println( "<nextPage>" +pageArgs.getNextPage()+"</nextPage>");
out.println( "<prePage>" +pageArgs.getPrePage()+"</prePage>");
out.println( "</pageElement>" );
try{
goodses = getGoods(page);
}catch(Exception e){
e.printStackTrace();
}
for(int i=0;i<goodses.size();i++){
CommodityForm commodity = (CommodityForm) goodses.get(i);
out.println( "<goods>" );
out.println( "<id>"+commodity.getId()+"</id>" );
out.println( "<goodsName>"+commodity.getGoodsName()+"</goodsName>" );
out.println( "<introduce>"+commodity.getIntroduce()+"</introduce>" );
out.println( "<Price>"+commodity.getPrice()+"</Price>" );
out.println( "</goods>" );
}
out.println( "</goodses>" );
out.close();
}
(4)创建PageElement类,用于封装计算分页的参数。关键代码如下:
public class PageElement {
private int pageNum; //当前页
private int pageSize; //页面显示数据的条数
private long maxPage; //总页数
private int prePage; //上一页
private int nextPage; //下一页
public void setPageCount(int pageNum) {
this.pageNum = pageNum;
//设置上一页的页码
prePage=pageNum-1<=1?1:pageNum-1;
//设置下一页的页码
nextPage=(int)(pageNum + 1 >= maxPage ? maxPage : pageNum + 1);
}
... //此处省略了其他属性的getXXX()和setXXX()方法
}
(5)在GoodsServlet类中,编写获取分页参数信息的getPageArgs()方法,具体代码如下:
public PageElement getPageArgs() {
PageElement pag = null; // 声明分页参数对象
Statement stmt = null;
ResultSet rs = null;
ConnDB conn = new ConnDB(); // 连接数据库
try {
// 声明查询总数据量的SQL语句
String sql = "SELECT count(*) FROM tb_goods";
rs = conn.executeQuery(sql); // 执行SQL查询
if (rs.next()) {
int count = rs.getInt(1); // 获取查询结果
pag = new PageElement(); // 初始化分页参数对象
pag.setPageSize(pagesize); // 设置分页大小
pag.setMaxPage((count + pagesize - 1) / pagesize);// 设置最大页码
pag.setPageCount(count); // 设置当前页码
}
} catch (SQLException ex) {
ex.getMessage();
} finally {
conn.close();
}
return pag;
}
(6)在GoodsServlet类中,编写从数据库读取指定商品信息的getGoods()方法,具体代码如下:
public List getGoods(final int page) throws Exception {
List list = new ArrayList(); // 创建保存分页数据的集合对象
ConnDB conn = new ConnDB(); // 连接数据库
CommodityForm f =null;
int firstResult = (page-1) * pagesize;
try {
// 定义分页查询的SQL语句
String sql= "select * from tb_goods order by id limit "+firstResult+","+pagesize;
ResultSet rs = conn.executeQuery(sql); // 获取查询结果
while (rs.next()) { // 遍历查询结果集
f = new CommodityForm(); // 创建分页对象
f.setId(rs.getInt("id"));
f.setGoodsName(rs.getString("name"));
f.setIntroduce(rs.getString("introduce"));
f.setPrice(rs.getFloat("price"));
list.add(f); // 添加分页数据对象到List集合
}
} catch (SQLException ex) {
ex.printStackTrace();
} finally {
conn.close();
}
return list;
}
7)编写完以上GoodsServlet类中几个方法后,在index.jsp中,需要编写Ajax回调函数callbackFunc(),在回调函数中读取Ajax请求GoodsServlet所响应的XML数据,并添加到指定<span>标签中。callbackFunc()具体代码如下:
function callbackFunc(){
if(request.readyState == 4){
if(request.status == 200){
var doc = request.responseXML;
var pageNum = doc.getElementsByTagName("pageNum")[0].firstChild.data;
var maxPage= doc.getElementsByTagName("maxPage")[0].firstChild.data;
var prePage = doc.getElementsByTagName("prePage")[0].firstChild.data;
var nextPage = doc.getElementsByTagName("nextPage")[0].firstChild.data;
var goodses = doc.getElementsByTagName("goods");
var innerHTML = "";
if((goodses!=null)&&(goodses.length!=0)) {
innerHTML+="<table width='96%' border='1' cellpadding='0' cellspacing='0' bordercolor='#FFFFFF' bordercolordark='#FFFFFF' bordercolorlight='CFCFCF'>";
innerHTML+="<tr align='center' height='30'><td>商品名称</td>";
innerHTML+="<td>简介</td>";
innerHTML+="<td>单价</td></tr>";
for(var i=0;i<goodses.length;i++) {
var goods = goodses[i];
var goodsName = goods.childNodes[1].firstChild.data;
var introduce = goods.childNodes[2].firstChild.data;
var price = goods.childNodes[3].firstChild.data;
innerHTML += "<tr height='30'>";
innerHTML += "<td align='left'> "+goodsName+"</td>";
innerHTML += "<td align='left'> "+introduce+"</td>";
innerHTML += "<td align='left'> "+price+"</td>";
innerHTML += "</tr>";
}
innerHTML+="<tr height='30'><td align='center' colspan='6'>";
innerHTML +="["+ pageNum+"/"+maxPage+"] ";
innerHTML+="<a href=\"javascript:void(0)\" onClick=\"getData(1)\">[首 页]</a> ";
innerHTML+= "<a href=\"javascript:void(0)\" onClick=\"getData("+prePage+")\">[上一页]</a> ";
innerHTML+= "<a href=\"javascript:void(0)\" onClick=\"getData("+nextPage+")\">[下一页]</a> ";
innerHTML +="<a href=\"javascript:void(0)\" onClick=\"getData("+maxPage+")\">[尾页]</a>";
innerHTML+="</td></tr>\n";
innerHTML+="</table>\n";
}else {
innerHTML += "暂时没有任何数据";
}
document.getElementById("goodsList").innerHTML = innerHTML;
request = false;//此处必须设置XMLHttpRequest对象的变量为初始状态
}
}
}
(8)在index.jsp页的指定位置添加显示商品列表信息的<span>标签,并设置该标签的id属性为“goodsList”。关键代码如下: <span id="goodsList"></span> (9)在页面加载后就应该请求服务器,读取出初始商品信息。关键代码如下: window.οnlοad=function(){ getData(1); } 秘笈心法 本实例在获得服务器回传的XML数据时,应用到了JavaScript中的DOM对象。在DOM中,HTML文档各个节点被视为各种类型的Node对象,并且将HTML文档表示为Node对象的树,对于任何一个树形结构来说,最常做的就是遍历树。DOM中可以通过Node对象的parentNode属性、firstChild属性、lastChild属性、lastChild属性、previousSibling属性和nextSibling属性来遍历文档树。Node对象的常用属性的具体作用如表1所示。 表1 Node对象的属性
属性 | 类型 | 描述 |
parentNode | Node | 节点的父节点,没有父节点时为null |
childNodes | NodeList | 节点的所有子节点的NodeList |
firstChild | Node | 节点的第一个子节点,没有则为null |
lastChild | Node | 节点的最后一个子节点,没有则为null |
previousSibling | Node | 节点的上一个节点,没有则为null |
nextChild | Node | 节点的下一个节点,没有则为null |
nodeName | String | 节点名 |
nodeValue | String | 节点值 |
nodeType | short | 表示节点类型的整型常量 |