在瀏覽網頁時,經常會看到分頁顯示的頁面。如果想把大量的數據提供給瀏覽者,分頁顯示是個非常實用的方法。分頁顯示數據能夠幫助瀏覽者更好地查看信息,能夠有條理的顯示信息。
在傳統的web技術中,分頁顯示的相關操作都是在服務器端進行的,服務器端獲取客戶端的請求分頁,并根據請求頁數獲取指定的結果集。最后把結果集中的數據返回到客戶端,這時返回結果中不但包含了數據,還可能包含了數據的顯示樣式。客戶端的每一次數據更新,都會重新打開一個網頁,如果網頁中包含了很多html元素,就會造成網頁打開速度較慢的情況。
為了顯示部分數據,而需要加載整個頁面的數據,顯得有點得不償失。使用Ajax技術可以很好的彌補這些問題,服務器端只傳輸數據庫表中的數據,客戶端獲取這些數據只更新局部內容,與數據無關的其他元素保持不變。
現在創建一個實例,以演示使用Ajax技術實現數據的分頁顯示。該實例的代碼實現分為服務器端和客戶端。
1,準備工作
我們這里使用Mysql數據庫,我在shop數據庫中創建了一張mobileshop表,這張表有兩個字段name,model。
打開記事本,輸入下列代碼:
<%@ page language="java" import="java.util.*,java.sql.*,java.io.*" pageEncoding="GBK"%>
<%
class DBManager{
String userName="root";
String password="123456";
Connection conn=null;
Statement stmt=null;
String url="jdbc:mysql://localhost:3306/shop";
ResultSet rst;
public DBManager(String sql){
try {
Class.forName("com.mysql.jdbc.Driver");
conn=DriverManager.getConnection(url,userName,password);
stmt=conn.createStatement();
rst=stmt.executeQuery(sql);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public ResultSet getResultSet(){
return rst;
}
}
%>
將上述代碼保存為Conn.jsp,用于返回查詢結果集。
2,服務器端代碼
在本實例中,服務器端代碼具有獲取客戶端請求頁數和產生指定記錄集的功能。打開記事本,輸入下列代碼:
<%@ page contentType="text/html; charset=utf-8" import="java.sql.*" errorPage="" %>
<%@ include file="Conn.jsp" %>
<%@ page import="java.util.*" %>
<%@ page import="java.io.*" %>
<%
try
{
ResultSet rs=new DBManager("select name,model from mobileshop").getResultSet();
int intPageSize; //一頁顯示的記錄數
int intRowCount; //記錄的總數
int intPageCount; //總頁數
int intPage; //待顯示的頁碼
String strPage;
int i;
intPageSize=2; //設置一頁顯示的記錄數
strPage=request.getParameter("page"); //取得待顯示的頁碼
if(strPage==null) //判斷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())
{
String name=rs.getString("name");
String email=rs.getString("model");
content.append("<content>");
content.append("<name>"+ name +"</name>");
content.append("<model>"+email+"</model>");
content.append("</content>");
rs.next();
i++;
}
content.append("</contents>");
System.out.print(content);
out.print(content);
}
catch(Exception e)
{
e.printStackTrace();
}
%>