AJAX 自动刷新页面

最新推荐文章于 2021-08-06 15:41:17 发布

baihuo

最新推荐文章于 2021-08-06 15:41:17 发布

阅读量3.2k

点赞数

分类专栏： AJAX 文章标签： ajax session table button null header

本文链接：https://blog.csdn.net/baihuo/article/details/2866666

版权

AJAX 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

count.html

 
 <html>
<head>
<title>aaaaaa</title>
<script>
var xmlHttp;
function createXMLHttpRequest(){
    if (window.ActiveXObject)
    {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest)
    {
        xmlHttp = new XMLHttpRequest();
    }
}
function doStart ()
{
    createXMLHttpRequest();
    var url = "count.php?task=reset";
    xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange = startCallback;
    xmlHttp.send(null);
}
function startCallback()
{
    if (xmlHttp.readyState == 4)
    {
        if (xmlHttp.status == 200)
        {
            setTimeout("pollServer()",5000);
            refreshTime();
        }
    }
}
function pollServer() {
    createXMLHttpRequest();
    var url = "count.php?task=foo";
    xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange = pollCallback;
    xmlHttp.send(null);
}
function refreshTime() {
    var time_span = document.getElementById("time");
    var time_val = time_span.innerHTML;
    var int_val = parseInt(time_val);
    var new_int_val = int_val - 1;
    if (new_int_val > -1)
    {
        setTimeout("refreshTime()",1000);
        time_span.innerHTML = new_int_val;
    }else {
        time_span.innerHTML = 5;
    }
}
function pollCallback() {
    if (xmlHttp.readyState == 4)
    {
        if (xmlHttp.status == 200)
        {
            var message = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;//取得XML中MESSAGE的子节点数据
            if ( message != "done")
            {
                var new_row = createRow(message);
                var table = document.getElementById("dynamicUpdateArea");//获得dunamicUpdateArea区域的元素
                var table_body = table.getElementsByTagName("tbody").item(0);//取得TBODY节点元素
                var first_row = table_body.getElementsByTagName("tr").item(1);
                table_body.insertBefore(new_row,first_row);
                setTimeout("pollServer()",5000);
                refreshTime();
            }
        }
    }
}
function createRow(message){
    var row = document.createElement("tr");
    var cell = document.createElement("td");
    var cell_data = document.createTextNode(message);
    cell.appendChild(cell_data);
    row.appendChild(cell);
    return row;
}
</script>
</head>
<body>
<h1>aaaaaaaa</h1>
bbbbbbbbbbbbbbbbbbbbbbb:
    <input type="button" value="launch" οnclick="doStart();">
<p>
Page will refresh in <span id="time">5</span> seconds.
<p>
<table id="dynamicUpdateArea" align="left">
    <tbody>
        <tr id="row0"><td></td></tr>
    </tbody>
</table>
</body>
</html>
 

count.php

 
 <?php
class test
{
function test(){
    header('Content-Type: text/xml');
$task=$_GET['task'];
if($task == "reset")
{
    $_SESSION['counter']=1;
}
else
{
    switch($_SESSION['counter']){
        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;
        case 7: $message = "done";break;
    }
    $_SESSION['counter'] ++ ;
}
$res = "<response><message>".$message."</message></response>";
echo $res;
}
}
session_start();
if(!isset($_SESSION['counter'])) $_SESSION['counter']=1;
$bb = new test();
?>
 