如何每 N 秒安排一次 ajax 调用？答案

【问题标题】：how to schedule ajax calls every N seconds?如何每 N 秒安排一次 ajax 调用？
【发布时间】：2009-08-29 04:25:28
【问题描述】：

如果我希望每 N 秒重新加载整个页面，我会在 HTML 中添加如下内容： meta http-equiv="refresh" content="5"

是否有针对 AJAX 调用执行相同操作的标准做法？我想安排一个 AJAX 调用每隔 10 秒触发一次，以便更新页面的某些部分，而不刷新整个页面。如果我可以在不同时间安排多个 AJAX 调用会更好，因为页面的某些部分可能需要比其他部分更频繁地更新。

TIA

【问题讨论】：

既然已经提到了 setTimeout 和 setInterval，你可能应该看看 John Resig 关于计时器如何在 JavaScript 中工作的笔记 - ejohn.org/blog/how-javascript-timers-work
查看 jQuery 库 - 似乎有一个流行的插件专门用来做我所追求的：360innovate.co.uk/blog/2009/03/periodicalupdater-for-jquery

标签： javascript ajax http

【解决方案1】：

您可以使用setTimeout 或setInterval（后者可能最适合您想要做的事情）。

setInterval(makeRequest, (10 * 1000));

...makeRequest 是一个通过 AJAX 重新加载某些内容的函数。

【讨论】：

如果您这样做，我会确保在开始另一个请求之前验证前一个请求是否已完成。如果存在网络延迟，您不想堆积请求。
@jtbandes：好点。但是，这个逻辑可能会进入“makeRequest”函数。
@jtbandes，如果上一个请求在另一个请求启动时还没有完成会发生什么？
@PeterLee 这只是不可取的——例如，如果一个人滞后，他们可能会在同一时间完成，因此您的 UI 可能会不定期更新。或者，如果出现网络错误并且没有一个请求可以通过，那么每隔几秒发送更多请求是没有意义的。

【解决方案2】：

function proxy()
{
  /* implement call to your Ajax method */
}

setInterval( proxy, 1000 ); // last arg is in milliseconds

【讨论】：

【解决方案3】：

You can use serInterval method of javascript:
Just write down the lines at the bottom of your page:

<script>
window.setInterval(function(){
  ajaxCallFunction();  //calling every 5 seconds
}, 5000);

function ajaxCallFunction(){
    //this function uses ajax to interact with the server
}
<script>

【讨论】：

【解决方案4】：

我假设在 web.xml 中配置了一个带有 URL 模式 /UpdateCount 的 servlet 以提供动态数据/内容，并且其中有一个 div 元素 countStatDiv jsp页面。

以下代码使用GET方法每30秒刷新/更新一次countStatDiv的内容，变量seconds的值可以根据需要改变：

                <script>
                    var request;
                    var seconds=30;
                    function getRequestObject(){
                    setInterval(function() {sendRequest();},seconds*1000);
                    if (window.ActiveXObject){
                    return (new ActiveXObject("Microsoft.XMLHTTP"));
                    } else if (window.XMLHttpRequest){
                    return(new XMLHttpRequest());
                    } else {
                    return (null);
                    }
                    }
                    function sendRequest(){
                    request = getRequestObject();
                    request.onreadystatechange = handleResponse;
                    request.open("GET", "../UpdateCount", true);
                    request.send(null);
                    }
                    function handleResponse(){
                    if((request.readyState == 4)&amp;&amp;(request.status == 200)){
                    var serverResponse = request.responseText;
                    var statCtrl=document.getElementById("countStatDiv");
                    statCtrl.innerHTML=serverResponse;
                    }
                    }
                </script>

【讨论】：