Ajax分页与XML解析-优快云博客

本文链接：https://blog.youkuaiyun.com/whylyq/article/details/6521447

Ajax解析xml文件3

一、Ajax操作数据库解析xml文件实现分页

AJAX 可用来与数据库进行动态通信。

AJAX 数据库实例

下面的例子将演示网页如何通过 AJAX 从数据库读取信息进行分页：

1.使用mvc框架

MVC (Modal View Controler)本来是存在于Desktop程序中的，M是指数据模型，V是指用户界面，C则是控制器。使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。比如一批统计数据你可以分别用柱状图、饼图来表示。C存在的目的则是确保M和V的同步，一旦M改变，V应该同步更新

二、实现代码

1.jsp页面

Javascript

selectEmp()函数是Ajax封装请求信息并向相映的Servlet中发送请求，再调用listEmps(doc)函数;listEmps(doc)函数解析xml文件并输到界面;

function selectEmp() {

//获取xhr对象

var xhr = getXhr();

//封装请求信息

xhr.open("get", "./listEmp.do", 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);

}

function listEmps(doc) {

//获取xml文件的跟标签

var root = doc.documentElement;

//获取跟标签的所有子节点

var emps = root.childNodes;

empdoc = root;

//获取tbody对象

var listemps = document.getElementById("listemps");

listemps.innerHTML = "";

for ( var i = 0; i < emps.length; i++) {

//判断该节点是否是元素节点,目的兼容IE firefox 浏览器

if (emps[i].nodeType == 1) {

var emptr = document.createElement("tr");

var empcs = emps[i].childNodes;

for ( var j = 0; j < empcs.length; j++) {

var emptd = document.createElement("td");

if (empcs[j].nodeType == 1) {

emptd.appendChild(document

.createTextNode(empcs[j].firstChild.nodeValue));

emptr.appendChild(emptd);

}

var dutd = document.createElement("td");

emptr.appendChild(dutd);

listemps.appendChild(emptr);

}

var empdoc ;

function getPageInfo(mark) {

var nowpage = empdoc.getAttribute("nowpage");

var countpage = empdoc.getAttribute("countpage");

switch (mark) {

case 1:

nowpage=1;

break;

case 2:

nowpage--;

break;

case 3:

nowpage++;

break;

case 4:

nowpage=countpage;

break;

}

var xhr = getXhr();

xhr.open("get","./listEmp.do?nowpage="+nowpage, true);

xhr.send();

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

var doc = xhr.responseXML;

listEmps(doc);

}

</script>

<body>中调用

当用户在页面上点击"查看所有"时，会执行名为 "selectEmp()" 的函数。该函数再调用"listEmps(doc)";当点击"首页"、"上一页"、"下一页"和"末页"时，调用getPageInfo()，getPageInfo()实行完在调用listEmps(doc)

</div>

2.Servlet中代码

当Ajax发送请求到listEmp.do(Servlet)中，Servlet从数据库得到信息，再将信息以Xml格式写出，等待Ajax解析

listEmp.do

request.setCharacterEncoding("UTF-8");

String npage = request.getParameter("nowpage");

int nowpage = 1;

if (npage == null) {

} else {

nowpage = Integer.valueOf(npage);

}

EmpServiceImpl esi = new EmpServiceImpl();

int countrecord = esi.getCountRecord();

int countpage = countrecord % EmpServiceImpl.PAGESIZE == 0 ? countrecord/ EmpServiceImpl.PAGESIZE

: countrecord / EmpServiceImpl.PAGESIZE + 1;

if(nowpage<=1){

nowpage=1;

}

if(nowpage>=countpage){

nowpage=countpage;

}

List<Emp> emps = esi.findNowPageInfo(nowpage);

// 如果以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 + "' countpage='" + countpage+ "'>");

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