XMLHTTP无刷新页面
用XMLHTTP
======================
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
function getXML(URL) {
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.Open("GET",URL, false);
try {
xmlhttp.Send();
var result = xmlhttp.status;
}
catch(e) {
return(false);
}
if(result==200) {
return(streamtochar(xmlhttp.responseBody));
}
var xmlhttp = null;
}
function streamtochar(StrStream)
{
var stream = new ActiveXObject("ADODB.Stream");
stream.type=1;
stream.Mode=3;
stream.Open() ;
stream.Write(StrStream);
stream.Position= 0;
stream.Type= 2;
stream.Charset="GB2312";
var result= stream.ReadText();
stream.Close();
stream = null;
return result;
}
function update()
{
//alert("页面开始更新");
// document.body.innerHTML = getXML('b.asp');
parent.mainframe.document.body.innerHTML = getXML('b.asp');
}
setInterval("update()",1000)
</script>
</head>
<body>
</body>
</html>
它的实现过程是这样的：
该页面是a.asp;
用于刷新的页面是b.asp;
执行a.asp页面时转向b.asp，以便使b.asp1秒刷新一次。
源文档 <http://www.ew88.net/tech/html/394.html>
再加入动态添加div的innerHTML，就可以实现类似聊天室和mud的卷屏效果了。但有的浏览器中设置不同导致每次get总是取得同样的缓存数据，解决办法如下（用其中的随机数方法）：
对于动态数据（从数据库读取生成的那些），我们可以通过以下方法来禁止浏览器缓存。
'asp 为例 禁止缓存
Response.Buffer = True
Response.ExpiresAbsolute = Now() - 1
Response.Expires = 0
Response.CacheControl = "no-cache"
Response.AddHeader "Pragma", "No-Cache"
对于Ajax 的请求（不管是静态数据还是动态数据）:
//以下三种方法使用其中任何一种方法都可以
xmlhttp.setRequestHeader("Cache-Control","no-cache");
//或者
xmlhttp.setRequestHeader("If-Modified-Since","0");
//或者
xmlhttp.Open(url+'?rnd='+Math.random(),....)
如果使用 prototype.js , 用类似这样的代码
new Ajax.Request(url,{method:"get",requestHeaders:["Cache-Control","no-cache"]})
或者
new Ajax.Request(url,{method:"get",requestHeaders:["If-Modified-Since","0"]})
什么情况下，要禁止静态文件缓存：
1、经常可能要改动的 js, css.
比如
一个html 文件， test.html 在 1.0版本中。可能是这样
<script src="common.js"></script>
修改后 v1.1版本：
<script src="common.js"></script>
<script src="foo.js"></script>
新增加了一个foo.js 同时，也改动了common.js , 在common.js 中定义了新的类，并在foo.js 中使用了common.js.
在这种情况下如果以前用户浏览过 1.0版本的 html 文件，那么他的浏览器自动缓存了 common.js
当他浏览新版本的时候，因为使用的是 v1.1的 foo.js 和 v1.0的 common.js ，这样将导致脚本出错。
解决方法探讨：
因为css,js 是通过 <script src=....> 这种方式加载的，所以，很难使用 asp 的那种服务器端禁止缓存的办法。也很难使用ajax的通过设置 http请求头的办法禁止使用缓存。
看来随机数是个好办法。
//方法一：
document.write("<script src='test.js?rnd="+Math.random()+"'></s"+"cript>")
//方法二：
var js=document.createElement("script")
js.src="test.js"+Math.random()
document.body.appendChild(js)
但是，如果采用随机数的话， js文件将永远得不到缓存，每次都必须重新从服务器加载，即使没有任何更改。
大家如果经常上国外网站的话，可以看到他们通常采用这样的方式来解决：
<script src="test.js?ver=113"></script>
其中 ver=113 的 113就是版本号，一般都是采用 CVS 或其他工具生成的开发版本号。
这样真正做到了应该缓存的时候缓存静态文件，当版本有更新的时候从获取最新的版本，并更新缓存。
对于图像 <img src="test.jps?ver=在CVS的版本号"> 来有效利用和更新缓存.
源文档 <http://www.readlog.cn/show-39-1.htm>
没有评论:
发表评论