在进行网页设计时，常需要在网页上定期执行一些操作。这里的定期操作并不是定期刷新，定期刷新时网页内容会全部重置，而我们希望的是在同一网页上动态变化。更进一步，定期的操作过程是向另一数据页面去获取数据。由于浏览器的缓存作用，有可能数据页面已经更新了，但取得的页面仍是数据变化前的内容，导致取得的数据一直没有变化。下面我们来描述这两个问题及解决办法。
主页面命名为page.html，初始时网页上有一个空表格。网页载入后Javascript定期执行一个获取数据过程，并将获取的数据动态填入表格行中。page.html的初始页面如下图：
数据页面命名为xml.php，动态提供数据。为了看清楚数据变化，我们使用当前时间。格式为：
1
2
3 2010年7月22日 07:51:12
4
5
如果page.html页面中的JS代码用以下形式：
1
2 for(i=0; i<10; i++) {
3 FetchAndShow();
4 }
5
则1. 不能实现定时；2. 函数会全速运行，您将看不到表格行的动态增长过程，而是等该循环结束后一次性显示。如果循环变量不是10，而是一个很大的数据，则您可能需要等上很久才能看到运行结果。
我们可以采用如下结构的JS代码：
1
2 varclearObj=null;
3 FetchAndShow=function() {
4 //todo：要定期执行的代码
5
6 if(true||false) {//如果满足停止执行的条件，则停止执行
7 clearInterval(clearObj);
8 }
9 }
10
11 $(document).ready(function(){
12 clearObj=setInterval("FetchAndShow()",1000);//每隔1秒执行函数
13 });//end document ready
14
前台页面的结构和思路都完成了，接下来看数据页面。如果xml.php中直接执行以下代码：
1 <?php
2 $dom=newDOMDocument();
3 $dom_ROOT=$dom->createElement("ROOT");
4 $dom->appendChild($dom_ROOT);
5 $dom_RECORD=$dom->createElement("RECORD",date("Y/m/d H:i:s",time()));
6 $dom_ROOT->appendChild($dom_RECORD);
7
8 header("Content-type: text/xml");
9 $xml=$dom->saveXML();
10 echo$xml;
11 ?>
则如果在浏览器中直接访问xml.php时，则正常；但在主页面中定期向它获取数据时，取得的数据会出现没有变化的情况。造成这种现象的原因是，浏览器对数据页面进行了缓存。当需要重复访问同一页面时，始终取得了缓存的同一页面。在PHP中解决办法是在输出之前，加上如下清除缓存的代码：
1 header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
2 header("Cache-Control: no-cache, must-revalidate");
3 header("Pragma: no-cache");
下面给出实现最初希望的功能的完整代码(需要有jquery支持)：
xml.php
1 <?php
2 header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
3 header("Cache-Control: no-cache, must-revalidate");
4 header("Pragma: no-cache");
5
6 $dom=newDOMDocument();
7 $dom_ROOT=$dom->createElement("ROOT");
8 $dom->appendChild($dom_ROOT);
9
10 for($i=0;$i<1;$i++) {
11 $dom_RECORD=$dom->createElement("RECORD",date("Y/m/d H:i:s",time()));
12 $dom_ROOT->appendChild($dom_RECORD);
13 }
14
15 header("Content-type: text/xml");
16 $xml=$dom->saveXML();
17 echo$xml;
18 ?>
page.html
1
2
3
4
5
6
7 varclearObj=null;
8
9 init=function() {
10 $("#processlist>tfoot").append($("#processlist>thead>tr").clone());
11 $("#processlist>tbody>tr").hide();
12 }
13
14 FetchAndShow=function() {
15 v_maxProcess=parseInt($("#maxprocess").val());
16 v_totalProcess=parseInt($("#totalprocess").val());
17
18 $.ajax({
19 async:false,
20 url:"xml.php",
21 success:function(xml){
22 $(xml).find("RECORD").each(function(){
23 v_totalProcess++;
24
25 oTr=$("#processlist>tbody>tr:last").clone();
26 //序号
27 currentNumber=parseInt($("#processlist>tbody>tr:first .number").text())+1;
28 $(".number",oTr).text(currentNumber);
29
30 //时间
31 $(".timegap",oTr).text($(this).text());
32
33 $(oTr)
34 .prependTo($("#processlist>tbody"))
35 .show();
36
37 });//end each
38
39 $("#totalprocess").val(v_totalProcess);
40 }//end function xml
41 });//end ajax
42
43 if(v_totalProcess>=v_maxProcess) {
44 clearInterval(clearObj);
45 self.location="page.html";
46 }
47 }
48
49 $(document).ready(function(){
50 init();
51 clearObj=setInterval("FetchAndShow()",2000);
52 });//end document ready
53
54
定期获取数据并更新页面55
56
57
58
59
60
最多处理记录数61
62
63 ，达到该值后将刷新页面重新启动！
64
65
66
当前处理数67
68
69
70
71
72
73
74
序号75
时间76
77
78
79
80 0
81
82
83
84
85
86
87
88
3371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
