Ajax的常用技巧(4)---实现数据库分页
来源:互联网 发布:机器人算法和plc程序 编辑:程序博客网 时间:2024/03/29 00:56
在浏览网页时,经常会看到分页显示的页面。如果想把大量的数据提供给浏览者,分页显示是个非常实用的方法。分页显示数据能够帮助浏览者更好地查看信息,能够有条理的显示信息。
在传统的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 blocke.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 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>
将上述代码保存,名称为fenye.jsp。在该文件中,JavaScript函数gg()完成当前页数减1的操作,函数go()用于完成当前页数加1的操作。Validate()函数用于完成服务器端发送的异步请求,callback()函数用于处理服务器端的响应,show()函数指定了数据显示样式。这里需要注意的是,需要将pagenum变量设定为全局变量。
- Ajax的常用技巧(4)---实现数据库分页
- Ajax的常用技巧(1)----实现表单数据验证
- Ajax的常用技巧(3)---实现自动刷新页面.
- Ajax的常用技巧(5)---实现进度条
- Ajax的常用技巧---实现进度条
- ajax+jdbc实现数据库分页
- Ajax的常用技巧(2)---实现Web页面中的级联菜单
- Ajax的常用技巧(6)---实现web页面局部动态刷新
- Ajax的常用技巧(6)---实现web页面局部动态刷新
- 数据库的分页实现
- 数据库的分页实现
- Ajax实现从数据库读取数据后,实现分页
- 数据库查询的分页优化技巧
- 数据库常用的小技巧
- ajax链接数据库 分页
- derby数据库分页的实现
- 不同数据库的分页实现
- 三种常用数据库(Oracle、MySQL、SQLServer)的分页
- 详细透彻的分析DM9000网卡驱动程序(4)---我是苦行僧
- 采用MATLAB的DSP调试方法
- MFC消息机制与虚函数的结合
- 同步和异步与阻塞和非阻塞
- 几种java for循环写法介绍
- Ajax的常用技巧(4)---实现数据库分页
- 六步实现Rest风格的API
- HDU 1330 Deck
- ollydbg找到主程序入口
- 常用存储器的差别
- Robot Framework作者建议如何选择自动化测试框架
- 字库中英文对照表
- 5798 - Jupiter Atacks!
- 泛型的擦除和转换