如何从HTTPObject传递变量

Question

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");
userAuthHttpObject.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?

Answer 1

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();"

Answer 2

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();
      });
  }
});