日期:2014-05-16  浏览次数:20398 次

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();

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