【導(dǎo)讀】業(yè)務(wù)邏輯：動(dòng)態(tài)添加員工信息至列表，列表動(dòng)態(tài)刪除員工信息
業(yè)務(wù)邏輯：動(dòng)態(tài)添加員工信息至列表，列表動(dòng)態(tài)刪除員工信息
頁(yè)面：employeeList.jsp
<html>
<head>
<title>員工列表</title>
<script type="text/javascript">
var xmlHttp;
var name;
var title;
var department;
var deleteID;
var EMP_PREFIX = "emp-";
//創(chuàng)建XMLHttpRequest對(duì)象
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
//增加員工
function addEmployee() {
name = document.getElementById("name").value;
title = document.getElementById("title").value;
department = document.getElementById("dept").value;
action = "add";
if(name == "" || title == "" || department == "") {
return;
}
var url = "EmployeeListServlet?"
+ createAddQueryString(name, title, department, "add")
+ "&ts=" + new Date().getTime();
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleAddStateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
//構(gòu)造參數(shù)字串
function createAddQueryString(name, title, department, action) {
var queryString = "name=" + name
+ "&title=" + title
+ "&department=" + department
+ "&action=" + action;
return queryString;
}
//回調(diào)方法
function handleAddStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
updateEmployeeList();
clearInputBoxes();
}
else {
alert("Error while adding employee.");
}
}
}
//清空輸入框
function clearInputBoxes() {
document.getElementById("name").value = "";
document.getElementById("title").value = "";
document.getElementById("dept").value = "";
}
//刪除員工
function deleteEmployee(id) {
deleteID = id;
var url = "EmployeeListServlet?"
+ "action=delete"
+ "&id=" + id
+ "&ts=" + new Date().getTime();
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleDeleteStateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
//更新員工列表
function updateEmployeeList() {
var responseXML = xmlHttp.responseXML;
var status = responseXML.getElementsByTagName("status").item(0).firstChild.nodeValue;
status = parseInt(status);
if(status != 1) {
return;
}
//創(chuàng)建行
var row = document.createElement("tr");
var uniqueID = responseXML.getElementsByTagName("uniqueID")[0].firstChild.nodeValue;
row.setAttribute("id", EMP_PREFIX + uniqueID);
//創(chuàng)建列
row.appendChild(createCellWithText(name));
row.appendChild(createCellWithText(title));
row.appendChild(createCellWithText(department));
//刪除按鈕
var deleteButton = document.createElement("input");
deleteButton.setAttribute("type", "button");
deleteButton.setAttribute("value", "刪除");
deleteButton.onclick = function () { deleteEmployee(uniqueID); };
cell = document.createElement("td");
cell.appendChild(deleteButton);
row.appendChild(cell);
document.getElementById("employeeList").appendChild(row);
updateEmployeeListVisibility();
}
//創(chuàng)建列
function createCellWithText(text) {
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(text));
return cell;
}
//刪除行的回調(diào)方法
function handleDeleteStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
deleteEmployeeFromList();
}
else {
alert("Error while deleting employee.");
}
}
}
//刪除行
function deleteEmployeeFromList() {
var status = xmlHttp.responseXML.getElementsByTagName("status").item(0).firstChild.nodeValue;
status = parseInt(status);
if(status != 1) {
return;
}
var rowToDelete = document.getElementById(EMP_PREFIX + deleteID);
var employeeList = document.getElementById("employeeList");
employeeList.removeChild(rowToDelete);
//更新列表可視效果
updateEmployeeListVisibility();
}
//更新列表可視效果
function updateEmployeeListVisibility() {
var employeeList = document.getElementById("employeeList");
if(employeeList.childNodes.length > 0) {
document.getElementById("employeeListSpan").style.display = "";
}
else {
document.getElementById("employeeListSpan").style.display = "none";
}
}
</script>
</head>
<body>
<h1>員工列表</h1>
<form action="#">
<table width="80%" border="0">
<tr>
<td>姓名: <input type="text" id="name"/></td>
<td>職務(wù): <input type="text" id="title"/></td>
<td>部門: <input type="text" id="dept"/></td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" value="增加" onclick="addEmployee();"/>
</td>
</tr>
</table>
</form>
<span id="employeeListSpan" style="display:none;">
<h2>Employees:</h2>
<table border="1" width="80%">
<tbody id="employeeList"></tbody>
</table>
</span>
</body>
</html>
服務(wù)器：EmployeeListServlet.java
package ajaxbook.chap4;
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class EmployeeListServlet
extends HttpServlet {
private static final String CONTENT_TYPE = "text/html; charset=GBK";
//Initialize global variables
public void init() throws ServletException {
}
//Process the HTTP Get request
public void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
//處理方法參數(shù)
String action = request.getParameter("action");
if (action.equals("add")){
addEmployee(request,response);
}else if (action.equals("delete")){
deleteEmployee(request,response);
}
}
//增加員工
protected void addEmployee(HttpServletRequest request,
HttpServletResponse response) throws
ServletException, IOException {
//得到主鍵id
String uniqueID = storeEmployee();
//創(chuàng)建響應(yīng)字串
StringBuffer xml = new StringBuffer("<result><uniqueID>");
xml.append(uniqueID);
xml.append("</uniqueID>");
xml.append("<status>1</status>");
xml.append("</result>");
//發(fā)送
sendResponse(response, xml.toString());
}
//刪除員工
protected void deleteEmployee(HttpServletRequest request,
HttpServletResponse response) throws
ServletException, IOException {
//得到參數(shù)id
String id = request.getParameter("id");
//創(chuàng)建響應(yīng)字串
StringBuffer xml = new StringBuffer("<result>>");
xml.append("<status>1</status>");
xml.append("</result>");
//發(fā)送
sendResponse(response, xml.toString());
}
//發(fā)送響應(yīng)字串
private void sendResponse(HttpServletResponse response, String responseText)throws IOException {
response.setContentType("text/xml");
response.getWriter().write(responseText);
}
//模擬數(shù)據(jù)庫(kù)，得到主鍵id
private String storeEmployee() {
String uniqueID = "";
Random randomizer = new Random(System.currentTimeMillis());
for (int i = 0; i < 8; i++) {
uniqueID += randomizer.nextInt(9);
}
return uniqueID;
}
}
聯(lián)系客服
