Ajax:自动刷新 

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


        function doStart() {
            createXMLHttpRequest();

            var queryString = "WS.asmx/DynamicUpdate?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);
                    refreshTime();
                }
            }
        }
        function pollServer() {
            var queryString = "WS.asmx/DynamicUpdate?task=foo";
            xmlHttp.onreadystatechange = pollCallback;
            xmlHttp.open("GET", queryString, true);
            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;
                    if (message == "done") {
                        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);
                        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);
            return row;
        }
    </script>
</head>
<body>
    <h1>
        Ajax页面自动刷新</h1>
    <input type="button" value="开始" onclick="doStart();" />
    页面将在<span id="time">5</span>秒后刷新
    <table id="dynamicUpdateArea" align="left">
        <tbody>
            <tr id="row0">
                <td>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Webservice内容：

 private int counter = 1;
        [WebMethod]
        public void DynamicUpdate()
        {
            var task = Context.Request.QueryString["task"];
            string message = "";
            string res = "";
            if (task.Equals("reset"))
            {
                counter = 1;
            }
            else
            {
                switch (counter)
                {
                    case 1:
                        break;
                    case 2:
                        break;
                    case 3:
                        break;
                    case 4:
                        break;
                    case 5:
                        break;
                    case 6:
                        break;
                    case 7:
                        break;
                    default:
                        break;
                }
                counter++;
            }
            res = "<message>" + message + "</message>";
            Context.Response.ContentType = "text/xml";
            Context.Response.Write("<response>");
            Context.Response.Write(res);
            Context.Response.Write("</response>");
        }

运行效果是动态的，这里也就不贴图了

posted on 2012-10-09 17:49  lufangtao  阅读(2971)  评论(0)  编辑  收藏  举报

导航