本文介绍如何利用 jQuery 库实现网页特定区域的定时自动刷新。通过 setInterval 配合 load 方法，无需重载整个页面即可更新局部内容，适用于仪表盘等实时监控场景。
AJAX 技术概述
AJAX 简介：
AJAX 全称为“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），这是一种用于构建交互式网页应用的开发技术。
AJAX 代表异步 JavaScript 和 XML，它是标准通用标记语言（XML）的一个子集。
AJAX 是一种能够创建快速动态网页的技术方案。
该技术允许网页在后台与服务器进行少量数据交换，从而实现网页的异步更新。这意味着用户可以在不重新加载整个页面的情况下，仅对页面的某一部分进行更新。
HTML 部分：
原生 JavaScript 实现示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax实现自动刷新</title>
</head>
<body onLoad="Autofresh()">
<p>现在的时间是：<span id="currenttime"></span></p>
<script>
var xmlobj;
var count=0;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlobj=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlobj=new XMLHttpRequest();
}
}
function Autofresh(){
createXMLHttpRequest();
count=count+1;
xmlobj.open("GET","currenttime.php?count="+count,true);
xmlobj.onreadystatechange=doAjax;
xmlobj.send("r="+Math.random());//使用随机数处理缓存
}
function doAjax(){
if(xmlobj.readyState==4 && xmlobj.status==200){
var time_span=document.getElementById('currenttime');
time_span.innerHTML=xmlobj.responseText;
setTimeout("Autofresh()",2000);
}
}
</script>
</body>
</html>PHP 页面部分
<?php
$count=$_GET["count"];
$count=$count%7;
switch($count){
case 1: $message = "11111111111111111";break;
case 2: $message = "22222222222222222";break;
case 3: $message = "33333333333333333";break;
case 4: $message = "44444444444444444";break;
case 5: $message = "55555555555555555";break;
case 6: $message = "66666666666666666";break;
}
$res = $message;
echo date("Y-m-d H:i:s")."<hr>"."现在的内容是：".$res;
?>效果图：
接下来介绍如何使用 jQuery 实现 AJAX 定时局部页面刷新。
有时，我们需要一种机制来不断刷新网页，以提供类似实时仪表盘的功能。如果能只刷新页面的特定部分，将会非常有用，例如在仪表盘上显示系统状态的交通灯。
借助 jQuery JavaScript 库，可以轻松实现只刷新页面的一部分。只要将 jQuery 库引入页面，只需一行 JavaScript 代码即可实现：
jQuery 实现局部刷新
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script> 因此，只需将这段简短的 JS 代码放入页面，即可刷新 ID 为 content 标签内的所有内容，例如每 5 秒刷新一次：
setInterval(function() {
$("#content").load(location.href+" #content>*","");
}, 5000); 这就是全部！因此，只需这一行代码，就能轻松实现某些实时监控行为。无需再使用奇怪的 meta 刷新标签或 iframe 作为 Web 应用程序的变通方案。
每 5 秒，我们将刷新相同 URL 的内容，并更新 ID 为 content 的元素中驻留的所有元素内容。