如何定期制作xmlhttprequest？

Question

I want to loop an httprequest every 5 seconds.

Here is my code :

var xmlhttp2 = new XMLHttpRequest();
var url2 = "http:...";
xmlhttp2.onreadystatechange = function() {
 if (xmlhttp2.readyState == 4 && xmlhttp2.status == 200) {
    var response2 = xmlhttp2.responseText;
    var response2 = xmlhttp2.responseText;
    var json2  = JSON.parse(response2); 
    for (var i = 2; i < json2.length; i++){
        document.getElementById('table2').innerHTML += '<tr><td>' + json2[i].nm + '</td><td>' + json2[i].id + '</td><td id="uid_'+i+'">' + json2[i].stn + '</td></tr>';
 }

}
xmlhttp2.open("GET", url2, true);
xmlhttp2.send();

I tried to put this whole code in a function and called

setInterval(myFunction,5000);

This works. However the table is displaying several times.

I tried

setInterval("xmlhttp2.send();",5000);

and this doesn't work. The request is made only once.

Any advice ?

Thank you

Answer 1

You can clear the table before populating it with the server response

Answer

var xmlhttp2 = new XMLHttpRequest();
var url2 = "http:...";
xmlhttp2.onreadystatechange = function() {
 if (xmlhttp2.readyState == 4 && xmlhttp2.status == 200) {
    var response2 = xmlhttp2.responseText;
    var response2 = xmlhttp2.responseText;
    var json2  = JSON.parse(response2);
    var table = document.getElementById('table2');
    table.innerHTML = '';
    for (var i = 2; i < json2.length; i++){
        table.innerHTML += '<tr><td>' + json2[i].nm + '</td><td>' + json2[i].id + '</td><td id="uid_'+i+'">' + json2[i].stn + '</td></tr>';
 }

}
xmlhttp2.open("GET", url2, true);
xmlhttp2.send();

Use setInterval(myFunction,5000); to make periodic request.

Edited

var xmlhttp2 = new XMLHttpRequest();
    var url2 = "http:...";
    xmlhttp2.onreadystatechange = function() {
     if (xmlhttp2.readyState == 4 && xmlhttp2.status == 200) {
        var response2 = xmlhttp2.responseText;
        var response2 = xmlhttp2.responseText;
        var json2  = JSON.parse(response2);
        var tableBody = document.getElementById('table2Body');
        tableBody.innerHTML = '';
        for (var i = 2; i < json2.length; i++){
            tableBody.innerHTML += '<tr><td>' + json2[i].nm + '</td><td>' + json2[i].id + '</td><td id="uid_'+i+'">' + json2[i].stn + '</td></tr>';
     }

    }
    xmlhttp2.open("GET", url2, true);
    xmlhttp2.send();