Ajax实现自动更新页面(不刷新页面更新网页内容)
1.使用XMLHttpRequest向服务器发送请求,接受信息改变网页中某些元素的内容;
2.使用setTimeout设置重复发送请求间隔时间,起到自动更新页面的效果;
refresh.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>Refresh</title>
<script type="text/javascript" src="js/refresh.js"></script>
</head>
<body>
<h2>Ajax Dynamic Update</h2>
<input type="button" value="START" onClick="doStart();" />
<br />
Page will refresh in <span id="time">3</span> seconds.
<br /><br />
<div id="show" style="font-size:40px;"></div>
</body>
</html>
refresh.js:
程序代码
var xmlHttp;
var time = 3;
function createXMLHttpReqeust() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function doStart() {
doPost();
refreshTime();
}
function doPost() {
createXMLHttpReqeust();
xmlHttp.onreadystatechange = callback;
var url = "refresh.mgc?timestamp=" + new Date().getTime();
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
setTimeout("doPost()", "3000");
}
function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
parseResult();
}
}
}
function parseResult() {
var show = document.getElementById("show");
show.innerHTML = xmlHttp.responseText;
}
function refreshTime() {
document.getElementById("time").innerHTML = time--;
if (time < 1) {
time = 3;
}
setTimeout("refreshTime()", "1000");
}
Refresh.java:
程序代码
package cn.edu.ahau.mgc.ajax.refresh;
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 Refresh extends HttpServlet {
private int i;
private String[] str = {"JSP", "Servlet", "Ajax", "Oracle"};
@Override
public void init() throws ServletException {
super.init();
this.i = 0;
}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
out.print(this.str[this.i]);
out.flush();
out.close();
if (++i > 3) {
i = 0;
}
}
}
web.xml:
程序代码
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>Refresh</servlet-name>
<servlet-class>cn.edu.ahau.mgc.ajax.refresh.Refresh</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Refresh</servlet-name>
<url-pattern>/refresh.mgc</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
分享到:
相关推荐
利用AJAX技术轻松实现页面无刷新自动更新!
实现网页无闪自动局部刷新,通过异步传输XMLHTTP发送参数到ajaxServlet,返回符合条件的XML文档
实现自动刷新页面 本例实现页面自动刷新的效果,该页面的内容如图5-4所示,在该页面中将根据数据库中存储的最新数据信息更新页面中热卖商品的信息,但是对这些信息的修改并不会导致整个页面的刷新。 实际的Web应用中...
ajax自动刷新页面 类似于论坛注册时的 自动数字倒计时 自动跳转 适合新人看看
Ajax刷新 java Ajax 页面刷新
ajax+php 无刷新 无动作 页面数据自动更新
ASP 结合Ajax 不刷新网页 加载新闻列表示例 ASP 结合Ajax 不刷新网页 加载新闻列表示例
Ajax简介: AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)...传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。 html部分: <!DOCTYPE html> <html lang="en"> <
ajax 10秒自动变换数据无刷新页面 如: 数组{生日,聚会,开始} 数组里的数据,10秒自动变换
使用ajax实现页面无刷新,动态级联绑定,自动补全等功能。
自己写的一个demo,利用ajax回调php返回的json数据,并实现页面的局部刷新,方便大家学习使用,
无闪烁更新网页的课题比较大。 加载的html字符串(通过ajax获取的),如果还需要运行代码,那么肯定有问题。 希望用一个不显示的iframe来承载这个对象。这有点dirty work的感觉。 最终解决方案是 代码如下:var str2...
·聊天内容和在线用户列表实时更新,无需刷新页面; ·在聊天内容过多时,可手动清除聊天内容; 本项目开发环境: Microsoft Visual Studio 2005 + SQL Server 2005 + IIS 5.0 + IE7.0 数据库名:chatroom ,然后...
ajax+java servlet实现无刷新搜索实例(亲测可用) ,1.使用mysql数据库,已有sql语句;2.使用eclipse\MyEclipse导入项目即可;3.运行URL地址在doc/init.txt
传统的聊天室基于客户端网页的自动刷新技术而实现,它的主要缺点是不断刷新页面造成屏幕的闪动,而经过了Ajax改造后的聊天室,每次只获取最新的发言信息,并将获取结果动态写入页面,不会有以上的缺点 ………………...
学习ajax的好东西啊 看看吧
打开工程,直接运行实现无刷新实现页面时间动态显示
利用ajax+servlet开发的简易学生成绩查询系统,页面无刷新,自动生成tabel显示学生成绩查询结果
这个是自己的一个简单的ajax的例子.能够自动读取文件中的内容.如果文件中的内容更新.显示在页面上的内容也自动更新,不会刷新页面