目前主流网页自动刷新方法
2013-03-31 15:10:10 
具体表现在，每隔若干秒(分)从当前的网址中重新加载页面里的内容。
一、传统的整页的重新读取
通过在页面的头部加入如下的代码，通过http协议中的'refresh'关键字来实现。
<meta http-equiv="refresh" content="30" />
但这种方法在使用者过多时，会明显加重服务器负担，现在使用的场合已经不多了。
二、ajax方法进行的局部刷新
主要是结合了近年流行的ajax技术，提高了用户体验也在一定程度上减轻了服务器压力。代码如下：
<script>
var refreshId = setInterval(function(){
$('#canvas').fadeOut("slow").fadeIn("slow");
}, 30000);
</script>
或是这样，使用'fadeOut'与'fadeIn'这两种特效：
$('#auto').fadeOut('slow').load('load.php').fadeIn('slow');
不使用特效：
$('#auto').load('load.php');
注意：这里必须要指定时间，通常是以毫秒来计，1000毫秒即为1秒。
完整代码如下：
-----
$(document).ready( function(){
$('#auto').load('load.php');
refresh();
});
function refresh(){
setTimeout( function() {
$('#auto').fadeOut('slow').load('load.php').fadeIn('slow');
refresh();
}, 2000);
}
-----
Refresh content automatically after some period time - jQuery
三、使用javascript中的'setInterval'函数
setInterval(function,milisec,lang);
It's javascript primary method which allow us to call some function every x miliseconds.
setInterval("my_function();",5000);
1、Refresh whole page-整页刷新
<script type="text/javascript">
setInterval("my_function();",10000);
function my_function(){
window.location=location.href;}
</script>
2、Refresh part of the page-局部刷新
对页面中的部分(如div)进行刷新，通常与jQuery load() 函数一起使用。
$('#id_for_refresh').load('your_url#id_of_loaded_content');
<head>
<script type="text/javascript">
setInterval("my_function();",5000);
function my_function(){
$('#refresh').load(location.href + ' #time');}
</script>
</head>
<body>
<div id="refresh"></div>
<div id="time">
<?php echo date('H:i:s');?>
</div>
</body>
----------------------------
四、使用javascript中的'setTimeout'函数
这个与ajax方式有一定的区别，它更经得住超时，如果后端服务失效了，它不会再试。
function update(){
$.get("response.php", function(data) {
$("#some_div").html(data);
window.setTimeout(update, 10000);
});
}
The difference with this is that it waits 10 seconds AFTER the ajax call is one. So really the time between refreshes is 10 seconds + length of ajax call. The benefit of this is if your server takes longer than 10 seconds to respond, you don't get two (and eventually, many) simultaneous AJAX calls happening.
Also, if the server fails to respond, it won't keep trying.
I've used a similar method in the past using .ajax to handle even more complex behaviour:
function update(){
$("#notice_div").html('Loading..');
$.ajax({
type: 'GET',
url: 'response.php',
timeout: 2000,
success: function(data) {
$("#some_div").html(data);
$("#notice_div").html('');
window.setTimeout(update, 10000);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#notice_div").html('Timeout contacting server..');
window.setTimeout(update, 60000);
}
}
$(document).ready(function() {
update();
});
This shows a loading message while loading (put an animated gif in there for typical "web 2.0" style). If the server times out (in this case takes longer than 2s) or any other kind of error happens, it shows an error, and it waits for 60 seconds before contacting the server again.
This can be especially beneficial when doing fast updates with a larger number of users, where you don't want everyone to suddenly cripple a lagging server with requests that are all just timing out anyways.
五、总结
各种方法都有其优缺点，可根据不同的应用环境择一使用，不过还是推荐使用'setInterval'或'ajax'方法。
一、传统的整页的重新读取
通过在页面的头部加入如下的代码，通过http协议中的'refresh'关键字来实现。
<meta http-equiv="refresh" content="30" />
但这种方法在使用者过多时，会明显加重服务器负担，现在使用的场合已经不多了。
二、ajax方法进行的局部刷新
主要是结合了近年流行的ajax技术，提高了用户体验也在一定程度上减轻了服务器压力。代码如下：
<script>
var refreshId = setInterval(function(){
$('#canvas').fadeOut("slow").fadeIn("slow");
}, 30000);
</script>
或是这样，使用'fadeOut'与'fadeIn'这两种特效：
$('#auto').fadeOut('slow').load('load.php').fadeIn('slow');
不使用特效：
$('#auto').load('load.php');
注意：这里必须要指定时间，通常是以毫秒来计，1000毫秒即为1秒。
完整代码如下：
-----
$(document).ready( function(){
$('#auto').load('load.php');
refresh();
});
function refresh(){
setTimeout( function() {
$('#auto').fadeOut('slow').load('load.php').fadeIn('slow');
refresh();
}, 2000);
}
-----
Refresh content automatically after some period time - jQuery
三、使用javascript中的'setInterval'函数
setInterval(function,milisec,lang);
It's javascript primary method which allow us to call some function every x miliseconds.
setInterval("my_function();",5000);
1、Refresh whole page-整页刷新
<script type="text/javascript">
setInterval("my_function();",10000);
function my_function(){
window.location=location.href;}
</script>
2、Refresh part of the page-局部刷新
对页面中的部分(如div)进行刷新，通常与jQuery load() 函数一起使用。
$('#id_for_refresh').load('your_url#id_of_loaded_content');
<head>
<script type="text/javascript">
setInterval("my_function();",5000);
function my_function(){
$('#refresh').load(location.href + ' #time');}
</script>
</head>
<body>
<div id="refresh"></div>
<div id="time">
<?php echo date('H:i:s');?>
</div>
</body>
----------------------------
四、使用javascript中的'setTimeout'函数
这个与ajax方式有一定的区别，它更经得住超时，如果后端服务失效了，它不会再试。
function update(){
$.get("response.php", function(data) {
$("#some_div").html(data);
window.setTimeout(update, 10000);
});
}
The difference with this is that it waits 10 seconds AFTER the ajax call is one. So really the time between refreshes is 10 seconds + length of ajax call. The benefit of this is if your server takes longer than 10 seconds to respond, you don't get two (and eventually, many) simultaneous AJAX calls happening.
Also, if the server fails to respond, it won't keep trying.
I've used a similar method in the past using .ajax to handle even more complex behaviour:
function update(){
$("#notice_div").html('Loading..');
$.ajax({
type: 'GET',
url: 'response.php',
timeout: 2000,
success: function(data) {
$("#some_div").html(data);
$("#notice_div").html('');
window.setTimeout(update, 10000);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#notice_div").html('Timeout contacting server..');
window.setTimeout(update, 60000);
}
}
$(document).ready(function() {
update();
});
This shows a loading message while loading (put an animated gif in there for typical "web 2.0" style). If the server times out (in this case takes longer than 2s) or any other kind of error happens, it shows an error, and it waits for 60 seconds before contacting the server again.
This can be especially beneficial when doing fast updates with a larger number of users, where you don't want everyone to suddenly cripple a lagging server with requests that are all just timing out anyways.
五、总结
各种方法都有其优缺点，可根据不同的应用环境择一使用，不过还是推荐使用'setInterval'或'ajax'方法。