How do I get ajax to intermittently call my php? - php

Question

I have ajax that is communicating with php to receive tweets from a twitter account. The code is working fine.
The only thing is I want the ajax to intermittently call the php so that any updated tweets automatically come back and get printed to my page without having to refresh or re-enter a twitter id.
Do I need to keep calling the getStatuses() function or something?
Or do I need to use the getUpdates() which I have started to make somehow?
Here are my ajax functions:
// the setInterval function added in the getStatusesX function
function getStatusesX()
{
setInterval(getStatuses(),300000);
}
//Create a cross-browser XMLHttp Request object
function getXMLHttp() {
var xmlhttp;
if (window.ActiveXObject) {
XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
XMLHttp = new XMLHttpRequest();
} else {
alert("Your browser does not support XMLHTTP!");
}
return XMLHttp;
}
//function that searches for the tweets via php
function getStatuses(){
XMLHttp1 = getXMLHttp();
var userID = document.getElementById("userid").value;
//ajax call to a php file that will extract the tweets
XMLHttp1.open( 'GET', 'twitterTest2.php?userid='+userID, true);
// Process the data when the ajax object changes its state
XMLHttp1.onreadystatechange = function() {
if( XMLHttp1.readyState == 4 ) {
if( XMLHttp1.status ==200 ) { //no problem has been detected
document.getElementById("tweetbox").innerHTML=XMLHttp1.responseText;
}
}
}
XMLHttp1.send(null);
}
//function to intermittently call php to check for updated tweets?
function updateInfo() {
if(XMLHttp1.readyState == 4) {
document.getElementById("tweetbox").innerHTML=XMLHttp1.responseText;
}
}
</script>
I then added the getStatusesX() function to my form as follows:
<form>
Input Twitter ID: <input type="text" name="userid" id="userid">
<button type="button" onClick="getStatusesX()";>Get recent tweets</button>
</form>
It's still not working. Am i using the setInterval in the wrong way?

Answer 1

Use the setTimeout or setInterval functions.
From what I can see in your code, getStatuses has too much responsability since in addition of getting the data, it also modifies the DOM.
I would suggest something like:
function getStatuses(callback) {
//...
XMLHttp1.onreadystatechange = function () {
//...
callback && callback(XMLHttp1); //execute callback if any
};
}
function updateStatuses(callback) {
getStatuses(function (xhr) {
document.getElementById("tweetbox").innerHTML = xhr.responseText;
callback && callback;
});
}
//this function update the statuses and as soon as it's finished, it sets
//a timeout to redo the process in ~10 seconds.
function startUpdatingStatuses() {
updateStatuses(function () {
setTimeout(startUpdatingStatuses, 10000);
});
}
startUpdatingStatuses(); //kick-start everything