动态更新Web页面

最新推荐文章于 2024-03-21 22:16:44 发布
最新推荐文章于 2024-03-21 22:16:44 发布
阅读量671 收藏
点赞数
分类专栏： AJAX
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lishirong/article/details/41674325
版权
效果截图：
动态更新Web页面 - lishirong - The CTO of LiShirong

插入的数据可以及时的在当前页中进行显示，主要采用AJAX技术

静态页面：employeeList.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工列表</title>
<script type="text/javascript" language="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("department").value;
action="add";
if(name==""||title==""||department==""){
return;
}
var url="servlet/EmployeeListServlet?"+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,deparment,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("department").value="";
}
function deleteEmployee(id){
deleteID=id;
var url="servlet/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;
}
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.οnclick=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 bgcolor="#CCFFFF">
<h1 align="center">增加员工</h1>
<form action="#">
<table width="80%" border="0"> 
<tr>
<td>姓名:&nbsp;&nbsp;<input type="text" id="name"/></td>
<td>职位:&nbsp;&nbsp;<input type="text" id="title"/></td>
<td>部门:&nbsp;&nbsp;<input type="text" id="department"/></td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" value="增加" οnclick="addEmployee();"/>
</td>
</tr>
</table>
</form>
<span id="employeeListSpan" style="display:none">
<h2>员工列表:</h2>
<table border="1" width="80%">
<tbody id="employeeList"></tbody>
</table>
</span>
</body>
</html>



处理的Servlet：EmployeeListServlet.java

package servlet;

import java.io.*;
import java.net.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class EmployeeListServlet extends HttpServlet {
protected void addEmployee(HttpServletRequest req, HttpServletResponse res)
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("</result>");
//Send the response back to the browser
sendResponse(res,xml.toString());
}
protected void deleteEmployee(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
String id=req.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(res,xml.toString());
}
public void doGet(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(){
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 ServletException, IOException {
response.setContentType("text/xml");
response.getWriter().write(responseText);
}

}
李世荣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
websocket实现前端页面动态刷新数据库中数据
12-19
使用websocket+mysql+java8+Tomcat8技术，管理端动态添加数据到数据库，用户端实时刷新新添加的数据。
ajax web动态更新
12-22
总结来说，Ajax是Web开发中实现页面动态更新的关键技术，它通过异步通信提升了用户体验，简化了用户交互过程，而掌握Ajax的使用对于任何Web开发者来说都是必备的技能。通过持续学习和实践，我们可以更好地利用Ajax...
用推送技术动态更新页面内容
muwenyi的专栏
08-17 2857
 用推送技术动态更新页面内容（松下客　2001年06月06日 21:15）一、什么是动态内容大多数热门Web网站都从在线广告业务获利。Web页面中的广告空间是有限的，为了让广告投资物有所值，广告客户不仅必须在很小的广告空间内塞入大量的信息，而且还要保证广告能够吸引用户的注意力。在当前的大多数网站上，放入Web页面的横幅广告一般由服务器在构造页面的同时生成，我们无法把新的广告动态地插入到已经
如何实现页面时间动态更新，页面动态刷新
Zoe_YuZu的博客
07-22 2433
在写页面时，有些需求对时间节点要求比较严格，时间需得动态跟新，如图： 第一步，首先添加控件label 添加两个分别放日期、具体的时间 分别命名为lbDate、lbTime 第二步，添加控件Timer private void timer_Tick(object sender, EventArgs e) { DateTime dt; ...
如何动态更新页面？
weixin_30536513的博客
06-21 325
比如，短消息提示信息，如何检测数据库数据变化，然后让页面显示短消息提示信息，如何在页面时时显示服务器时间？ 转载于:https://www.cnblogs.com/playboy2005/archive/2004/06/21/17460.html...
Ajax_动态更新Web页面
我的IT技术杂谈
04-21 121
JSP部分： &lt;%@ page language="java" import="java.util.*" pageEncoding="gbk"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
WEB开发中文动态网页CAP1.8
11-21
"WEB开发中文动态网页CAP1.8"的标题表明这可能是一个教程或项目，旨在帮助开发者理解和应用CAP框架来创建中文动态网页。 CAP（Chinese Application Platform）是一个以中文编程为特色的开发平台，它的设计目标是...
Java Web动态图表编程
12-30
2. AJAX：通过AJAX异步请求，可以从服务器获取新数据，动态更新图表，实现无刷新的数据刷新。 3. WebSocket：对于需要实时更新的图表，WebSocket提供了双向通信的能力，可以在服务器数据更新时即时推送到客户端。 ...
动态web开发
07-14
JSP（JavaServer Pages）是基于Servlet技术的，提供了更便捷的方式来创建动态网页。开发者可以在JSP页面中混合HTML代码和Java代码，让页面具有动态生成内容的能力。 2. **MVC模式**：Model-View-Controller（模型-...
WEBUPDATE(在线升级专家)
02-23
用于网络升级的控件，使用方便。自动检索Internet或Intranet上的程序升级版本。可通过HTTP、FTP检索文件升级版本。等等......总之是我见到的此类控件中功能最全的。
cgi ajax js 刷新 html
12-17
cgi ajax js 刷新 html
HTML动态包含页面
08-29
HTML动态包含页面
动态背景登录页面(基于jquery)
04-27
动态登录基于jquery做的，每隔几秒会自动将登录背景图片切换
动态更新web画面
hty68024352的专栏
05-12 90
本实例根据文本框入力的值，更新到表格行上。通过表格上的删除按钮可以删除该行记录   文件一览 employeeList.html EmployeeListServlet employeeList.html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/h...
ajax 动态无刷新更新网页
xiaogeasd的专栏
12-05 947
    pageEncoding="GBK"%>var xmlHR; function createXMLHttpRequest()//创建XmlHttpRequest对象 {    if(window.ActiveXObject)  {   xmlHR=new ActiveXObject("Microsoft.XMLHTTP");    }  else if(window.XMLHttpRequ
实现Web页面局部动态更新
lateblue的专栏
10-17 2191
实现Web页面局部动态更新在浏览网页时，有时往往因为查看局部信息，而导致整个网页都需要从服务器端重新加载一次。传统的Web实现方式中，实现类似的效果必须进行整个页面的刷新。但是借助Ajax技术，可以实现对页面中局部区域的动态刷新，使得用户能够以更好的方式获得最新的数据信息。只更新需要查看的信息，页面中其他信息保持不变。局部动态更新是Ajax技术主要功能表现之一。现在创建一个案例，演示使用A
ESP8266使用AJAX技术实现动态更新网页
岔路ko的博客
10-14 1520
工程资料上传中 在许多物联网应用中，有些情况下需要连续监控传感器数据，而最简单的方法是通过使用ESP8266 Web服务器来提供HTML网页服务。但是这种方法的问题在于，必须以特定的时间间隔刷新Web浏览器才能获取更新的传感器数据。这不仅效率低下，而且需要很多时钟周期才能执行其他任务。该问题的解决方案称为“Asynchronous JavaScript and XML”或简称AJAX。使用AJAX技术，我们可以监视实时数据而无需刷新整个网页，这不仅节省了时间，而且还节省了宝贵的时钟周期。通过本文，您将学习如
AJAX 前端开发利器：实现网页动态更新的核心技术
最新发布
小万哥的博客
03-21 996
AJAX = 异步JavaScript和XML。AJAX不是一种编程语言。浏览器内置的XMLHttpRequest对象（用于从Web服务器请求数据）JavaScript和HTML DOM（用于显示或使用数据）AJAX是一个具有误导性名称的技术。AJAX应用程序可能使用XML传输数据，但以纯文本或JSON文本传输数据同样常见。AJAX允许通过在幕后与Web服务器交换数据，异步更新Web页面。这意味着可以更新Web页面的部分，而不必重新加载整个页面。
动态Web页面生成原理与技术
静态页面的内容是固定的，无法提供交互性或动态更新，更多地被视为平面设计作品，仅能展示静态文本和图像。 2. 静态Web页面的工作原理 静态页面在服务器上被预先创建并存储，当用户请求时，服务器直接将对应的HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值