For some reason, onreadystatechange call back function is not being called in asynchronous mode. I tested the post in synchronous mode and confirmed that post itself is working fine (commented out testing code I used to check post in synchronous mode). The problem occurs both in safari and firefox latest version. Can someone please tell me what I am doing wrong here? Thank you.
<html>
<head>
<script>
function recordScore(str)
{
if (str.length==0)
{
return;
}
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="http://hellworld3.appspot.com/findcountry";
var params = "screenname="+document.getElementById("screenname1").value+"&score="+document.getElementById("score1").value;
alert("params: "+params);
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange = function()
{
alert("entered call back function. readstate value is: "+xmlHttpreadyState+". Response Text is: "+xmlHttp.responseText);
if (xmlHttp.readyState==4)
{
document.getElementById("message").innerHTML=xmlHttp.responseText;
}
}
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xmlHttp.send(params);
//Testing code for synchronous mode
//alert("Http get status is: "+xmlHttp.status);
//alert("Http ready state value is: "+xmlHttp.readyState);
//alert("Http get response text is: "+xmlHttp.responseText);
//document.getElementById("message").innerHTML=xmlHttp.responseText;
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>
</head>
<body>
<form name="testform">
Screename:
<input type="text" id="screenname1" name="screenname">
<br/>
Score:
<input type="text" id="score1" name="score" onchange="recordScore(this.value)">
<br/>
<p id="message">test</p>
<input type="submit" value="Submit">
</form>
</body>
</html>