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和jsp servlet实现网页局部刷新,,,聊天功能
在访问现在很火的google plus时，细心的用户...虽然ajax可以无刷新改变页面内容，但无法改变页面URL 其次为了更好的可访问性，内容发生改变后，改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题
那么今天我们一起来看一下如何在使用了PHP Frameworks的网站中使用AJAX来刷新页面的一小部分。 这里我使用的是jQuery + Laravel（当然如果使用了其他框架，基本的概念也是不变的）。如图，假设我们制作了一个页面来...
本项目将会实现以个基于Ajax的无刷新聊天室，其功能比较完善，主要特点如下： ·采用数据库记录在线用户及聊天信息； ·登录与注册融合，新用户无需专门注册，只要首次登录时所使用的用户名没有被别人注册可自动注册...
本程序采用Ajax框架技术,来完成jsp页面分页,实现无刷新取数据
ajax实现无刷新JSP聊天室功能强大、聊天的时候页面没有刷新觉得好爽...
能够实现页面局部刷新，及时掌握最新消息，例如小型的聊天功能
功能说明： 本程序根据原子哥STM32H7开发板源码...刷新问题：网页通过ajax方式对指定的数据进行更新，开发板源码上传需要更新的数据，整体网页不变。 关于资源的说明详情见：https://mp.csdn.net/postedit/101171210
ajax + php实现了页面注册地 功能，包含数据库， 大家又需要的赶紧过来取啊， 如果有反馈，我的邮箱zxz1337@163.com
主要介绍了ThinkPHP5.1+Ajax实现的无刷新分页功能,结合实例形式详细分析了ThinkPHP5.1+Ajax无刷新分页具体原理、前台数据发送与后台处理相关操作技巧,需要的朋友可以参考下
传统的聊天室基于客户端网页的自动刷新技术而实现，它的主要缺点是不断刷新页面造成屏幕的闪动，而经过了Ajax改造后的聊天室，每次只获取最新的发言信息，并将获取结果动态写入页面，不会有以上的缺点 ………………...
ASP读写XML文件的一个实例_XML留言本，注意，这个留言本从功能上来说不是很完善，它的目的是帮助解决如何用ASP操作XML文件，进行读出信息和写入信息，因此留言本只具备浏览留言和添加留言的功能，不推荐作为正式的...
代码时从网上看到的，但是整合这个代码花了我一下午的世界，不错的资源，只是一个简单的实现刷新，struts2+jquery+ajax实现局部刷新的功能，这是一个完整的项目，直接导入到Myeclipse当中就能运行
使用ajax方法实现分页也很简单，主要是两个，ContentTemplate和Trigger。先把listView扔ContentTemplate里面。然后在Trigger里面加入asp:AsyncPostBackTrigger，将ID指向之前的分页控件DataPager控件。具体实现代码...
1．在实验四基础上使用AJAX技术实现异步登录功能。（40分） Ajax异步的特点为：多个事件并行发生，事件互不影响,请求之后，不刷新整张页面，页面不动，只是刷新页面的局部。异步数据获取技术 XMLHttpRequest对象方法...
利用Ajax技术实现无刷新分页功能，使你的页面感觉更完美。
一款采用ajax技术实现的无刷新切换网页风格的例子，这个功能现在各个网址导航的首页都有，不过本款无刷新切换风格，看上去更美观一些，用户只需单击方格，网页的风格就可变为方格颜色的格调，在实现方法，每单击一次...
全静态html+ajax实现网站的顶和踩功能，页面无刷新并且一天只能够点击一次,功能超级强大，全球独一无二的顶和踩功能实现。