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