how to return variable from the function called by onreadystatechange=function()

Question

I'm using the ajax technique in combination with php and I want to know how to get the return variable from the function that is called by onreadstatechange.

A java function is called onsubmit to then call a php script to verify some things in my database and return true or false depending on the results.

Here is where I run into problems, I want the onsubmit="return snappyajaxfunction()" to return false or true based on the results from the php.

My question is, how do I get the result of false or true from the stateChanged function to become the return for snappyajaxfunction.

I tried doing this for kicks: result = request.onreadystatechange=StateChanged with no luck.

I've also tried saving the responsetxt to a global variable then returning the global variable in snappyajaxfunction with no luck.

snappyajaxfunction()
{

   request.onreadystatechange=stateChanged;      
   request.open("GET",url,true); 
   request.send(null);

   return result;
} 

function stateChanged() 
{ 
    if (request.readyState==4)
    {   
       return request.responseText; 
    }    
}

The purpose of this is to script is to verify the username / password entered by the user with the username / password stored in my database. If it they don't match it returns false and the form will not submit, if it does the form submits and the user is brought to the welcome page...

Answer 1

You could do:

function stateChanged() 
{ 
    if (request.readyState==4)
    {   
       OnStateChanged(request.responseText);
    }           
}

Where OnStateChanged is a function that act as an event handler...

EDIT: in OnStateChanged you can then submit or not your form based on response

EDIT2: On the server when you check the u/p, if they're right log the user right on and return the status to JavaScript.. then in the JavaScript instead of resubmitting a form, just reload/redirect the page if it is successful or display an alert otherwise...

It is just not possible to return something from a function by an asynchronous operation in it... the original thread of execution is long gone. The asynchronous operation is executed by another thread (If I remember correctly, don't flame).

Thanks

Answer 2

feel free to check out this tutorial on ajax.

It will show you how to properly use ajax step-by-step

as inkedmn has suggested, I would recommend using jquery or any of the other js frameworks

Answer 3

jQuery won't automagically fix the fact that he's trying to base his submission on the results of an asynchronous request.

What you can do is the following:

1) Set the form onsubmit to simply call snappyajaxfunction();

2) In stateChanged, if the readystate is 4, obtain a reference to the form and do the following:

form.onsubmit = function() { return true; };
form.submit();

Basically - Set the onsubmit to always return true and then force it to submit again. For added usability you may want to disable the button causing the submission while waiting for statechanged to happen. And then re-enable it.

Answer 4

The problem is that ajax calls are asynchronous. That means the response is separate from the request. You have to modify your code to handle that. You cannot (should not) make http calls synchronous.

Look at this code. It works, and you'll be able to read the response:

var req = new XMLHttpRequest();
req.open('GET', url, true);
req.onreadystatechange = function (ev) {
    if (req.readyState == 4) {
        alert(req.responseText);
    }
};
req.send(null);

Answer 5

To make your code work you can use closures and pass functions as parameters.
2 properties javascript is very good at.

snappyajaxfunction(url, fn)
{
   var request...

   request.onreadystatechange=function() 
    { 
        if (request.readyState==4)
        {   
           fn(request.responseText);     
        }           
    };             
   request.open("GET",url,true); 
   request.send(null);
}

to use it you can build a function like

var doSomething = function(response){
  alert(response);
};
snappyajaxfunction('/country/code/32', doSomething);

The closure allows 'request' to be available within the function that handles the onreadystatechange. The function 'fn' is passed as a parameter of snappyajaxfunction.