当前位置:编程学习 > 网站相关 >>

Ajax的常用技巧(4)---实现数据库分页

在浏览网页时,经常会看到分页显示的页面。如果想把大量的数据提供给浏览者,分页显示是个非常实用的方法。分页显示数据能够帮助浏览者更好地查看信息,能够有条理的显示信息。
在传统的web技术中,分页显示的相关操作都是在服务器端进行的,服务器端获取客户端的请求分页,并根据请求页数获取指定的结果集。最后把结果集中的数据返回到客户端,这时返回结果中不但包含了数据,还可能包含了数据的显示样式。客户端的每一次数据更新,都会重新打开一个网页,如果网页中包含了很多html元素,就会造成网页打开速度较慢的情况。
为了显示部分数据,而需要加载整个页面的数据,显得有点得不偿失。使用Ajax技术可以很好的弥补这些问题,服务器端只传输数据库表中的数据,客户端获取这些数据只更新局部内容,与数据无关的其他元素保持不变。
现在创建一个实例,以演示使用Ajax技术实现数据的分页显示。该实例的代码实现分为服务器端和客户端。
1,准备工作

我们这里使用Mysql数据库,我在shop数据库中创建了一张mobileshop表,这张表有两个字段name,model。
打开记事本,输入下列代码:
[plain] 
<%@ 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,服务器端代码

     在本实例中,服务器端代码具有获取客户端请求页数和产生指定记录集的功能。打开记事本,输入下列代码:
[plain] 
<%@ 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(); 
 } 
 %> 

 
将上述代码保存,名称为fenye2.jsp。在该文件中,使用request对象获取客户端传送的请求页数,并依据请求页数将记录集的指针移动到指定的数据库记录。在下面使用while循环将制定的数据库记录以xml文件形式返回到客户端。这里需要注意,语句response.setHeader(“Cache-Control”,”no-cache”)是必不可少的,该文件在保存时,编码形式应为UTF-8编码。
3.客户端代码

本实例中的客户端代码主要完成显示数据的样式设置。打开记事本,输入下列代码:
[plain] 
<%@ 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=1; 
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="fenye2.jsp?page="+pagenum; 
   xmlHttp.open("GET",url,true); 
   xmlHttp.onreadystatechang

补充:Web开发 , 其他 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,