Can't return xmlhttp.responseText?
Any insight into the problem here? When run, the code yields nothing. No text appears on the page. If I uncomment the commented line, the xml results appear. Why can't I pass it as a variable? (I do get the alert, fyi, so the function is being called.)
<script type="text/javascript">
function loadXMLDoc(parameterString)
{
alert("loadXMLDoc has been called.");
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//document.getElementById("xmlResults").innerHTML = xmlhttp.responseText;
alert("Got the response!");
return xmlhttp.responseText;
}
else document.getElementById("xmlResults").innerHTML = "No results."
}
var url = "http://metpetdb.rpi.edu/metpetwebsearchIPhone.svc?" + parameterString;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
<script type="text/javascript">
$(function(){
//left out irrelevant code which creates the var "parameters"
var results = loadXMLDoc(parameters);
document.getElementById("xmlresults").innerHTML = results;
});
</script>
<body>
<div id="xmlResults"></div>
</body>
Answer
By definition, an asynchronous call performs the real work without making the caller wait for the result. You do need to use a callback function, for example:
<script type="text/javascript">
function loadXMLDoc(parameterString, onComplete, onError) {
alert("loadXMLDoc has been called.");
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
if(xmlhttp.status==200) {
//document.getElementById("xmlResults").innerHTML = xmlhttp.responseText;
alert("Got the response!");
onComplete(xmlhttp.responseText);
} else {
onError();
}
}
};
var url = "http://metpetdb.rpi.edu/metpetwebsearchIPhone.svc?" + parameterString;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
<script type="text/javascript">
$(function(){
//left out irrelevant code which creates the var "parameters"
loadXMLDoc(parameters, function(results) {
// this function will be called if the xmlhttprequest received a result
document.getElementById("xmlresults").innerHTML = results;
}, function() {
// this function will be called if xhr failed
document.getElementById("xmlResults").innerHTML = "No results.";
});
});
</script>
By the way, since you are already using jQuery, you should just use its builtin AJAX functionality instead of building your custom xmlhttprequest.