16.6.3 分页浏览文章标题

http://book.51cto.com 2008-06-27 12:23 梁文新/宋强/王占中等清华大学出版社我要评论(0)

摘要：《Ajax+JSP网站开发从入门到精通》第16章Blog系统，这一章中将会详细创建Blog系统软件的过程，从需求分析入手详细阐述Blog的基本功能需求，以系统设计为依据，编写功能良好的Ajax代码,本节为分页浏览文章标题。
标签：Ajax+JSP 网站开发 Blog系统精通 Ajax+JSP网站开发从入门到精通

16.6.3 分页浏览文章标题

查看并阅读博客中发表的文章，是任何一个浏览者都具有的权限。如果博客中的文章较多，这时就需要将显示的数据进行分页显示。在该模块中，实现分页显示博客文章，浏览者可以从显示页面中找到自己感兴趣的文章进行阅读。该页面代码分为两部分，客户端部分和服务器端部分。

1．服务器端代码

服务器代码主要完成从数据库表中获取数据，并将这些数据以滚动结果集的形式返回到客户端页面。其代码如下所示：

<%@ page contentType="text/html; charset=utf-8" 
import="java.sql.*" errorPage="" %>
<%@ include file="Conn.jsp" %>
<%@ page import="java.util.*" %>
<%@ page import="java.io.*" %>
<%
try
{
String sql="select * from art";
ResultSet rs=executeQuery(sql);
int intPageSize;      //一页显示的记录数
int intRowCount;      //记录的总数
int intPageCount;     //总页数
int intPage;         //待显示的页码
String strPage;
int i;
//设置一页显示的记录数
intPageSize=5;
//取得待显示的页码
strPage=request.getParameter("page");

//判断strPage是否等于null,如果是，显示第一页数据
if(strPage==null)
{
intPage=1;
}else{
//将字符串转换为整型
intPage=java.lang.Integer.parseInt(strPage);
}
if(intPage<1)
{
intPage=1;
}
//获取记录总数
rs.last();
intRowCount=rs.getRow();
//计算机总页数
intPageCount=(intRowCount+intPageSize-1)/intPageSize;
//调整待显示的页码
if(intPage>intPageCount) intPage=intPageCount;
if(intPageCount>0)
{
//将记录指针定位到待显示页的第一条记录上
rs.absolute((intPage-1)*intPageSize+1);
}
//下面用于显示数据
i=0;
StringBuffer content=new StringBuffer("");
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
content.append("<?xml version=\"1.0\" encoding=\"UTF-8\" ?>");
content.append("<contents>");
while(i<intPageSize && !rs.isAfterLast())
{
int ii=rs.getInt(1);
String author=rs.getString(3);
String title=rs.getString(4);
String AddT=rs.getDate(6).toString();
String cla= rs.getString(7);
content.append("<content>");
content.append("<author>"+ author +"</author>");
content.append("<title>"+ title +"</title>");
content.append("<class>"+ cla +"</class>");
content.append("<date>"+AddT+"</date>");
content.append("<id>"+ ii +"</id>");
content.append("</content>");
rs.next();
i++;
}
content.append("</contents>");
System.out.print(content);
out.print(content);
}
catch(Exception e)
{
e.printStackTrace();
}
%>

将上述代码保存，名称为ArtShow4.jsp。在该文件中，主要实现了数据库数据的分页显示。这里需要注意的是，数据库代码和其他代码之间传输数据的过程。

2．客户端代码

客户端页面主要实现了显示服务端返回数据，并根据浏览者要求向服务器发送请求页面数据。该页面代码如下所示：

<%@ page contentType="text/html; charset=gb2312" 
import="java.sql.*" errorPage="" %>
<%@ include file="Conn.jsp" %>
<%@ page import="java.util.*" %>
<%@ page import="java.io.*" %>
<script type="text/javascript">
var pagenum=2;
function go(){
pagenum=pagenum+1;
validate()
}
function gg(){
if(pagenum==1)
pagenum=1;
else
pagenum=pagenum-1;
validate()
}
var xmlHttp;
var id;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
} 
}
function validate(){
createXMLHttpRequest();
var url="ArtShow4.jsp?page="+pagenum;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null); 
}
function callback(){
if(xmlHttp.readyState==4){
show();
}
}
function show(){
var xmlDoc=xmlHttp.responseXML;
//alert(xmlHttp.responseText);
//alert(xmlHttp.responseXML.xml);
var yan=xmlDoc.getElementsByTagName("content");
var ta="<table border=0 width=78% align=center 
id=ta><tr><td>文章作者</td><td>文章标题</td><td>文章
类别</td><td>发表时间</td></tr>";
for(var i=0;i<yan.length;i++){
var y=yan[i];
ta+="<tr><td colspan=5><hr size='1' noshade='noshade' 
color='#000000' style='border-bottom-style:dotted' 
width=820><td width=15%></td></tr>"; 
ta+="<tr id='aa'><td>"+y.childNodes[0].firstChild.data+"</td>";
ta+="<td width=30%>" + y.childNodes[1].firstChild.data + "</td>";
ta+="<td>" + y.childNodes[2].firstChild.data + "</td>"; 
ta+="<td>" + y.childNodes[3].firstChild.data + "</td>"; 
ta+="<td><a href='ArtShow2.jsp?artid="+y.childNodes[4].
firstChild.data+"'>阅读</a></td></tr>";
}
ta+="</table>";
document.getElementById("res").innerHTML=ta;
//alert(yan.length);
}
</script>
<body onload=validate()>
<h3 align=center>查看文章</h3>
<div id=res></div>
<center>
<a  onclick="gg()" style="cursor:hand"><font color=blue>上一页</font></a> 
<a  onclick="go()" style="cursor:hand"><font color=blue>下一页</font></a>
</center>
</body>

将上述代码保存，名称为ArtShow3.jsp。在该页面中，JavaScript函数go()在单击【下一页】超级链接时被调用，主要完成将当前页面数加1，并调用validate()方法。函数gg（）是在单击【上一页】超级链接时被调用，主要完成将当前页面数减1，并调用valdate（）方法。validate()主要完成数据的异步传输，callback()函数是处理服务器返回信息，show（）函数主要设定返回信息的显示样式。

3．运行

单击图16-2中【查看文章】超级链接，会显示如图16-5所示窗口：