How to pass variables from an HTTPObject

I'm very, very new to Javascript, and to web programming in general. I think that I'm misunderstanding something fundamental, but I've been unable to figure out what.

I have the following code:

function checkUserAuth(){
var userAuthHttpObject = new XMLHttpRequest();
var url = baseURL + "/userAuth";
userAuthHttpObject.open("POST",url,true);
userAuthHttpObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
userAu开发者_Go百科thHttpObject.onload=function(){
    if (userAuthHttpObject.readyState == 4) {
        var response = json.loads(userAuthHttpObject.responseText);
                    return response; //This is the part that doesn't work!
    }
};
userAuthHttpObject.send(params);

}

I would love to call it from my page with something like:

var authResponse = checkUserAuth();

And then just do what I want with that data.

Returning a variable, however, just returns it to the userAuthObject, and not all the way back to the function that was originally called.

Is there a way to get the data out of the HttpObject, and into the page that called the function?

Working with AJAX requires wrapping your head around asynchronous behavior, which is different than other types of programming. Rather than returning values directly, you want to set up a callback function.

Create another JavaScript function which accepts the AJAX response as a parameter. This function, let's call it "takeAction(response)", should do whatever it needs to, perhaps print a failure message or set a value in a hidden field and submit a form, whatever.

then where you have "return response" put "takeAction(response)".

So now, takeAction will do whatever it was you would have done after you called "var authResponse = checkUserAuth();"

There are a couple of best practices you should start with before you continue to write the script you asked about

1. XMLHTTTPRequest() is not browser consistent. I would recommend you use a library such as mootools or the excellent jquery.ajax as a starting point. it easier to implement and works more consistently. http://api.jquery.com/jQuery.ajax/

2. content type is important. You will have have problems trying to parse json data if you used a form content type. use "application/json" if you want to use json.

3. true user authorization should be done on the server, never in the browser. I'm not sure how you are using this script, but I suggest you may want to reconsider.

Preliminaries out of the way, Here is one way I would get information from an ajax call into the page with jquery:

$.ajax({
  //get an html chunk
  url: 'ajax/test.html',
  // do something with the html chunk
  success: function(htmlData) {
      //replace the content of <div id="auth">
      $('#auth').html(htmlData);

      //replace content of #auth with only the data in #message from 
      //the data we recieved in our ajax call
      $('#auth').html( function() {
          return $(htmlData).find('#message').text();
      });
  }
});