如何使ajax更新每(n)秒，而不是使用jquery，但使用javascript

How make ajax update every (n) number of seconds with out using jquery but using javascript?

本文关键字：javascript jquery 更新 ajax 何使      更新时间：2023-09-26

我试图有一个javascript轮询服务器每(n)秒数我将如何用javascript做到这一点?

假设您正在使用jQuery:

var seconds = 5;
setInterval(function(){
    $.ajax({
        url: 'something.something',
        data: 'something'
    });
}, seconds * 1000)
没有jQuery: 

var seconds = 5;
setInterval(function(){
    some_ajax_function();
}, seconds * 1000)

或者像@Felix下面建议的那样:

var seconds = 5;
some_ajax_function(seconds);
function some_ajax_function(seconds){
     ..ajax
     onsuccess: setTimeout(function(){some_ajax_function(seconds);}, 
                      seconds * 1000)
}

使用以下函数很简单

窗口。setInterval("yourfunctionWithAjaxRequestETC",time_in_ms);});

享受:)

首先，我们需要创建ajax请求对象。我们需要考虑不同的浏览器。

var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else
  {
   // code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

现在，我们将编写发送请求的函数

function askData(){
   xmlhttp.open("GET","myinfosource.php",true);  // opens a Get request to the url myinfosource.php, and sets the request to asynchronuous.
   xmlhttp.send(); //sends the request
}

现在，让我们编写一个事件处理程序，当信息返回时改变HTML。

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) //if we reveived data (readystate 4 means that information was received. status 200 is the status of the HTTP request, where 200 means 'ok'.
    {
    //insert data into the div you want.
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }

}

最后，我们在第一个函数上设置一个间隔，使它每x秒运行一次。

setInterval('askData',10000);

这将刷新您的数据。

我希望你现在明白为什么大多数人使用jquery这样的框架来使用AJAX。js框架的一个主要优点是它们可以解决浏览器的不兼容性问题，这样作为开发人员的你就可以专注于手头的任务。

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

下面的代码使用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>
相关文章：