Very Basic AJAX help

[Bozebo]

Well.. I have never quite figured out how to use ajax, all the tuorials go round in circles and don't really explain anything. I'm working on a turn based game that refreshes every 5 seconds to check if it is the player's move or not. I know i would be much better off using AJAX to read when it is the players go and then refresh, of course AJAX could power the entire interaction but I want to start from the bottom and work my way up.

So, ultimately, the ajax has to read a PHP file which either has 1 or 0 in it... If the value is 1 then a piece of javascript is run, otherwise a different piece of javascript is run. I have tried to take codes from tutorials and model them too my needs but it's always messy, excessive and worst of all... it doesnt work.

here is my most recent attempt:

<script type="text/javascript">

  function checktimer()
  {
    try {
      xhr = new XMLHttpRequest()
    }
    catch(e)
    {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    } 

    userid = document.getElementById('this_userid').value
    gameid = document.getElementById('this_gameid').value
    url = "other/is_in_game.php?userid="+userid+"&gameid="+gameid

    if (document.getElementById('not_my_go').value == 'true')
    {       
      xhr.open('GET',url,true);                  
      xhr.send(null); 
      if(xhr.readyState == 4){
        if (xhr.responseText == '1'){
          alert('value is 1')
        } else {
          alert('value is not 1, checking again in 3 seconds');
          setTimeout("checktimer()",3000)
        }
      }
    }
  }
</script>

I am practically asking someone to write me Javascript to read a value and then produce an if statement... (I can work it into the 5 second loop myself)

Thanks in advance.

[suntra]

The third argument in xhr.open() is set to true, this means that the request is asynchronous... the function executes completely no matter if the answer was received or not. What you need to do is assign a receiving function with...

xhr.onreadystatechange	= your_receiving_function;

Exemple with your code...

     var xhr	= null;
function checktimer() {
	try {
		xhr = new XMLHttpRequest()
		if(xhr.overrideMimeType) {
			xhr.overrideMimeType('text/html');
		}
	} catch(e) {
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if(xhr) {
		userid = document.getElementById('this_userid').value
		gameid = document.getElementById('this_gameid').value
		url = "other/is_in_game.php?userid="+userid+"&gameid="+gameid
		if(document.getElementById('not_my_go').value == 'true') {       

			xhr.onreadystatechange	= checktimer_receiver;
			xhr.open('GET',url,true);
			xhr.send(null);
		}
	}
}
function checktimer_receiver() {
	if(xhr.readyState == 4) {
		if(xhr.status == 200) {
			var response	= xhr.responseText;
			if(response == "1") {
				alert("The answer is 1 !");
			} else {
				alert("The answer isn't 1... let's try again !");
				window.setTimeout("checktimer();", 3000);
			}
		} else {
			alert("An error has occured. #" + xhr.status);
		}
	}
}

I didn't test it, so you might have some things to fix...

What is important :
-> Declare a global variable (here "xhr") that will be the AJAX object (declare it outside any function)
-> When creating the AJAX object, make sure to "overrideMimeType" with "text/html" if the object was created with XMLHttpRequest()...
-> Create a receving function that uses the globab variable ("xhr") and reads the response... I added a status verification, in case...
-> In your sending function, use "xhr.onreadystatechange" to assign the receiving function. DO NOT put (), just the name !

That's about it. Give it a try and give me some news..