需求分析：設計并實作一個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;
}
}