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 xhr
	try {
        //firefox opera
		xhr = new XMLHttpRequest();
	} catch (err) {
		try {
            //iE
			xhr = 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();

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