Ajax+php实现自动刷新页面

浏览数：29 / 时间：2015年06月09日

前端代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var xmlHttp;
        var count = 1;
        function createXMLHttpRequest() {
            if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTp");
            }
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            }
        }

        function doStart() {
            createXMLHttpRequest();
            var queryString = "auto_refresh.php?task=reset";
            xmlHttp.onreadystatechange = handleStateChange;
            xmlHttp.open("GET", queryString, true);
            xmlHttp.send(null);
        }
        
        function handleStateChange() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    setTimeout("pollServer()", 5000);//5秒以后执行是pollServer()
                    refreshTime();
                }
            }
        }
        
       function pollServer() {
            var queryString = "auto_refresh.php?task=foo&count="+count++;
            xmlHttp.onreadystatechange = pollCallback;
            xmlHttp.open("GET", queryString, true);
            xmlHttp.send(null);
        }
        
        function pollCallback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    var message = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.nodeValue;
                    var new_row = createRow(message);
                    var table = document.getElementById("dynamicUpdateArea");
                    var table_body = table.getElementsByTagName("tbody").item(0);
                    var first_row = table_body.getElementsByTagName("tr").item(1);//实现从刷新字段往下插，first_row为null
//                var first_row = table_body.getElementsByTagName("tr").item(0);//实现从刷新字段往上插
                    table_body.insertBefore(new_row, first_row);
                    if (message != "done") {
                        setTimeout("pollServer()", 5000);
                        refreshTime();
                    }
                }
            }
        }
        
        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) {
                time_span.innerHTML = new_int_val;
                setTimeout("refreshTime()", 1000);
            }
            else {
                time_span.innerHTML = 5
            }
        }
        
        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>Ajax页面自动刷新</h1>
    <input type="button" value="开始" onclick="doStart();" />页面将在<span id="time">5</span>秒后刷新<br>
    <table id="dynamicUpdateArea" align="left">
        <tbody>
            <tr id="row0">
                <td>
                    刷新
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

后端代码：

<?php 
if($_GET){
            $task = $_GET["task"];
            $count = $_GET["count"];
            $message = "";
            $res = "";
            if( $task == "reset" ){
                $message = ‘重新开始！‘;
            }else{
                switch ($count)
                {
                    case 1: $message = ‘lixuan case 1‘;
                        break;
                    case 2: $message = ‘lixuan case 2‘;
                        break;
                    case 3: $message = ‘lixuan case 3‘;
                        break;
                    case 4: $message = ‘lixuan case 4‘;
                        break;
                    case 5: $message = ‘lixuan case 5‘;
                        break;
                    case 6: $message = ‘lixuan case 6‘;
                        break;
                    case 7: $message = ‘lixuan case 7‘;
                        break;
                    default: $message = ‘done‘;
                        break;
                }
//                $count++;
            }
            $res = "<message>" .$message ."</message>";
            header("Content-Type:text/xml");
            header("cache-control:no-cache,must-revalidate");
            print_r("<response>".$res."</response>");
            exit;
}
include ‘/home/q/www/crmxuan.qunar.com/htdocs/buycar/auto_refresh_1.php‘;
?>