日期:2014-05-16 浏览次数:20398 次
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();
??详细的增删改查分页请见附件