setinterval ajax—示例代码

ThinkPhpchengxu

温馨提示:这篇文章已超过239天没有更新,请注意相关的内容是否还可用!

setInterval是JavaScript中的一个函数,它用于按照指定的时间间隔重复执行某个函数或代码块。在网页开发中,我们经常会使用setInterval来定时发送Ajax请求,以实现动态更新页面内容的效果。

下面是一个使用setInterval和Ajax的示例代码:

setInterval(function() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML = this.responseText;

}

};

xhttp.open("GET", "ajax_info.txt", true);

xhttp.send();

}, 1000);

在这个示例中,我们使用setInterval函数来每隔1秒钟执行一次包含Ajax请求的代码块。我们创建一个XMLHttpRequest对象(简称XHR),用于发送Ajax请求。然后,我们设置XHR的onreadystatechange事件处理程序,当请求的状态发生变化时,该处理程序会被触发。

在onreadystatechange事件处理程序中,我们首先检查请求的状态和响应的状态码。当请求的状态为4(即请求已完成)并且响应的状态码为200(即请求成功)时,我们将服务器返回的响应文本设置为id为"demo"的元素的内容,从而更新页面的显示内容。

我们使用XHR的open方法来指定请求的类型(这里是GET)和URL地址(这里是"ajax_info.txt")。然后,我们使用send方法发送请求。

通过这段代码,我们可以每隔1秒钟向服务器发送一次Ajax请求,获取最新的数据,并将其更新到页面上的指定元素中,实现动态更新页面内容的效果。

文章版权声明:除非注明,否则均为莫宇前端原创文章,转载或复制请以超链接形式并注明出处。

取消
微信二维码
微信二维码
支付宝二维码