读书人

Ajax数据库异步查询分页技术兑现(数据

发布时间: 2012-10-08 19:54:56 作者: rapoo

Ajax数据库异步查询分页技术实现(数据—>xml—>数据)

Ajax,想必大家对它并不陌生(读音:e:j^ks,)AJAX?指异步?JavaScript?及?XML(Asynchronous?JavaScript?And?XML)

那我们要如何运用ajax实现异步的数据查询和把查询的数据封装成xml?Dom?对象?然后再解析成数据显示回页面呢?。也许用人会说这个很简单,只要把nowpage?和?countpage?传过去就可以了?,的确是这样?但是重点不是这个?,重点是我们如何在异步查询的前提下?进行nowpage?和?countpage?的及时(所谓及时就是指当点击的时候去更新)刷新?和把xml?Dom里所有子节点的内容?怎么回显到html?Dom中(即把相关数据回显到页面),我们都知道局部刷新如果写的代码有问题nowpage?和countpage?是不会改变的。那我们应该怎样实现这个分页呢,其实还是很简单,下面简单说一下实现分页的js和servlet?和jsp?

???首先我们要针对不同浏览起的兼容问题进行XmlHttpRequest的创建function getXhr() {

var xhrtry {        //firefox operaxhr = new XMLHttpRequest();} catch (err) {try {            //iExhr = new ActiveXObject("Microsoft.XMLHTTP");} catch (er) {alert("不支持ajax技术");}}    return xhr;}
??之后我们就开始用ajax去封装和发送请求
function selectEmp(nowp) {//获取xhr对象var xhr = getXhr();//封装请求信息xhr.open("get", "./listEmp.do?nowpage="+nowp, true);//发送请求xhr.send();//根据服务器端传递xhr.readyState触发的事件进行处理xhr.onreadystatechange = function() {//根据readyState是否处理完毕,status服务是否返回成功if (xhr.readyState == 4 && xhr.status == 200) {//获得xml的document对象var doc = xhr.responseXML;listEmps(doc);empdoc=doc;}}}//这里是现实分页的js逻辑var empdoc;function getPageInfo(mark){    var root=empdoc.documentElement;    var nowpage=root.getAttribute("nowpage");    var pagezong=root.getAttribute("pangzong");    switch(mark){       case 1:       nowpage=1;       break;        case 2:       nowpage--;       break;        case 3:       nowpage++;       break;        case 4:       nowpage=pagezong;       break;            }    selectEmp(nowpage);}//页面这样写就可以了<div id="fenye">  <span>//首先我们要在servlet中封装xml文件时封装两个属性 nowpage和countpage   <a href="javascript:getPageInfo(1)">首页</a>  //这里我们调用js里面的方法去运算逻辑,然后把nowpage传给ajax去查询进行时时更新   <a href="javascript:getPageInfo(2)">上一页</a>   <a href="javascript:getPageInfo(3)">下一页</a>   <a href="javascript:getPageInfo(4)">末页</a>   </span></div>//servlet 里面把数据封装到xml中response.setContentType("text/xml;charset=UTF-8");PrintWriter out = response.getWriter();out.println("<?xml version='1.0' encoding='UTF-8'?>");out.println("<emps nowpage='"+nowpage+"' pangzong='"+pangzong+"'>");for(Emp emp:emps){out.println("<emp>");out.println("<empno>"+emp.getEmpno()+"</empno>");out.print("<ename>"+emp.getEname()+"</ename>");out.println("<job>"+emp.getJob()+"</job>");out.print("<hiredate>"+emp.getHiredate()+"</hiredate>");out.println("<mgr>"+emp.getMgr()+"</mgr>");out.print("<sal>"+emp.getSal()+"</sal>");out.print("<comm>"+emp.getComm()+"</comm>");out.print("<deptno>"+emp.getDeptno()+"</deptno>");out.println(" </emp>");}out.println("</emps>");out.flush();out.close();

??详细的增删改查分页请见附件

读书人网 >其他数据库

热点推荐