Help with responseText from XMLHttpRequest

[Bob Green]

I have a javascript object called Ajax; this object has the retrieve function that returns the responseText from the XMLHttpRequest object.
I have a user javascript that creates the Ajax object and calls the retrieve function. I am not able to get the responseText back from the retrieve function; it returns "underfined" all the times.
Can someone please help me with this. Thanks in advance.

Ajax object:
============

var xmlHttp;
 
function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } 
    else if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } 
    else {
        return "This browser does not support AJAX!";
    }
}
    
function Ajax(key) {
   this.api = key;
   this.retrieve = function() {
       var url = "VerifyListing?timeStamp=" + new Date().getTime();
       var queryString = "api=" + encodeURIComponent(this.api);   
       xmlHttp = createXMLHttpRequest(); 
       xmlHttp.open("POST", url, true);
       xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");       
       xmlHttp.onreadystatechange = function() {
           if (xmlHttp.readyState == 4) {
              if (xmlHttp.status == 200) {
                  return xmlHttp.responseText;  
              }
           }
       } 
       xmlHttp.send(queryString);     
   }
}

[edit - Added code tags]
[ September 23, 2008: Message edited by: Eric Pascarello ]

[Eric Pascarello]

The issue you have is you are acting like the call you are making is synchronous, but you are using an asynchronous call.

You function goes off on its own and you place where you called it keeps running. It does not wait for the response [hence why it is undefined].

Design your code so it makes the call and onreadystatechange, you call the next step with the value.

Eric

[Bob Green]

Eric,
Can you please elaborate a little bit on your statement
"Design your code so it makes the call and onreadystatechange, you call the next step with the value."

I don't quite understand.

Thanks,

[Eric Pascarello]

Well it really depends on what you are doing but the basic idea is

 
var firstPart(){
  //code here
 
  //Ajax call here
}
 
//ajax call function
...
...onreadystatechange = function(){secondPart();}
...
 
var secondPart(){
  //get response here and handle it
}
 

If you use a framework to do it, it is pretty simple.

JQuery Example:

 
function firstPart(){
 
  //code
 
  //The Ajax Call
  $.post('save.jsp', {
    text: 'Something',
    number: 123
  }, function() {
    secondPart();
  });
 
}
 

Eric

[Bob Green]

Eric, Sorry I still don't get your idea.

[Eric Pascarello]

Break up your code into two chunks

Part before Ajax call
Part after Ajax call

Call the second part from the Ajax call.

 
function getPhoneNumber(value){
 
  var data = "method=getPhoneNumber&name=" + encodeURIComponent(value);
  callMyAjaxFunction(data);
 
}
 
function callMyAjaxFunction( data ){
 
  //AjaxCCodeHere
  req.onreadystatechange=function(){if(req.readyState==4)showNumber();};
  //AjaxCCodeHere
 
}
 
function showNumber(){
  var textOut = (req.status==200)?req.responseText:"error";
  document.getElementById("someId".innerHTML = textOut;
}

There are better wasy to do it [not hard coding function calls], libraries enable it if you do not want to code it all.

Eric

[Bear Bibeault]

In an asynchronous request, the response is not available until the request completes. You are attempting to grab the data synchronously before it is ready.