JSP部分：
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Employee List</title> <script type="text/javascript"> var xmlHttp; var name; var title; var department; var deleteID; var EMP_PREFIX = "emp-";
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 = "EmployeeList?"+ createAddQueryString(name, title, department, "add") + "&ts=" + new Date().getTime(); createXMLHttpRequest(); xmlHttp.onreadystatechange = handleAddStateChange; xmlHttp.open("GET", url, true); xmlHttp.send(null); }
function createAddQueryString(name, title, department, action) { var queryString = "name=" + name + "&title=" + title + "&department=" + department + "&action=" + action; return queryString; }
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 = "EmployeeList?" + "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; } var row = document.createElement("tr"); var uniqueID = responseXML.getElementsByTagName("uniqueID")[0].firstChild.nodeValue; row.setAttribute("id", EMP_PREFIX + uniqueID); row.appendChild(createCellWithText(name)); row.appendChild(createCellWithText(title)); row.appendChild(createCellWithText(department)); var deleteButton = document.createElement("input"); deleteButton.setAttribute("type", "button"); deleteButton.setAttribute("value", "Delete"); deleteButton.onclick = function () { deleteEmployee(uniqueID); }; cell = document.createElement("td"); cell.appendChild(deleteButton); row.appendChild(cell); document.getElementById("employeeList").appendChild(row); updateEmployeeListVisibility(); }
function createCellWithText(text) { var cell = document.createElement("td"); cell.appendChild(document.createTextNode(text)); return cell; }
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> Employee List </h1> <form action="#" method="post"> <table width="80%" border="0"> <tr> <td> Name: <input type="text" id="name" /> </td> <td> Title: <input type="text" id="title" /> </td> <td> Department: <input type="text" id="dept" /> </td> </tr> <tr> <td colspan="3" align="center"> <input type="button" value="Add" οnclick="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>
Servlet部分：
public class EmployeeList extends HttpServlet {protected void addEmployee(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // Store the object in the database String uniqueID = storeEmployee(); // Create the response XML StringBuffer xml = new StringBuffer("<result><uniqueID>"); xml.append(uniqueID); xml.append("</uniqueID>"); xml.append("<status>1</status>"); xml.append("</result>"); // Send the response back to the browser sendResponse(response, xml.toString());}
protected void deleteEmployee(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String id = request.getParameter("id"); /* Assume that a call is made to delete the employee from the database */ // Create the response XML StringBuffer xml = new StringBuffer("<result>"); xml.append("<status>1</status>"); xml.append("</result>"); // Send the response back to the browser sendResponse(response, xml.toString());}public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String action = request.getParameter("action"); if (action.equals("add")) { addEmployee(request, response); } else if (action.equals("delete")) { deleteEmployee(request, response); }}
private String storeEmployee() { /* * Assume that the employee is saved to a database and the database * creates a unique ID. Return the unique ID to the calling method. In * this case, make up a unique ID. */ String uniqueID = ""; Random randomizer = new Random(System.currentTimeMillis()); for (int i = 0; i < 8; i++) { uniqueID += randomizer.nextInt(9); } return uniqueID;}
private void sendResponse(HttpServletResponse response, String responseText) throws IOException { response.setContentType("text/xml"); response.getWriter().write(responseText);}}
相关资源：ajax动态创建自动刷新页面