Ajax实现自动更新页面（不刷新页面更新网页内容）

关注

原创最新推荐文章于 2025-07-21 16:06:35 发布 1.7k 阅读 AI 写同款· GEO 优化 ›

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>

收录于