使用定时器以新数据自动更新页面

最新推荐文章于 2019-11-24 13:36:10 发布

xiantouxu

最新推荐文章于 2019-11-24 13:36:10 发布

阅读量970

点赞数

分类专栏： javascript 文章标签： ajax

本文链接：https://blog.csdn.net/xiantouxu/article/details/77504731

版权

javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

问题：想要显示来自一个文件的条目，但是该文件会经常更新
解决方案：使用Ajax和一个定时器来周期性地检查文件，获取更新显示。

<!DOCTYPE html>
<html>
<head>
    <title>On Demand Select</title>
</head>
<body>
<ul id="update"></ul>
<script>
var xmlHttp;
function populateList() {
    if(!xmlHttp){
        xmlHttp = new XMLHttpRequest();
    }
    var url = "http://localhost/text.txt?name=aaa";
    xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange = processResponse;
    xmlHttp.send(null);
}
function processResponse(){
    if(xmlHttp.readyState ==4 && xmlHttp.status==200){
        var li = document.createElement("li");
        var txt = document.createTextNode(xmlHttp.responseText);
        li.appendChild(txt);
        document.getElementById("update").appendChild(li);
        setTimeout(processResponse,15000);
    }else if(xmlHttp.readyState == 4 && xmlHttp.status != 200){
        alert(xmlHttp.responseText);
    }
}
window.onload = function(){
    xmlHttp = new XMLHttpRequest();
    populateList();
}
</script>
</body>
</html>