Ajax的常用技巧（4）---实现数据库分页

冷不防 2021-06-24 15:57 317阅读 0赞

在浏览网页时，经常会看到分页显示的页面。如果想把大量的数据提供给浏览者，分页显示是个非常实用的方法。分页显示数据能够帮助浏览者更好地查看信息，能够有条理的显示信息。  
在传统的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();
     }
     %>

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

**3.客户端代码**

本实例中的客户端代码主要完成显示数据的样式设置。打开记事本，输入下列代码：

<%@ 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.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=1 width=30% align=center id=ta><tr><td>手机名称</td><td>型号</td></tr>";
          for(var i=0;i<yan.length;i++){
          var y=yan[i];
              ta+="<tr><td>"+y.childNodes[0].firstChild.data+"</td>";
    	  ta+="<td>"+y.childNodes[1].firstChild.data+"</td>";
             ta+="</tr>";
    	 }
       ta+="</table>";
       document.getElementById("res").innerHTML=ta;
       //alert(yan.length);
    }
    </script>
    <body οnlοad=validate()>
    <h3 align=center>用户列表</h3>
    <div id=res></div>
    <center>
    <a  οnclick="gg()" style="cursor:hand"><font color=blue>上一页</font></a> 
    <a  οnclick="go()" style="cursor:hand"><font color=blue>下一页</font></a>
    </center>

将上述代码保存，名称为fenye.jsp。在该文件中，JavaScript函数gg()完成当前页数减1的操作，函数go()用于完成当前页数加1的操作。Validate()函数用于完成服务器端发送的异步请求，callback()函数用于处理服务器端的响应，show()函数指定了数据显示样式。这里需要注意的是，需要将pagenum变量设定为全局变量。