自动刷新，是很多业务常常需要的业务，像证券实时信息、比赛实时信息等等，所以实现自动刷新业务，灰常重要。
这里简单的模拟了下比赛信息实时刷新
1.index.jsp主要信息显示在这个页面上
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <html> <head> <title>实时更新比分查看</title> <script type="text/javascript" src="jslib/jquery.js"></script> <script type="text/javascript" src="jslib/update.js"></script> </head> <body> 比分直播 <div id="info"> </div> </body> </html>
2.update.js ajax处理更新数据并显示在页面上
$(document).ready(bifen);
function bifen(){
jQuery.get("servlet/InfoServlet", {date:new Date()}, callback, "xml");
setInterval(bifen, 1000);//设置回调函数，1000毫秒回调一次
}
function callback(xml){
var info = $("#info");
var html = "<table>";
var childNode = $(xml).find("childNode").each(function(){
var host = $(this).find("getHost").text();
var hostNum = $(this).find("getHostNum").text();
var guest = $(this).find("getGuest").text();
var guestNum = $(this).find("getGuestNum").text();
html = html+"<tr>"+"<td>"+host+"<td>"+hostNum+":"+"<td>"+guestNum+"<td>"+guest;
});
info.html(html);
}
3.后台不在写出，这里给一个sql数据的截图:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ROOT SYSTEM "q.dtd">
<ROOT xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<row>
<field name="id">1</field>
<field name="host">曼联</field>
<field name="hostNum">0</field>
<field name="guest">皇家马德里</field>
<field name="guestNum">4</field>
<field name="nowTime">1331613867214</field>
</row>
<row>
<field name="id">2</field>
<field name="host">利物浦</field>
<field name="hostNum">0</field>
<field name="guest">皇家马德里</field>
<field name="guestNum">0</field>
<field name="nowTime">1331613867235</field>
</row>
......
4 显示结果为：
比分直播
| 巴塞罗那 | 0: | 1 | 切尔西 |
| 曼联 | 4: | 6 | 巴塞罗那 |
| 阿森纳 | 5: | 0 | 皇家马德里 |
| 曼城 | 4: | 3 | 皇家马德里 |
| AC米兰 | 0: | 6 | 阿森纳 |
| 曼联 | 4: | 6 | AC米兰 |
| 曼联 | 1: | 0 | AC米兰 |
| 切尔西 | 4: | 6 | 曼城 |
| 曼联 | 1: | 5 | 巴塞罗那 |
| 切尔西 | 7: | 4 | 阿森纳 |
相关推荐
描述中的内容"jsp+ajax自动刷新实例.zipjsp+ajax自动刷新实例.zip"看似重复，但我们可以理解为这是对项目内容的强调，意味着这个压缩包包含了一个完整的、基于JSP和Ajax的自动刷新功能示例。 **Ajax技术详解** ...
在“jsp+ajax自动刷新实例”中，`autoRefresh.jsp` 可能是一个包含AJAX调用的JSP页面，它负责定期向服务器发送请求以获取更新。这个请求通常由JavaScript定时器触发，如`setInterval()`函数。 ```javascript // 每...
标题“ajax自动刷新页面”涉及到的核心知识点包括： 1. **异步通信**：Ajax的基础是异步通信，它允许浏览器在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这种通信方式通过XMLHttpRequest...
在现代Web开发中，实现页面数据的实时更新而无需整个页面刷新是一项常见的需求。"Ajax 10秒自动变换数据无...通过阅读和理解这些代码，开发者可以更好地掌握Ajax自动刷新数据的实现方法，并将其应用到自己的项目中。
本文主要介绍如何使用php和jQuery ajax技术实现网页数据的实时刷新显示。具体来说，就是通过JavaScript的定时器，每隔一定时间就向服务器发送请求，获取最新的数据，然后在前端页面上实时更新这些数据，以实现数据的...
在Java中，我们可以利用Ajax实现页面的动态刷新，提高用户体验，因为它允许后台与服务器进行异步数据交换，而不会打断用户的交互流程。下面将详细探讨Ajax在Java中的应用以及页面刷新的相关知识点。 一、Ajax的基本...
在本示例中，我们将探讨如何使用ASP和Ajax结合来实现不刷新网页加载新闻列表的功能。 首先，理解ASP的工作原理至关重要。ASP文件通常包含HTML、CSS、JavaScript以及服务器端脚本语言（如VBScript或JScript）。当...
实现"无刷新无动作"的页面数据自动更新，通常采用定时器（`setInterval`或`setTimeout`）配合Ajax技术。每隔一段时间，前端通过Ajax发送请求到后台，后台接收到请求后处理并返回新数据。前端接收到新数据后，利用...
AJAX (Asynchronous JavaScript and XML) 和 JSON (JavaScript Object Notation) 是Web开发中的核心技术，它们结合使用可以实现页面无刷新地实时更新数据，提供更好的用户体验。本篇将深入讲解如何利用AJAX和JSON每...
Ajax局部刷新技术是一种在网页不进行整个页面刷新的情况下，通过后台与服务器异步交换数据并局部更新页面的技术。这种技术极大地提升了用户体验，因为它允许用户在交互时无需等待整个页面加载，仅更新必要的部分。C#...
4. **设置定时器**：使用 `setTimeout` 函数实现每60秒自动刷新一次。 5. **处理响应**：在 `init` 函数中处理服务器返回的数据，并更新页面的 `sysTimeShow` 元素。 #### 五、getSystemTime.jsp 分析 ```jsp ;...
实现自动刷新页面 本例实现页面自动刷新的效果，该页面的内容如图5-4所示，在该页面中将根据数据库中存储的最新数据信息更新页面中热卖商品的信息，但是对这些信息的修改并不会导致整个页面的刷新。 实际的Web应用中...
在分页列表中，这可能意味着当用户达到某个页面时（例如最后一页），系统会自动判断并跳转到下一页，或者在数据变化时（如添加、删除记录）自动刷新当前页。这可能通过JavaScript的定时器或事件监听来实现。 这个...
【AJAX无刷新留言技术详解】 在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。AJAX的核心是利用...
2. **服务器方法**: 在服务器端定义一个返回分页数据的方法，AjaxPro会自动将其转换为Ajax调用。 3. **客户端调用**: 在客户端，可以通过JavaScript调用这个服务器方法，获取分页数据，并在前端更新页面。 4. **...