Ajax就是很牛，无需手工点击刷新，只要在返回处理函数中设置定时器连续调用某一函数输出到页面，动态效果立即出来！
贴上代码，先睹为快
refresh.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head><META http-equiv=Content-Type content="text/html; charset=UTF-8"></head>
<script language="javascript">
var XMLHttpReq;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e){
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
}
//发送请求函数
function sendRequest() {
createXMLHttpRequest();
var url = "refresh.do";
XMLHttpReq.open("POST", url, true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
DisplayHot();
setTimeout("sendRequest()", 1000);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 显示更新数据信息的函数
function DisplayHot() {
var name = XMLHttpReq.responseXML.getElementsByTagName("name")[0].firstChild.nodeValue;
var count = XMLHttpReq.responseXML.getElementsByTagName("count")[0].firstChild.nodeValue;
document.getElementById("product").innerHTML = name;
document.getElementById("count").innerHTML = count;
}
</script>
</SCRIPT>
<body onload =sendRequest()>
<table style="BORDER-COLLAPSE: collapse" borderColor=#111111
cellSpacing=0 cellPadding=0 width=200 bgColor=#f5efe7 border=0>
<TR>
<TD align=middle height=4 colspan="2"><IMG height=4
src="images/promo_list_top.gif" width="100%"
border=0>
</TD>
</TR>
<TR>
<TD align=middle bgColor=#dbc2b0
height=19 colspan="2"><B>正在热卖的笔记本</B>
</TD>
</TR>
<tr>
<td height="20">
型号：
</td>
<td height="20" id="product">
</td>
</tr>
<tr>
<td height="20">
销售数量：
</td>
<td height="20" id="count">
</td>
</tr>
</table>
</body>
</html>
处理请求的RefreshServlet
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 设置输出信息的格式及字符集
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
// 创建输出流对象
PrintWriter out = response.getWriter();
// 依据验证结果输出不同的数据信息
out.println("<response>");
// 数据库操作
// 第一步：加载MySQL的JDBC的驱动
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
// 取得连接的url,能访问MySQL数据库的用户名,密码；studentinfo：数据库名
String url = "jdbc:mysql://localhost:3306/refresh";
String username = "root";
String password = "root";
// 第二步：创建与MySQL数据库的连接类的实例
Connection con = null;
String strSql = "select name,salecount from product order by salecount desc";
ResultSet rs = null;
// 查询热卖产品
try {
con = DriverManager.getConnection(url, username, password);
Statement st = con.createStatement();
rs = st.executeQuery(strSql);
if (rs.next()) {
out.println("<name>" + rs.getString("name") + "</name>");
out.println("<count>" + rs.getString("salecount") + "</count>");
}
} catch (SQLException e) {
e.printStackTrace();
}
out.println("</response>");
out.close();
}
数据库脚本
/*
Navicat MySQL Data Transfer
Source Host : localhost:3306
Source Database : refresh
Target Host : localhost:3306
Target Database : refresh
Date: 2010-04-10 15:24:15
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for product
-- ----------------------------
DROP TABLE IF EXISTS `product`;
CREATE TABLE `product` (
`id` int(11) NOT NULL DEFAULT '0',
`salecount` varchar(255) DEFAULT NULL,
`name` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of product
-- ----------------------------
INSERT INTO `product` VALUES ('0', '100', '梦里花落值多少');
赶快更换数据，看看页面效果吧
分享到：
相关推荐
"使用Ajax实现页面表格添删改查的异步刷新操作"是一个实用的技术实现，它允许用户在不刷新整个页面的情况下更新表格内容，从而提高页面响应速度和用户体验。 首先，我们需要理解AJAX的基本原理。AJAX通过JavaScript...
总结来说，Ajax技术通过JavaScript实现了网页的局部更新，提高了用户体验，而"1106_Google Suggestion 参考代码"是一个具体的实例，展示了如何应用Ajax实现动态搜索建议功能。理解和掌握Ajax的使用，对于开发响应式...
"ajax实现天气动态刷新"这个主题就涉及到了如何利用Ajax技术，不刷新整个页面的情况下，动态更新城市天气信息。Ajax，全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种创建交互式网页应用的技术...
综上所述，使用jQuery和ajax实现局部刷新，可以帮助开发者提高web应用的响应速度和用户体验。通过文中提供的两种方法，我们可以根据实际项目需求，选择适合的实现方式。这些技术的使用，不仅限于个人学习，更是当前...
本文主要介绍如何使用php和jQuery ajax技术实现网页数据的实时刷新显示。具体来说，就是通过JavaScript的定时器，每隔一定时间就向服务器发送请求，获取最新的数据，然后在前端页面上实时更新这些数据，以实现数据的...
传统的分页方式需要用户每次点击分页按钮时整个页面重新加载，而Ajax（Asynchronous JavaScript and XML）技术则可以实现页面无刷新的分页效果，提供更流畅的浏览体验。本文将深入讲解如何利用JSP和Ajax来实现这一...
总结来说，通过结合AJAX和JSP，我们可以实现一个定时刷新的功能，使得用户无需手动刷新页面就能获取实时更新的信息。而Struts2框架则为我们的应用程序提供了强大的结构和功能支持，使得后端处理更加灵活和高效。
结合.NET框架，我们可以利用AJAX.NET来实现无刷新页面，显著提升用户体验，特别是对于那些需要频繁交互或者数据实时更新的Web应用。 一、AJAX.NET基本原理 AJAX.NET是微软对AJAX技术的一种实现，它结合了ASP.NET和...
### 使用jQuery与Ajax实现网页无刷新提交功能 在现代Web开发中，为了提供更好的用户体验，很多网站都会采用Ajax技术来实现在不刷新整个页面的情况下进行数据的提交与更新。本篇文章将详细介绍如何利用jQuery库结合...
在本教程中，我们将深入探讨如何使用Ajax实现页面无刷新、动态级联绑定以及自动补全功能。** **一、Ajax基础** Ajax的核心是JavaScript对象XMLHttpRequest，它允许在后台与服务器进行通信。创建XMLHttpRequest对象...
### JSP中使用Ajax实现局部刷新 在JSP页面中，我们可以创建一个JavaScript函数，该函数包含上述的Ajax步骤，并根据需要更新页面的部分区域。例如，我们可能有一个评论区，每当有新评论提交时，通过Ajax调用后台服务...
【Ajax实现动态部分刷新】 Ajax，全称Asynchronous JavaScript and XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它的核心在于利用JavaScript创建一个XMLHttpRequest对象，该对象负责与...
为了提升用户体验，无刷新页面更新技术变得越来越流行，其中AJAX（Asynchronous JavaScript and XML）成为了实现这一目标的重要工具。结合ThinkPHP框架，可以轻松实现数据的异步加载，从而达到页面局部更新的效果，...
在Java中，我们可以利用Ajax实现页面的动态刷新，提高用户体验，因为它允许后台与服务器进行异步数据交换，而不会打断用户的交互流程。下面将详细探讨Ajax在Java中的应用以及页面刷新的相关知识点。 一、Ajax的基本...
根据提供的信息，本文将深入探讨如何使用GridView控件结合AspNetPager和Ajax技术来实现Web应用程序中的无刷新存储过程分页功能。此方法不仅能够提升用户体验，还能提高数据处理效率。 ### 一、GridView控件介绍 ...
【基于AJAX的无刷新聊天室】是一种利用Ajax技术实现的实时交互聊天系统，它无需用户手动刷新页面就能即时更新聊天内容，提升了用户体验。在Web 2.0时代，AJAX（Asynchronous JavaScript and XML）成为了构建动态、...
综上所述，`ajax实现无刷新删除` 主要涉及以下知识点： 1. **AJAX**：Asynchronous JavaScript and XML，即异步JavaScript和XML，它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。在本...
"使用Ajax实现无刷新分页显示"是一种提高用户体验的有效方法，它允许用户在不重新加载整个页面的情况下浏览内容的多个部分，如分页数据。这种方式可以显著减少等待时间，提高网页的响应速度。下面将详细介绍这个主题...
"利用Ajax实现无刷新验证用户名和密码是否正确"这一技术就是为了让用户在输入登录信息时能够得到即时反馈，无需等待页面整体刷新，极大地提升了交互体验。Ajax（Asynchronous JavaScript and XML）是一种创建动态...
例如，一个实时聊天应用，可以通过Ajax实现在不刷新页面的情况下接收到新的消息并显示出来。 **无刷新绑定** 无刷新绑定通常指的是数据绑定技术在Ajax环境下的应用。在ASP.NET中，可以使用Ajax来实现视图（View）...