JSP部分：
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<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>
Servlet部分：
public class DynamicUpdateServlet extends HttpServlet {
private int counter = 1;
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 res = "";
String task = request.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, OS X runs on Intel - has for years";
break;
case 6:
message = "Macs will soon have Intel chips";
break;
case 7:
message = "done";
break;
}
counter++;
}
res = "<message>" + message + "</message>";
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
out.println("<response>");
out.println(res);
out.println("</response>");
out.close();
}
}
分享到：
相关推荐
实现自动刷新页面 本例实现页面自动刷新的效果，该页面的内容如图5-4所示，在该页面中将根据数据库中存储的最新数据信息更新页面中热卖商品的信息，但是对这些信息的修改并不会导致整个页面的刷新。 实际的Web应用中...
AJAX (Asynchronous JavaScript and XML) 和 JSON (JavaScript Object Notation) 是Web开发中的核心技术，它们结合使用可以实现页面无刷新地实时更新数据，提供更好的用户体验。本篇将深入讲解如何利用AJAX和JSON每...
Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在Java中，我们可以利用Ajax实现页面的动态刷新，提高用户体验，因为它允许后台与服务器进行异步数据交换...
在本项目中，AJAX可能被用来实现动态加载数据、无刷新提交表单等功能，提高系统的响应速度和用户交互性。 2. **Structs**： Structs是一个基于MVC（Model-View-Controller）模式的Java Web应用程序框架，简化了...
**Ajax与DWR：实现页面无刷新加载** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新，提高...
- 实时聊天：用户间的消息传递无需刷新页面。 - 图表和仪表盘：实时更新数据的可视化组件。 总的来说，AJAX_DWR框架结合了AJAX的异步通信能力和DWR的远程调用便利性，为Web开发者提供了构建富互联网应用的强大工具...
标题"jsp+ajax自动刷新实例.zip"揭示了这是一个关于使用JavaServer Pages（JSP）和Asynchronous JavaScript and XML（Ajax）技术实现页面自动刷新的实例项目。这里的关键词是“jsp”和“ajax”，它们是Web开发中的...
Ajax允许在不刷新整个页面的情况下与服务器进行数据交互，而jQuery则是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互。"Ajax_Jquery_Demo"这个压缩包文件提供了学习和实践这两个技术的...
在滚动加载更多内容或自动刷新新闻列表的场景下，定时器可以确保用户在浏览过程中不会感到内容突然变化。 **3.3 节能模式** 对于需要节省服务器资源或减少网络拥堵的情况，可以通过调整定时器间隔，降低请求频率。 ...
这种方式可以让网页更加互动，提升用户体验，因为用户无需等待页面刷新就能看到更新的内容。 DWR (Direct Web Remoting) 是一个开源Java库，它允许JavaScript在客户端与服务器端进行直接的远程方法调用(RMI)。DWR...
2. AJAX与TextBox结合：详细阐述了如何将AJAX技术应用于TextBox控件，比如使用AJAX库（如jQuery或Microsoft的ASP.NET AJAX Framework）来实现无刷新的输入验证和数据提交。 3. 实时验证：讲解了如何实现TextBox的...
AJAX（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，从而极大地提升了用户体验。 **主要知识点：** ...
3. **Ajax**: Ajax（异步JavaScript和XML）是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在这个场景中，Ajax用于处理点击验证码图片的事件，向服务器发送请求，接收新验证码，然后更新DOM...
【Ajax商品滚动无刷新自动更新】技术是一种网页交互体验的优化方法，它允许网页在不进行整个页面刷新的情况下，仅通过后台与服务器交换少量数据，从而实现页面内容的动态更新。这种方式极大地提高了用户体验，减少了...
3. **AJAX支持**：通过使用AJAX技术，这些控件可以在不刷新整个页面的情况下更新部分内容，从而提高应用的响应速度和用户体验。 4. **主题和皮肤**：Telerik UI提供了多种预定义的主题和皮肤，可以轻松调整应用程序...
本案例中，开发者实现了每隔一秒钟自动刷新页面的功能，以便实时显示本地文档的最新内容。 【描述】提到的"可以读取本地的文档并实时的显示在网页上"，意味着系统通过JSP页面与服务器端的交互，实现了文件I/O操作和...
AJAX是一种在无需刷新整个页面的情况下，能够更新部分网页的技术。它通过后台与服务器进行少量数据交换，实现了页面的局部刷新，提高了用户体验。核心组成部分包括： 1. **XMLHttpRequest对象**：这是AJAX的核心，...
本实例主要探讨如何结合这两种技术实现页面的自动刷新功能，这对于实时更新数据显示或者创建无刷新用户体验至关重要。 **1. JSP (JavaServer Pages)** JSP是Java平台上的动态网页技术，它允许开发者在HTML或XML...
4. **设置定时器**：使用 `setTimeout` 函数实现每60秒自动刷新一次。 5. **处理响应**：在 `init` 函数中处理服务器返回的数据，并更新页面的 `sysTimeShow` 元素。 #### 五、getSystemTime.jsp 分析 ```jsp ;...
通过创建XMLHttpRequest实例，可以发送HTTP请求，并在不刷新页面的情况下接收响应。 2. **JavaScript事件**：Ajax的核心在于异步，因此会使用到各种JavaScript事件，如`onreadystatechange`，当请求状态改变时触发...