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);
}
}
分享到：
相关推荐
**Ajax（Asynchronous JavaScript and XML）技术是Web开发中的一个重要组成部分，它允许在不刷新整个网页的情况下，与服务器交换数据并更新部分网页内容。Ajax的核心是JavaScript，它利用XMLHttpRequest对象作为后台...
在WebOS中，用户界面和功能通常由一系列Web应用程序组成，这些程序通过JavaScript、HTML和CSS等Web标准技术编写，并借助Ajax技术实现动态更新。"web_os"可能是一个项目或框架，用于构建这种基于Web的操作环境。它...
然后，将解析后的数据插入到HTML页面的相应位置，实现页面的动态更新。** **Ajax的使用显著提高了用户体验，因为它减少了页面加载时间，使得用户可以在等待后台处理时继续与页面的其他部分互动。同时，它也减轻了...
在.NET框架下，开发人员可以利用Ajax技术来构建更高效、更动态的Web应用程序。标题中的“CAjax.rar_Ajax 留言_ajax_ajax .net_ajax C#_net”表明这是一个关于使用C#和.NET框架实现Ajax无刷新留言功能的源码示例。这...
通过JavaScript（如jQuery库）实现Ajax请求，可以轻松地将接收到的数据动态插入到DOM中，更新图表或其他界面元素。 **4. 前后端交互流程** - 用户在前端界面上触发一个事件，例如点击按钮。 - 使用JavaScript（可能...
通过介绍基本概念、配置方法以及具体实现细节，帮助读者更好地理解如何利用ASP.NET AJAX进行动态数据注入或从前端页面向后端系统发送数据，而无需依赖于传统的页面回发(postback)操作。 #### 关键知识点 1. **Web...
描述中提到"Ajax打破了使用页面重载的惯例技术组合"，这指的是在传统的Web应用中，用户每次操作都可能导致整个页面的刷新，而Ajax通过XMLHttpRequest对象实现了只更新部分页面内容的功能，减少了网络传输的数据量，...
**AJAX_MG 页面动态分组信息显示**是一种在网页中实现数据动态更新的技术，它主要基于AJAX（Asynchronous JavaScript and XML）技术，能够无需刷新整个页面即可更新部分网页内容。这种技术在JSP（JavaServer Pages）...
2. **JavaScript**：JavaScript是Ajax的核心，它负责处理用户交互、数据验证、与服务器的异步通信以及动态更新页面内容。通过JavaScript，Ajax能够实现非阻塞式请求，即在后台与服务器进行通信，用户可以继续浏览...
这些案例展示了Ajax如何通过异步数据交换和局部页面更新来提供更加流畅、高效且丰富的用户体验。 #### 五、总结 综上所述，Ajax技术的出现标志着Web应用开发的一个重要转折点。它通过整合现有的多种技术，实现了更...
Ajax允许网页通过JavaScript向服务器发送异步请求，获取数据，并在后台处理这些数据，然后动态更新页面的特定部分。这大大提高了用户体验，因为用户无需等待整个页面刷新就能看到结果。Ajax使用XMLHttpRequest对象...
在IT领域，Web开发是一项核心技能，而"CGI（Common Gateway Interface）+MySQL+Ajax"的组合则为创建交互式、动态的Web应用程序提供了强大的工具。本项目以"C+cgi+mysql+ajax_cgisql_cgi_sql_ajax_"为主题，旨在实现...
在Java Web开发中，JSP（JavaServer Pages）是一种动态网页技术，用于创建交互式、动态的Web应用程序。JSP可以结合Servlet、JavaBean等技术，提供后端的数据处理能力。当Ajax与JSP结合时，可以在客户端使用Ajax进行...
在本项目中，AJAX可能被用来实现动态加载数据、无刷新提交表单等功能，提高系统的响应速度和用户交互性。 2. **Structs**： Structs是一个基于MVC（Model-View-Controller）模式的Java Web应用程序框架，简化了...
综上所述，"Ajax_OnePage_crud_MySQL"项目展示了如何结合Ajax和MySQL实现一个动态的、无需刷新页面的Web应用，通过JavaScript与服务器进行交互，实现数据的增删改查功能。这要求开发者具备JavaScript、Ajax、MySQL和...
在IT领域，SpringMVC和Ajax是两个非常关键的技术组件，它们在构建高效、动态的Web应用程序中扮演着重要角色。本压缩包“spring_mvc_ajax.zip”包含了关于如何结合SpringMVC框架与Ajax技术来实现异步请求的示例和资源...
在本实例中，“smarty+AJAX.rar”将展示如何结合Smarty模板系统和Ajax技术来实现动态交互的Web应用。 首先，我们需要了解Smarty的核心概念。Smarty是一个强大的模板系统，它的主要特点是提供了清晰的模板语法，让...
AJAX可以用来创建更动态、更交互的Web应用。 DWR（Direct Web Remoting）是一个开源的Java库，允许JavaScript和Java在浏览器端进行直接通信。DWR简化了AJAX的应用，提供了一种安全、高效的远程调用方法，使得前端...
【ASP_AJAX_Ext_Setup】是一个针对Web开发的组件包，主要目的是为了实现AJAX（Asynchronous JavaScript and XML）技术，它提供了丰富的异步刷新功能，使得网页可以实现无需整个页面刷新即可更新部分内容的效果，提升...