最近在网络上找了一些相关文章,
Ajax实现不刷屏的前提下实现页面定时刷新的功能
,结果发现网络上都是千篇一律的代码,而且都有错误的,没有办法了,只好自己写了,刚刚写好,共享一下下,代码如下
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="Gb2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" c>
<meta http-equiv="cache-control" c>
<meta http-equiv="expires" c>
<meta http-equiv="keywords" c>
<meta http-equiv="description" c>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
<!--
//建立XMLHttpRequest对象
var xmlhttp;
try{
xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
try{
xmlhttp= new XMLHttpRequest();
}catch(e){}
}
}
function getPart(url){
xmlhttp.open("get",url,true);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4)
{
if(xmlhttp.status == 200)
{
if(xmlhttp.responseText!=""){
document.getElementById("partdiv").innerHTML = unescape(xmlhttp.responseText);
}
}
else{
document.getElementById("partdiv").innerHTML = "数据加载出错";
}
}
}
xmlhttp.setRequestHeader("If-Modified-Since","0");
xmlhttp.send(null);
}
setInterval("getPart('test.jsp')",1000)
//-->
</script>
</head>
<body>
index
下面是test.jsp的数据
<div id="partdiv"></div><!--局部刷新数据的容器-->
</body>
</html>
test.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'test.jsp' starting page</title>
<meta http-equiv="pragma" c>
<meta http-equiv="cache-control" c>
<meta http-equiv="expires" c>
<meta http-equiv="keywords" c>
<meta http-equiv="description" c>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
这里就是test页面的内容了，在这个页面上你想做什么就做什么<br/>
这样就简单的实现了Ajax不刷屏的前提下实现页面定时刷新的功能
<br/>
希望大家以后多多支持本论坛
</body>
</html>
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="Gb2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" c>
<meta http-equiv="cache-control" c>
<meta http-equiv="expires" c>
<meta http-equiv="keywords" c>
<meta http-equiv="description" c>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
<!--
//建立XMLHttpRequest对象
var xmlhttp;
try{
xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
try{
xmlhttp= new XMLHttpRequest();
}catch(e){}
}
}
function getPart(url){
xmlhttp.open("get",url,true);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4)
{
if(xmlhttp.status == 200)
{
if(xmlhttp.responseText!=""){
document.getElementById("partdiv").innerHTML = unescape(xmlhttp.responseText);
}
}
else{
document.getElementById("partdiv").innerHTML = "数据加载出错";
}
}
}
xmlhttp.setRequestHeader("If-Modified-Since","0");
xmlhttp.send(null);
}
setInterval("getPart('test.jsp')",1000)
//-->
</script>
</head>
<body>
index
下面是test.jsp的数据
<div id="partdiv"></div><!--局部刷新数据的容器-->
</body>
</html>
test.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'test.jsp' starting page</title>
<meta http-equiv="pragma" c>
<meta http-equiv="cache-control" c>
<meta http-equiv="expires" c>
<meta http-equiv="keywords" c>
<meta http-equiv="description" c>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
这里就是test页面的内容了，在这个页面上你想做什么就做什么<br/>
这样就简单的实现了Ajax不刷屏的前提下实现页面定时刷新的功能
<br/>
希望大家以后多多支持本论坛
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
