`

Ajax_动态更新Web页面

阅读更多

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" 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>

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);
}
}

分享到:
评论

相关推荐

    web-15-ajax.zip_ajax_web ajax_zip_视频web

    **Ajax(Asynchronous JavaScript and XML)技术是Web开发中的一个重要组成部分,它允许在不刷新整个网页的情况下,与服务器交换数据并更新部分网页内容。Ajax的核心是JavaScript,它利用XMLHttpRequest对象作为后台...

    web_os.rar_ WebOS_ajax web_ajax web os_web OS _webos

    在WebOS中,用户界面和功能通常由一系列Web应用程序组成,这些程序通过JavaScript、HTML和CSS等Web标准技术编写,并借助Ajax技术实现动态更新。"web_os"可能是一个项目或框架,用于构建这种基于Web的操作环境。它...

    ajax_example.rar_ajax_ajax html_html ajax

    然后,将解析后的数据插入到HTML页面的相应位置,实现页面的动态更新。** **Ajax的使用显著提高了用户体验,因为它减少了页面加载时间,使得用户可以在等待后台处理时继续与页面的其他部分互动。同时,它也减轻了...

    CAjax.rar_Ajax 留言_ajax_ajax .net_ajax C#_net

    在.NET框架下,开发人员可以利用Ajax技术来构建更高效、更动态的Web应用程序。标题中的“CAjax.rar_Ajax 留言_ajax_ajax .net_ajax C#_net”表明这是一个关于使用C#和.NET框架实现Ajax无刷新留言功能的源码示例。这...

    pyecharts_Django_Ajax_web前后端分离demo.zip

    通过JavaScript(如jQuery库)实现Ajax请求,可以轻松地将接收到的数据动态插入到DOM中,更新图表或其他界面元素。 **4. 前后端交互流程** - 用户在前端界面上触发一个事件,例如点击按钮。 - 使用JavaScript(可能...

    AJAX_tutorial05_Web_Services_with_MS_Ajax_cs.pdf

    通过介绍基本概念、配置方法以及具体实现细节,帮助读者更好地理解如何利用ASP.NET AJAX进行动态数据注入或从前端页面向后端系统发送数据,而无需依赖于传统的页面回发(postback)操作。 #### 关键知识点 1. **Web...

    struts-ajax.rar_ajax struts _struts ajax_struts ajax war

    描述中提到"Ajax打破了使用页面重载的惯例技术组合",这指的是在传统的Web应用中,用户每次操作都可能导致整个页面的刷新,而Ajax通过XMLHttpRequest对象实现了只更新部分页面内容的功能,减少了网络传输的数据量,...

    AJAX_MG 页面动态分组信息显示

    **AJAX_MG 页面动态分组信息显示**是一种在网页中实现数据动态更新的技术,它主要基于AJAX(Asynchronous JavaScript and XML)技术,能够无需刷新整个页面即可更新部分网页内容。这种技术在JSP(JavaServer Pages)...

    四天学会ajax_ajax教程.pdf

    2. **JavaScript**:JavaScript是Ajax的核心,它负责处理用户交互、数据验证、与服务器的异步通信以及动态更新页面内容。通过JavaScript,Ajax能够实现非阻塞式请求,即在后台与服务器进行通信,用户可以继续浏览...

    SSH-Ajax.zip_SSH+ajax_SSH使用Ajax_ajax ssh_ssh ajax_ssh怎么用ajax

    Ajax允许网页通过JavaScript向服务器发送异步请求,获取数据,并在后台处理这些数据,然后动态更新页面的特定部分。这大大提高了用户体验,因为用户无需等待整个页面刷新就能看到结果。Ajax使用XMLHttpRequest对象...

    c+cgi+mysql+ajax_cgisql_cgi_sql_ajax_

    在IT领域,Web开发是一项核心技能,而"CGI(Common Gateway Interface)+MySQL+Ajax"的组合则为创建交互式、动态的Web应用程序提供了强大的工具。本项目以"C+cgi+mysql+ajax_cgisql_cgi_sql_ajax_"为主题,旨在实现...

    Ajax+JSP.rar_ajax_ajax jsp download_java ajax jsp_jsp ajax_jsp在线

    在Java Web开发中,JSP(JavaServer Pages)是一种动态网页技术,用于创建交互式、动态的Web应用程序。JSP可以结合Servlet、JavaBean等技术,提供后端的数据处理能力。当Ajax与JSP结合时,可以在客户端使用Ajax进行...

    ssah.rar_ajax_struct ajax_struct+spring

    在本项目中,AJAX可能被用来实现动态加载数据、无刷新提交表单等功能,提高系统的响应速度和用户交互性。 2. **Structs**: Structs是一个基于MVC(Model-View-Controller)模式的Java Web应用程序框架,简化了...

    Ajax_OnePage_crud_MySQL.rar_MYSQL_ajax增删改查_one page ajax_数据库 AJA

    综上所述,"Ajax_OnePage_crud_MySQL"项目展示了如何结合Ajax和MySQL实现一个动态的、无需刷新页面的Web应用,通过JavaScript与服务器进行交互,实现数据的增删改查功能。这要求开发者具备JavaScript、Ajax、MySQL和...

    spring_mvc_ajax.zip_SpringMVC ajax_SpringMVC+ajax_spring ajax_sp

    在IT领域,SpringMVC和Ajax是两个非常关键的技术组件,它们在构建高效、动态的Web应用程序中扮演着重要角色。本压缩包“spring_mvc_ajax.zip”包含了关于如何结合SpringMVC框架与Ajax技术来实现异步请求的示例和资源...

    smarty+AJAX.rar_ajax_ajax php_php ajax_smarty_smarty ajax

    在本实例中,“smarty+AJAX.rar”将展示如何结合Smarty模板系统和Ajax技术来实现动态交互的Web应用。 首先,我们需要了解Smarty的核心概念。Smarty是一个强大的模板系统,它的主要特点是提供了清晰的模板语法,让...

    my_employee_study.rar_Employee Stud_ajax_dwr_dwr ajax_上传 Java

    AJAX可以用来创建更动态、更交互的Web应用。 DWR(Direct Web Remoting)是一个开源的Java库,允许JavaScript和Java在浏览器端进行直接通信。DWR简化了AJAX的应用,提供了一种安全、高效的远程调用方法,使得前端...

    ASP_AJAX_Ext_Setup

    【ASP_AJAX_Ext_Setup】是一个针对Web开发的组件包,主要目的是为了实现AJAX(Asynchronous JavaScript and XML)技术,它提供了丰富的异步刷新功能,使得网页可以实现无需整个页面刷新即可更新部分内容的效果,提升...

Global site tag (gtag.js) - Google Analytics