文件一览
- dynamicUpdate.html
- DynamicUpdateServlet.java
dynamicUpdate.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>Ajax Dynamic Update</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function doStart() {
createXMLHttpRequest();
var url = "DynamicUpdateServlet?task=reset";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = startCallback;
xmlHttp.send(null);
}
function startCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
setTimeout("pollServer()",5000);
refreshTime();
}
}
}
function pollServer() {
createXMLHttpRequest();
var url = "DynamicUpdateServlet?task=foo";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
function refreshTime() {
var time_span = document.getElementById("time");
var time_val = time_span.innerHTML;
var int_val = parseInt(time_val);
var new_int_val = int_val -1;
if (new_int_val > -1) {
setTimeout("refreshTime()",1000);
time_span.innerHTML = new_int_val;
} else {
time_span.innerHTML = 5;
}
}
function pollCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var message = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
if (message != "done") {
var new_row = createRow(message);
var table = document.getElementById("dynamicUpdateArea");
var table_body = table.getElementsByTagName("tbody").item(0);
var first_row = table_body.getElementsByTagName("tr").item(1);
table_body.insertBefore(new_row,first_row);
setTimeout("pollServer()",5000);
refreshTime();
}
}
}
}
function createRow(message) {
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_data = document.createTextNode(message);
cell.appendChild(cell_data);
row.appendChild(cell);
return row;
}
</script>
</head>
<body>
<h1>Ajax Dynamic Update Example</h1>
This page will automatically update itself:
<input type="button" value="Launch" id="go" onclick="doStart();" />
<p>
Page will refresh in <span id="time">5</span> seconds.
</p>
<table id="dynamicUpdateArea" align="left">
<tbody>
<tr id="row0"><td></td></tr>
</tbody>
</table>
</body>
</html>
DynamicUpdateServlet.java
package ajaxbook.chap4;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class DynamicUpdateServlet extends HttpServlet {
private int counter = 1;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String res = "";
String task = req.getParameter("task");
String message = "";
if (task.equals("reset")) {
counter = 1;
} else {
switch(counter) {
case 1: message = "Steve walks on stage";break;
case 2: message = "iPods rock";break;
case 3: message = "Steve Says Macs rule";break;
case 4: message = "Change is coming";break;
case 5: message = "Yes,OSX runs on Intel - has for years";break;
case 6: message = "Macs will soon hava Intel chips";break;
case 7: message = "done";break;
}
counter++;
}
res = "<message>"+message+"</message>";
PrintWriter out = resp.getWriter();
resp.setContentType("text/xml");
resp.setHeader("Cache-Control", "no-cache");
out.println("<response>");
out.println(res);
out.println("</response>");
out.close();
}
}
执行效果如下图
- 大小: 28.5 KB
分享到:
相关推荐
实现自动刷新页面 本例实现页面自动刷新的效果,该页面的内容如图5-4所示,在该页面中将根据数据库中存储的最新数据信息更新页面中热卖商品的信息,但是对这些信息的修改并不会导致整个页面的刷新。 实际的Web应用中...
Ajax简介: AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)...传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。 html部分: <!DOCTYPE html> <html lang="en"> <
传统的聊天室基于客户端网页的自动刷新技术而实现,它的主要缺点是不断刷新页面造成屏幕的闪动,而经过了Ajax改造后的聊天室,每次只获取最新的发言信息,并将获取结果动态写入页面,不会有以上的缺点 ………………...
目录不存在则自动创建; maxCount:最大允许的上传数量;不设置为不限制上传数量 fn:上传过程的回调函数,传递的参数为文件信息数组;设置本参数后inputCtrl参数将失效 举例说明: showUpload(null,'files','',999,null...
4.4 创建自动刷新页面 85 4.5 显示进度条 90 4.6 创建工具提示 95 4.7 动态更新web页面 101 4.8 访问web服务 110 4.9 提供自动完成 116 4.10 小结 123 第5章 构建完备的ajax开发工具箱 125 5.1 使用jsdoc...
Razor功能非常强大,但是本身并不能做到无刷新,所以需要配合ajax使用。本文通过一个例子给大家介绍使用Ajax局部更新Razor页面,需要的朋友参考下吧
UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager...
同时,使用AJAX,我们可以创建更快速和交互式页面。特别是,jQuery和jQueryUI是无价的库来执行操作在一个HTML页面并执行AJAX请求到服务器。 用户不再需要离开的记录列表”页面创建/编辑或删除记录。同样,页面刷新本身...
实例3 中文时间显示实例 实例4 删除字符串中的空白 ...实例53 页面自动刷新时间 实例54 实现新闻滚动播放 第7章 实现高级Ajax技术 第8章 Ajax数据库操作 第9章 Ajax时尚技术 第10章 Ajax实现综合实例
实例53 页面自动刷新时间 实例54 实现新闻滚动播放 第7章 实现高级Ajax技术 实例 55创建工具提示 实例 56读取响应首部 实例 57动态加载列表框 实例 58显示进度条 实例 59数据无刷新写入文本文件 实例60 提供...
在完成拖拽后,无须刷新页面,即可保存布局。 源码结构说明 1.AjaxDemo文件夹下为源文件 2.AjaxDemo.war为部署文件 <br>第20章 程序描述:本章将实现上传文件时显示进度条的功能。当上传文件时,...
不需要刷新页面。当不支持Flash或javascript时,能够自动变成正常的HTML上传Form。可以在上传开始前控制文件大小。当上传多个文件时,它将自动创建上传队列,在还没有开始上传前可从队列中移除或添加文件。
打开阅读RSS时,自动获取最新的RSS内容,而无需刷新页面。 /RSSReader.jsp RSS阅读器 /rss.js JavaScript脚本文件 第25章(/ch25) 程序描述:本章将仿照Google Suggest,使用Ajax技术实现动态获取...
模仿模态窗口的浮动层,并且浮动层中内容通过ajax实现异步刷新. 1,无限制弹出层,多次弹出层的话,要标明序号0,1,2... 2,弹出层时,禁止滚动条、禁止刷新。如有多层弹出层,则只有将最先弹出的层关闭,才可以...
2.3.2 解决多余刷新的问题 16 2.3.3 解析服务器响应 19 2.3.4 何时发送请求 20 2.3.5 Ajax 聊天室的特点 24 2.4 传统 Web 应用与 Ajax 的对比 24 2.5 小结 25 第 17章 基于 JSON-RPC-Java 的 Ajax 应用:在线...
8.17 在页面级创建全局的AJAX监听器以及状态指示器 8.18 级联AJAX数据异步加载 8.19 取消AJAX异步请求 第9章 jQuery常用算法 9.1 jQuery遍历算法 9.2 jQuery祖先算法 9.3 jQuery后代算法 9.4 jQuery同胞算法 9.5 ...
\ajaxmodel\src\bonze\AutoRefServlet.java 自动刷新网页的服务器端。 \ajaxmodel\src\bonze\ProcessServlet.java 显示进度条的服务器端。 第20章(\c20) 示例描述:学习JSON并介绍Ajax与JSON。 20.1....
OA办公自动化管理系统是一个基于Struts1.2、Hibernate3.0、Spring2和DWR技术实现的Java Web应用项目。该系统采用了MVC设计模式,将业务逻辑、数据访问和表示层分离,提高了代码的可维护性和可...它可以实现在不刷新页面
TP新版抢单系统,招财宝自由宝 HZ区块系统源码带门票支付与激活码功能源代码全开源无加密[Thinkphp 内核] 源码为原始版本 完整版本 为框架源码 如完善细节功能运营请自行修改二开 ...新增 AJAX 页面无刷新管理功能