Ajax无缓存定时读取图片-CSDN博客

本文介绍了一个简单的JSP页面实现图片的实时显示与刷新功能。通过使用JavaScript定时发送AJAX请求获取新的图片资源，同时设置了禁止缓存的相关元信息。此方案适用于需要频繁更新图片展示的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只需要一个JSP页面就行了：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%
	request.setCharacterEncoding("GBK");
	response.setCharacterEncoding("GBK");
	response.setContentType("text/html;charset=GBK");
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>图片实时显示</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache, must-revalidate">
		<meta http-equiv="expires"
			content="Wed,   26   Feb   1997   08:21:57   GMT">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

	</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 = "imageAjax.jsp?sid=" + new Date().getTime();
		//XMLHttpReq.setRequestHeader("Cache-Control", "no-cache");
		XMLHttpReq.open("POST", url, true);
		XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
		XMLHttpReq.send(null); // 发送请求
	}

	// 处理返回信息函数
	function processResponse() {
		if (XMLHttpReq.readyState == 4) { // 判断对象状态
			if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
				DisplayHot();
				setTimeout("sendRequest()", 200);
			} else { //页面不正常
				window.alert("您所请求的页面有异常。");
			}
		}
	}

	// 显示更新数据信息的函数
	function DisplayHot() {
		document.getElementById("rid").src = "images/result.bmp?sid="
				+ new Date().getTime();
	}
</script>

	<body onload=sendRequest()>
		<div align="center">
			<img hspace="2" vspace="2" border="1" align="middle" id="rid"
				alt="实时图片" src="images/result.bmp">
		</div>
		<div align="center">&nbsp;
		<input type="button" name="button1" value="历史数据" style="width: 80px;">
			<input type="button" name="button2" value="其他" style="width: 80px;">
		</div>
	</body>

</html>