编辑“Ajax- 动态更新Web页面”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[Ajax学习教程#Ajax学习教程|上一页]] | {{template:开发语言导航}}</span>
<div style="clear:both;"></div>

如前所述，如果页面中只有一小部分需要修改，此时Ajax技术最适用。换句话说，以前实现一些用例时，为了更新页面中的一小部分总是需要使用完全页面刷新，这些用例就很适合采用Ajax技术   <br>

考虑一个有单个页面的用例，用户向这个页面输入的信息要增加到列表中。在这个例子中，你会看到列出某个组织中员工的Web页面。页面最上面有3个输入框，分别接受员工的姓名、职位和部门。点击Add（增加）按钮，将员工的姓名、职位和部门数据提交到服务器，在这里将这些员工信息增加到数据库中。<br>

当使用传统的Web应用技术时，服务器以重新创建整个页面来做出响应，与前一个页面相比，惟一的差别只是新员工信息会增加到列表中。在这个例子中，我们要使用Ajax技术异步地将员工数据提交到服务器，并把该数据插入到数据库中。服务器发送一个状态码向浏览器做出响应，指示数据库操作是否成功。假设数据库成功插入，浏览器会使用JavaScript DOM操作用新员工信息动态更新页面内容。这个例子中还创建了Delete（删除）按钮，以便从数据库中删除员工信息。<br>

代码清单4-13显示了HTML Web页面的源代码。这个页面有两部分：第一部分包括一些输入框，分别接受员工姓名、职位和部门的数据，以及启动数据库插入的Add按钮；第二部分列出数据库中的所有员工，每个记录有自己的Delete按钮，从而能从数据库删除这个记录的信息。<br>

代码清单4-13  employeeList.html<br>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br>
  <nowiki>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></nowiki><br>
 <nowiki><html xmlns="http://www.w3.org/1999/xhtml"></nowiki><br>
 <head><br>
 <title>Employee List</title><br>
 <script type="text/javascript"><br>
 var xmlHttp;<br>
 var name;<br>
 var title;<br>
 var department;<br>
 var deleteID;<br>
 var EMP_PREFIX = "emp-";<br>
 function createXMLHttpRequest() {<br>
    if (window.ActiveXObject) {<br>
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");<br>
    }<br>
    else if (window.XMLHttpRequest) {<br>
        xmlHttp = new XMLHttpRequest();<br>
    }<br>
 }<br>
 function addEmployee() {<br>
    name = document.getElementById("name").value;<br>
    title = document.getElementById("title").value;<br>
    department = document.getElementById("dept").value;<br>
    action = "add";<br>
    if(name == "" || title == "" || department == "") {<br>
        return;<br>
    }<br>
    var url = "EmployeeList?"<br>
        + createAddQueryString(name, title, department, "add")<br>
        + "&ts=" + new Date().getTime();<br>
    createXMLHttpRequest();<br>
    xmlHttp.onreadystatechange = handleAddStateChange;<br>
    xmlHttp.open("GET", url, true);<br>
    xmlHttp.send(null);<br>
 }<br>
 function createAddQueryString(name, title, department, action) {<br>
    var queryString = "name=" + name<br>
        + "&title=" + title<br>
        + "&department=" + department<br>
        + "&action=" + action;<br>
    return queryString;<br>
 }<br>
 function handleAddStateChange() {<br>
    if(xmlHttp.readyState == 4) {<br>
       if(xmlHttp.status == 200) {<br>
            updateEmployeeList();<br>
            clearInputBoxes();<br>
        }<br>
        else {<br>
            alert("Error while adding employee.");<br>
        }<br>
    }<br>
 }<br>
 function clearInputBoxes() {<br>
    document.getElementById("name").value = "";<br>
    document.getElementById("title").value = "";<br>
    document.getElementById("dept").value = "";<br>
 }<br>
 function deleteEmployee(id) {<br>
    deleteID = id;<br>
    var url = "EmployeeList?"<br>
        + "action=delete"<br>
        + "&id=" + id<br>
        + "&ts=" + new Date().getTime();<br>
    createXMLHttpRequest();<br>
    xmlHttp.onreadystatechange = handleDeleteStateChange;<br>
    xmlHttp.open("GET", url, true);<br>
    xmlHttp.send(null);<br>
 } <br>
 function updateEmployeeList() {<br>
    var responseXML = xmlHttp.responseXML;<br>
    var status = responseXML.getElementsByTagName("status")<br>
                                               .item(0).firstChild.nodeValue;<br>
    status = parseInt(status);<br>
    if(status != 1) {<br>
        return;<br>
    }<br>
    var row = document.createElement("tr");<br>
    var uniqueID = responseXML.getElementsByTagName("uniqueID")[0]<br>
                                                   .firstChild.nodeValue;<br>
    row.setAttribute("id", EMP_PREFIX + uniqueID);<br>
    row.appendChild(createCellWithText(name));<br>
    row.appendChild(createCellWithText(title));<br>
    row.appendChild(createCellWithText(department));<br>
    var deleteButton = document.createElement("input");<br>
    deleteButton.setAttribute("type", "button");<br>
    deleteButton.setAttribute("value", "Delete");<br>
    deleteButton.onclick = function () { deleteEmployee(uniqueID); };<br>
    cell = document.createElement("td");<br>
    cell.appendChild(deleteButton);<br>
    row.appendChild(cell);<br>
    document.getElementById("employeeList").appendChild(row);<br>
   updateEmployeeListVisibility();<br>
 }<br>
 function createCellWithText(text) {<br>
    var cell = document.createElement("td");<br>
    cell.appendChild(document.createTextNode(text));<br>
    return cell;<br>
 }<br>
 function handleDeleteStateChange() {<br>
    if(xmlHttp.readyState == 4) {<br>
        if(xmlHttp.status == 200) {<br>
            deleteEmployeeFromList();<br>
        }<br>
        else {<br>
            alert("Error while deleting employee.");<br>
        }<br>
    }<br>
 }<br>
 function deleteEmployeeFromList() {<br>
    var status =<br>
                    xmlHttp.responseXML.getElementsByTagName("status")<br>
                    .item(0).firstChild.nodeValue;<br>
    status = parseInt(status);<br>
    if(status != 1) {<br>
        return;<br>
    }<br>
    var rowToDelete = document.getElementById(EMP_PREFIX + deleteID);<br>
    var employeeList = document.getElementById("employeeList");<br>
    employeeList.removeChild(rowToDelete);<br>
    updateEmployeeListVisibility();<br>
 }<br>
 function updateEmployeeListVisibility() {<br>
    var employeeList = document.getElementById("employeeList");<br>
    if(employeeList.childNodes.length > 0) {<br>
        document.getElementById("employeeListSpan").style.display = "";<br>
    }<br>
    else {<br>
        document.getElementById("employeeListSpan").style.display = "none";<br>
    }<br>
 }<br>
 </script><br>
 </head><br>
 <nowiki><body></nowiki><br>
  <nowiki>v<h1>Employee List</h1></nowiki><br>
  <nowiki><form action="#"></nowiki><br>
    <nowiki><table width="80%" border="0"></nowiki><br>
        <nowiki><tr></nowiki><br>
            <nowiki><td>Name: <input type="text" id="name"/></td></nowiki><br>
            <nowiki><td>Title: <input type="text" id="title"/></td></nowiki><br>
            <nowiki><td>Department: <input type="text" id="dept"/></td></nowiki><br>
        <nowiki></tr></nowiki><br>
        <nowiki><tr></nowiki><br>
            <nowiki><td colspan="3" align="center"></nowiki><br>
                <nowiki><input type="button" value="Add" onclick="addEmployee();"/></nowiki><br>
            <nowiki></td></nowiki><br>
        <nowiki></tr></nowiki><br>
    <nowiki></table></nowiki><br>
  <nowiki></form></nowiki><br>
 <nowiki><span id="employeeListSpan" style="display:none;"></nowiki><br>
  <nowiki><h2>Employees:</h2></nowiki><br>
  <nowiki><table border="1" width="80%"></nowiki><br>
    <nowiki><tbody id="employeeList"></tbody></nowiki><br>
  <nowiki></table></nowiki><br>
  <nowiki> </span></nowiki><br>
 </body><br>
 </html><br>

点击Add按钮启动数据库插入操作。基于Add按钮的onclick事件将调用addEmployee函数。addEmployee函数使用createAddQueryString来建立查询串，其中包括用户输入的员工姓名、职位和部门信息。创建XMLHttpRequest对象并设置onreadystatechange事件处理程序后，请求提交到服务器。<br>

代码清单4-14列出了处理请求的Java servlet，当接收到请求时将调用servlet的doGet方法。这个方法获取查询串action参数的值，并把请求指向适当的方法。如果是增加信息，请求指向addEmployee方法。<br>

代码清单4-14  EmployeeListServlet.java<br>

 package ajaxbook.chap4;<br>
 import java.io.*;<br>
 import java.net.*;<br>
 import java.util.Random;<br>
 import javax.servlet.*;<br>
 import javax.servlet.http.*;<br>
 public class EmployeeListServlet extends HttpServlet {<br>
    protected void addEmployee(HttpServletRequest request<br>
                                               , HttpServletResponse response)<br>
    throws ServletException, IOException {<br>
        //Store the object in the database<br>
        String uniqueID = storeEmployee();<br>
        //Create the response XML<br>
        StringBuffer xml = new StringBuffer("<result><uniqueID>");<br>
        xml.append(uniqueID);<br>
        xml.append("</uniqueID>");<br>
        xml.append("</result>");<br>
       //Send the response back to the browser<br>
        sendResponse(response, xml.toString());<br>
    }<br>
    protected void deleteEmployee(HttpServletRequest request<br>
                                               , HttpServletResponse response)<br>
    throws ServletException, IOException {<br>
        String id = request.getParameter("id");<br>
        /* Assume that a call is made to delete the employee from the database */<br>
        //Create the response XML<br>
        StringBuffer xml = new StringBuffer("<result>");<br>
        xml.append("<status>1</status>");<br>
        xml.append("</result>");<br>
        //Send the response back to the browser<br>
        sendResponse(response, xml.toString());<br>
    }<br>
    protected void doGet(HttpServletRequest request, HttpServletResponse response)<br>
    throws ServletException, IOException {<br>
        String action = request.getParameter("action");<br>
        if(action.equals("add")) {<br>
            addEmployee(request, response);<br>
        }<br>
        else if(action.equals("delete")) {<br>
            deleteEmployee(request, response);<br>
        }<br>
    }<br>
    private String storeEmployee() {<br>
        /* Assume that the employee is saved to a database and the<br>
         * database creates a unique ID. Return the unique ID to the<br>
         * calling method. In this case, make up a unique ID.<br>
         */<br>
        String uniqueID = "";<br>
        Random randomizer = new Random(System.currentTimeMillis());<br>
        for(int i = 0; i < 8; i++) {<br>
            uniqueID += randomizer.nextInt(9);<br>
        }<br>
        return uniqueID;<br>
    }<br>
    private void sendResponse(HttpServletResponse response, String responseText)<br>
    throws IOException {<br>
        response.setContentType("text/xml");<br>
        response.getWriter().write(responseText);<br>
    }<br>
}<br>

addEmployee函数负责协调数据库插入和服务器响应。addEmployee方法委托store- Employee方法完成具体的数据库插入。在实际实现中，storeEmployee方法很可能调用数据库服务，由它处理数据库插入的具体细节。在这个简化的例子中，storeEmployee将模拟数据库插入，其方法是生成一个随机的惟一ID，模拟实际数据库插入可能返回的ID。生成的惟一ID再返回给addEmployee方法。<br>

假设数据库插入成功，addEmployee方法则继续准备响应。响应是一个简单的XML串，它向浏览器返回一个状态码。XML通过串连接创建，然后写至响应的输出流。<br>

浏览器通过调用handleAddStateChange方法来处理服务器的响应。只要XMLHttpReq-
uest对象发出信号指出其内部准备状态有变化，就会调用这个方法。一旦readystate属性指示服务器响应已经成功完成，就会调用updateEmployeeList函数，然后再调用clear-
InputBoxes函数。updateEmployeeList函数负责把成功插入的员工信息增加到页面上显示的员工列表中。clearInputBoxes函数是一个简单的工具方法，它会清空输入框，准备接收下一个员工的信息。<br>

updateEmployeeList函数向表中增加行以列出员工的信息。首先使用document.cre-
ateElement方法来创建表行的一个实例。这一行的id属性设置为包括由数据库插入生成的惟一ID的值。id属性值惟一地标识了表行，这样点击Delete按钮时就能很容易地从表中删除这一行。<br>

updateEmployeeList函数使用名为createCellWithText的工具函数来创建表单元格元素，其中包含指定的文本。createCellWithText函数分别为用户输入的姓名、职位和部门信息创建表单元格，再把各个单元格增加到先前创建的表行中。<br>

最后要创建的是Delete按钮以及包含这个按钮的单元格。使用document.createElement方法创建通用的输入元素，其type和value属性分别设置为button和Delete，这样就能创建Delete按钮。再创建表单元格，用来放置Delete按钮，并把Delete按钮作为子元素增加到表单元格。然后把这个单元格增加到表行，接下来将这一行增加到员工列表中，现在行中已经包含了对应员工姓名、职位、部门和Delete按钮的单元格。<br>

删除员工与增加员工的工作是一样的。Delete按钮的onclick事件处理程序调用delete-
Employee函数，将员工的惟一ID传递给这个函数。此时创建一个简单的查询串，指示想做的动作（删除）和要删除的员工记录的惟一ID。XMLHttpRequest对象的onreadystatechange属性设置为所需的事件处理程序后，提交请求。<br>

EmployeeListServlet servlet使用deleteEmployee方法来处理员工删除用例。这个例子做了简化，在此假设还有另一个方法处理数据库删除的具体细节。如果成功地完成了数据库删除，deleteEmployee方法会准备XML串，返回给浏览器。与员工增加用例类似，这个用例向浏览器返回一个状态码。一旦创建XML串，则将XML串通过响应对象的输出流写回到浏览器。<br>

浏览器通过handleDeleteStateChange函数处理服务器响应，如果响应成功，将转发到deleteEmployeeFromList方法。deleteEmployeeFromList函数从XML响应获取状态码，如果状态码指示删除不成功，这个函数将立即退出。假设成功地完成了删除操作，这个函数则会继续，使用document.getElementById方法获取表示所删除信息的表行，然后使用表体的removeChild方法从中删除这一行。<br>

为什么不使用setattribute方法来设置DELETE按钮的事件处理程序？<br>

你可能已经注意到，设置Delete按钮的事件处理程序时采用了何种方法。你可能认为，设置Delete按钮的onclick事件处理程序的代码应该如下所示：<br>

deleteButton.setAttribute("onclick", "deleteEmployee('" + unique_id + "');");<br>

确实，这个代码从理论上是对的，它遵循W3C标准，而且在大多数当前浏览器中都可行，只有IE例外。幸运的是，对于IE也有一个解决办法，它可以在Firefox、Opera、Safari和Konqueror中适用。<br>

这种解决办法是使用点记法引用Delete按钮的onclick事件处理程序，然后使用调用deleteEmployee函数的匿名函数来设置事件处理程序。<br>

图4-14显示了实际运行的动态更新例子。<br>
[[Image:image014.jpg]] 
图4-14  每次点击Add按钮时每个姓名动态增加到列表中，而不必每次都刷新页面<br>
[[category:Ajax]]