Newbie to AJAX please bear with me.

[andrewsmd]

So I am trying to execute a php file to check to see if a name exists in a database once a user scrolls off of a text box. Here is what I have pieced together as best I can, please keep in mind I am a newbie to ajax.

HTML

just a note, not that I think it matters, but this form is only shown when a user clicks a link.

<form name = "newForm" method = "post">
<h2>New Job</h2><br>

<table>
<tr>
<td class = "divTitle">Job Name:</td>
<td><input type = "text" name = "newJobName" onblur="checkName(this.value, 53)"></td>
<td><span id = "newText53"></span></td>
</tr>
<tr>
<td class = "divTitle">Notes:</td>

<td><textarea name = "newNotes"></textarea></td>
</tr>
</table>

<input type = "submit" name = "newSubmit" value = "Add Job"> <!-- onclick="hide('div53')" -->

</form>

testNew.php
<?php

echo("test");

?>

Javascript
function checkName(value, id){

xmlHttp=GetXmlHttpObject();
if (xmlHttp==null){

alert ("Your browser does not support AJAX!");
return;

}//if xml null

var url="testNew.php";
url=url+"?nameID="+value;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged(id);
xmlHttp.open("GET",url,true);
xmlHttp.send(null);

}//checkName

function stateChanged(id){

if (xmlHttp.readyState==4){

document.getElementById("newText"+id).innerHTML=xmlHttp.responseText;

}//if readyState

}//stateChanged

function GetXmlHttpObject(){
var xmlHttp=null;

try {

// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();

}//try

catch (e){

// Internet Explorer
try{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}//try

catch (e){

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}
}//catch

return xmlHttp;

}//getxml objec

Right now it doesn't do anything. I want it to print out test in the span id='newText53' area. Any ideas for me? Thanks,

[astupidname]

Try changing this line:

xmlHttp.onreadystatechange=stateChanged(id);

To this:

xmlHttp.onreadystatechange=function () {stateChanged(id);};

[andrewsmd]

Awesome that's what it was. If you have a second, could you explain why I needed that? Not knowing JS very well and trying to do AJAX is rather hard. Thanks,
Also I had to change it to
xmlHttp.onreadystatechange=function()(stateChanged(id));
That's not a typo, it's exactly like that with the extra ) at the end. Why does that work?

[astupidname]

could you explain why I needed that

When you do this:

xmlHttp.onreadystatechange=stateChanged(id);

The function (in this case, stateChanged() ) is actually being invoked because of the parens (id) and assigned as the value of the onreadystatechange function. So, because stateChanged() does not return a value, it returns undefined, the value of a function that does not return a value, and so therefore onreadystatechange will be undefined. An example:

<script type="text/javascript">

function foo() {
var a = 10;
}

var f = foo(); //invoking foo, does not return a value
alert(f); //'undefined'
</script>

Also I had to change it to
xmlHttp.onreadystatechange=function()(stateChanged(id));
That's not a typo, it's exactly like that with the extra ) at the end. Why does that work?

Ummm.. not sure on that one, looks actually like a syntax error if you ask me. It should have worked the way I posted (using brackets {} instead of parens () around the body of the function):

xmlHttp.onreadystatechange=function(){stateChanged(id);};

But, if it didn't, perhaps there's still a scope issue. Could also try something like:

xmlHttp.onreadystatechange = (function (ID) { return function () { stateChanged(ID); })(id);

Perhaps the onreadystatechange function might have had trouble seeing the id, shouldn't have been a problem though.
With the above snippet, the outer anonymous function wrapped in parens is invoked at the moment of evaluation (when the script reads it as the value of the onreadystatechange function), via use of the parens wrapping the (id) at the end, and the (id) is sent through the outer anonymous functions arguments (ID). The inner anonymous function has access to that argument which gets evaluated and inserted into the internal anonymous function's stateChanged function. The inner anonymous function is returned by the outer anonymous function, and therfore as the value of the onreadystatechange function.
So, maybe give that a try, and enjoy!