Ajax，为什么setInterval函数不起作用？

Question

I just have a json page in localhost and I save the data of this page in a file , I need to save this page every 5 seconds, so I developed this code in ajax , using a page in php with an exec command,I used a setinterval function for the update but my code execute the function getRequest only one time. Here the html:

<script type="text/javascript">
    // handles the click event for link 1, sends the query
  function getOutput() {
    setInterval(function(){
 getRequest(
      'prova1.php', // URL for the PHP file
       drawOutput,  // handle successful request
       drawError    // handle error
  );
  return false;
  },3000);
}  
// handles drawing an error message
function drawError() {
    var container = document.getElementById('output');
    container.innerHTML = 'Bummer: there was an error!';
}
// handles the response, adds the html
function drawOutput(responseText) {
    var container = document.getElementById('output');
    container.innerHTML = responseText;
}
// helper function for cross-browser request object
function getRequest(url, success, error) {
    var req = false;
    try{
        // most browsers
        req = new XMLHttpRequest();
    } catch (e){
        // IE
        try{
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            // try an older version
            try{
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                return false;
            }
        }
    }
    if (!req) return false;
    if (typeof success != 'function') success = function () {};
    if (typeof error!= 'function') error = function () {};
    req.onreadystatechange = function(){
        if(req.readyState == 4) {
            return req.status === 200 ? 
                success(req.responseText) : error(req.status);
        }
    }
    req.open("GET", url, true);
    req.send(null);
    return req;
}
</script>

And here the php page:

<?php
  exec(" wget http://127.0.0.1:8082/Canvases/Fe0_Cbc1_Calibration/root.json -O provami3.json", $output);
  echo 'ok';
?>

I'm new to php , javascript ajax etc and Im learning it a piece at time, I know that maybe there is an easy way for it using jQuery but for now I'm learning Ajax, so I'd like have an advice for doing it with Ajax. Thank you all.

Answer 1

Do you have called getOutput() function?I don't see it...

Working example with your code here: http://jsfiddle.net/v9xf1jsw/2/

I've only added this at the end:

getOutput();

Edit: Working example with getOutput call into a link: http://jsfiddle.net/v9xf1jsw/8/

Answer 2

The JS is fine, see example here counting the loops https://jsfiddle.net/tk9kfdna/1/

<div id="output"></div>
<div id="log"></div>
<script type="text/javascript">
// handles the click event for link 1, sends the query

var times=0;

function getOutput() {
  setInterval(function(){
 getRequest(
  'prova1.php', // URL for the PHP file
   drawOutput,  // handle successful request
   drawError    // handle error
  );
  return false;
  },3000);
}  
// handles drawing an error message
function drawError() {
var container = document.getElementById('output');
container.innerHTML = 'Bummer: there was an error!';
}
// handles the response, adds the html
function drawOutput(responseText) {
var container = document.getElementById('output');
container.innerHTML = responseText;
}
function getRequest(url, success, error) {

times++;

var req = false;
try{
    // most browsers
    req = new XMLHttpRequest();
} catch (e){
    // IE
    try{
        req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        // try an older version
        try{
            req = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {
            return false;
        }
    }
}
if (!req) return false;
if (typeof success != 'function') success = function () {};
if (typeof error!= 'function') error = function () {};
req.onreadystatechange = function(){
    if(req.readyState == 4) {
        return req.status === 200 ? 
            success(req.responseText) : error(req.status);
    }
}
req.open("GET", url, true);
req.send(null);

var log = document.getElementById('log');
log.innerHTML = 'Loop:'+times;

return req;


}

getOutput();
</script>

Assuming here your calling getOutput() somewhere as that was not included in your original question if not it may just be that. Otherwise what may be happening is a response from prova1.php is never being received and so the script appears like it's not working. The default timeout for XMLHttpRequest request is 0 meaning it will run forever unless you specify the timeout.

Try setting a shorter timeout by adding

req.timeout = 2000; // two seconds

Likely there is an issue with prova1.php? does prova1.php run ok when your try it standalone.

Answer 3

1) Return false at the end of the setInterval method, I don't believe this is necessary.

2) Use a global variable to store the setInterval, (this will also give you the option to cancel the setInterval).

var myInterval;
function getOutput() {
    myInterval = setInterval(function(){
 getRequest(
      'prova1.php', // URL for the PHP file
       drawOutput,  // handle successful request
       drawError    // handle error
  );
  },3000);
}