需求分析：设计并实现一个web程序,模拟从实现从数据库中取员工信息，并显示在页面中。要求可以异步刷新。
系统分析与设计：设计一个Servlet(EmpServlet)用于生成XML文件，存放员工信息。并将XML发送到HTML页面(emplist.html)。emplist.html中的AJAX发送请求给Servlet,Servlet处理后返回结果，emplist.html中的AJAX响应请求。
//发送Ajax请求
function sendRequest(){...}
//AJax响应处理
function myshow(){....}
代码：
1、emplist.html
emplist.html
var
xmlReq=false;
//发送AJAX请求
function sendRequest(){
//先创建对象
if(window.ActiveXObject){
xmlReq=new
ActiveXObject("Msxml2.XMLHTTP");
alert("new
Object created1");}
else{
xmlReq=new
XMLHttpRequest();
alert("new Object created by firefox");
}
xmlReq.open("post","servlet/EmpServlet");
xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlReq.onreadystatechange=showme;
xmlReq.send(null);
alert("after
post"); }
//AJAX相应处理
function
showme(){ if(xmlReq.readyState==4){
if(xmlReq.status==200){
var
xmlDoc=xmlReq.responseXML;
alert("begin showme0");
var
ids=xmlDoc.getElementsByTagName_r("id");
alert("begin showme1");
var
names=xmlDoc.getElementsByTagName_r("name");
var
sexs=xmlDoc.getElementsByTagName_r("sex"); var
table=document.getElementByIdx_x("table");
alert("begin showme2");
for(var
i=0;i
alert("showme in the middle2");
var newRow=
table.insertRow(table.rows.length);
var
new_id=newRow.insertCell(newRow.cells.length);
new_id.innerHTML=ids[i].firstChild.nodeValue;
var new_name=newRow.insertCell(newRow.cells.length);
new_name.innerHTML=names[i].firstChild.nodeValue;
var new_sex=newRow.insertCell(newRow.cells.length);
new_sex.innerHTML=sexs[i].firstChild.nodeValue;
alert("showme finished");
}
} }
}
//clear the table, so no records left.
function
clearTable(){
var
table=document.getElementByIdx_x("table");
for(var
i=table.rows.length-1;i>0;i--){
table.deleteRow(i); }
This is my
HTML page.
οnclick="sendRequest()"/>
οnclick="clearTable()"/>
| 编号 | 姓名 | 性别 |
2. EmpServlet
//EmpServlet用于处理AJAX请求，并作出相应。
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class EmpServlet extends HttpServlet {
public void doPost(HttpServletRequest request,
HttpServletResponse response)
throws
ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
PrintWriter out =
response.getWriter();
List
emps=EmpDAO.findAll();
out.println("");
for(Emp emp:emps){
out.println("");
out.println("");
out.println(emp.getNo());
out.println("");
out.println("");
out.println(emp.getName());
out.println("");
out.println("");
out.println(emp.getSex());
out.println("");
out.println("");
}
out.println("");
}
//doGet is just for test purpose.
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
response.sendRedirect("list.jsp");
request.getRequestDispatcher("emp.do").forward(request,
response);
}
}
3、EmpDAO
//模拟从数据库中取数据
import java.util.ArrayList;
import java.util.List;
public class EmpDAO {
public static List
findAll(){
List emps=new
ArrayList();
emps.add(new Emp("1","xuliang","male"));
emps.add(new Emp("2","ice","female"));
emps.add(new Emp("3","sisi","male"));
return emps;
}
}
4、Emp.class
//Emp类用于封装员工信息，如编号，姓名和年龄等
public class Emp {
private String no;
private String name;
private String sex;
public Emp() {
}
public Emp(String no, String name, String sex) {
super();
this.no = no;
this.name = name;
this.sex = sex;
}
public String getNo() {
return no;
}
public void setNo(String no) {
this.no = no;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
}