Ajax解析xml文件2

Ajax解析xml文件2

一、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文件并输到界面;

updateEmp()利用Ajax中post()方法封装请求信息再向servlet发送请求

<script type="text/javascript">

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;

//获取tbody对象

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

listemps.innerHTML = "";

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

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

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

    /**创建删除修改按钮*/

    var delbtn = document.createElement("input");

var uptbtn = document.createElement("input");

delbtn.setAttribute("type","button");

uptbtn.setAttribute("type","button");

delbtn.setAttribute("value","删除");

uptbtn.setAttribute("value","修改");

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.createText

Node(empcs[j].firstChild.nodeValue))     

emptr.appendChild(emptd);

}

}

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

dutd.appendChild(delbtn);

dutd.appendChild(uptbtn);

/**员工删除操作*/

delbtn.onclick = function (){

Var empno =  this.parentNode.parentNode.firstChild.

innerHTML;

var xhr = getXhr();

xhr.open("get", "./delEmp.do?empno="+empno,   true);

 xhr.send();

 xhr.onreadystatechange = function() {

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

var doc = xhr.responseXML;

listEmps(doc);

 }

  }

   }

/**员工修改操作*/

uptbtn.onclick = function(){ 

  var emp = this.parentNode.parentNode;

  var eles = emp.childNodes;

  for(var i=0;i<eles.length-1;i++){

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

        switch(i){

          case 0:

            $("eno").value=eles[i].innerHTML;

          break;

          case 1:

           $("ename").value=eles[i].innerHTML;

          break;

          case 2:

           $("job").value=eles[i].innerHTML;

          break;

          case 3:

           $("hiredate").value=eles[i].innerHTML;

          break;

          case 4:

           $("mgr").value=eles[i].innerHTML;

          break;

          case 5:

           $("sal").value=eles[i].innerHTML;

          break;

          case 6:

           $("comm").value=eles[i].innerHTML;

          break;

          case 7:

          var deptno = eles[i].innerHTML;

             var xhr = getXhr();

xhr.open("get", 

"./listDept.do",true);

xhr.send();

xhr.onreadystatechange = function() {

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

var doc = xhr.responseXML;

listEmps(doc);

}

}  

          break;

        }

     }

  }

}

emptr.appendChild(dutd);

listemps.appendChild(emptr);

}

}

}

function updateEmp(){

   var xhr = getXhr();

xhr.open("post", "./updateEmp.do", true);

var empno = $("eno").value;

var ename = $("ename").value;

var mgr = $("mgr").value;

var hiredate = $("hiredate").value;

var job = $("job").value;

var sal = $("sal").value;

var comm = $("comm").value;

var deptno = $("deptno").value;

var params = "empno=" + empno + "&ename=" + ename +  "&mgr=" + mgr+ "&hiredate=" + hiredate + "&job=" + job  + "&sal=" + sal+ "&comm=" + comm + "&deptno=" + deptno;

xhr.setRequestHeader("Content-Type",  "application/x-www-form-urlencoded");

xhr.send(params);

xhr.onreadystatechange = function() {

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

var doc = xhr.responseXML;

listEmps(doc);

}

}

}    

</script>

当用户在页面上点击"查看所有"时，会执行名为 "selectEmp()" 的函数。该函数再调用"listEmps(doc)" ,"listEmps(doc)"函数中创建一个"删除"和一个"修改"按钮，并给它们设置onclick=""事件;当用户在页面上点击"修改"时，会执行名为 "updateEmp() " 的函数

<body>中调用

<input type="button" value="查询所有用户" onclick="selectEmp()" />

<div id="updateemp">

员工编号： <input type="text" name="empno" id="eno" /> 

员工姓名：<input type="text" name="ename" id="ename" /> 

岗位:<input type="text" name="job" id="job" /> 

            员工入职日期：<input type=text name="hiredate"  id="hiredate" /> 

领导:<input type="text" name="mgr" id="mgr" /> 薪水:<input type="text" name="sal" id="sal" />

奖金:<input type="text" name="comm" id="comm" />

部门:<select name="deptno" id="deptno">

<option value="10">

请选择部门

</option>

</select> 

<input type="button" value="修改" onclick="updateEmp()" />

</div>

<tbody id="listemps">

</tbody>

 2.Servlet中代码

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

listEmp.do

EmpServiceImpl esi = new EmpServiceImpl();

List<Emp> emps = esi.findAll();

//如果以xml数据返回响应 必须设置头位如下方式,并且放在响应的第一行

response.setContentType("text/xml;charset=UTF-8");

PrintWriter out = response.getWriter();

out.println("<?xml version='1.0' encoding='UTF-8'?>");

out.println("<emps>");

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

当Ajax发送请求到updateEmp.do(Servlet)中，Servlet根据Ajax传输的数据向数据库查询并修改相应的数据

updateEmp.do

request.setCharacterEncoding("UTF-8");

String eno = request.getParameter("empno"); // 整型

int empno = Integer.valueOf(eno);

String ename = request.getParameter("ename");

String job = request.getParameter("job");

String hiredate1 = request.getParameter("hiredate");// 日期型

SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd  hh:mm:ss");

Date hiredate = null;

try {

hiredate = sdf.parse(hiredate1);

} catch (ParseException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

String mgr1 = request.getParameter("mgr"); // 整型

int mgr = Integer.valueOf(mgr1);

String sal1 = request.getParameter("sal"); // 浮点型

double sal = Double.valueOf(sal1);

String comm1 = request.getParameter("comm"); // 浮点型

double comm = Double.valueOf(comm1);

String deptno1 = request.getParameter("deptno");// 整型

int deptno = Integer.valueOf(deptno1);

Emp emp = new Emp();

emp.setEmpno(empno);

emp.setEname(ename);

emp.setJob(job);

emp.setHiredate(hiredate);

emp.setMgr(mgr);

emp.setSal(sal);

emp.setComm(comm);

emp.setDeptno(deptno);

EmpServiceImpl esi = new EmpServiceImpl();

esi.update(emp);

//在DaoImpl中作update()方法从而修改数据

request.getRequestDispatcher("listEmp.do").forward(request,  response);

当Ajax发送请求到updateEmp.do(Servlet)中，Servlet根据Ajax传输的数据向数据库删除相应的数据

delEmp.do

request.setCharacterEncoding("UTF-8");

String empno1 = request.getParameter("empno");

EmpServiceImpl esi = new EmpServiceImpl();

esi.delete(Integer.valueOf(empno1));

//在DaoImpl中作delete()方法从而删除数据 request.getRequestDispatcher("listEmp.do").forward(request,  response);