Tips for successfully retrieving a variable from a function triggered by onreadystatechange=function()

Question

Tips for successfully retrieving a variable from a function triggered by onreadystatechange=function()

Combining the ajax technique with php, I'm looking to extract the return variable from the function called by onreadystatechange.

A java function triggers a call to a php script upon submission, which then validates certain data in the database and returns either true or false depending on the outcome.

The challenge arises when I aim for the onsubmit="return snappyajaxfunction()" to deliver a result of false or true based on the php response.

So my question is, how can I ensure that the stateChanged function effectively passes the false or true value to become the return value for snappyajaxfunction?

I experimented with the line: result = request.onreadystatechange=StateChanged but did not yield any success.

Another attempt involved saving the responsetxt to a global variable and returning that global variable within snappyajaxfunction, yet this also proved unsuccessful.


snappyajaxfunction()
{

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

   return result;
} 

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

The goal of this script is to authenticate the username/password input by comparing it with the stored credentials in the database. If there's a mismatch, it should return false preventing form submission, otherwise it proceeds to the welcome page...

javascript ajax

Answer 1

Answer №1

If you want to achieve this, you can use the following code:

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

In the code above, OnStateChanged functions as an event handler...

Note: Inside the OnStateChanged function, you have the option to submit your form depending on the response.

Furthermore, when validating the username and password on the server side, upon successful validation, log the user in and send the status back to JavaScript. Then, instead of re-submitting a form, reload or redirect the page upon success, or display an alert message if it fails...

Keep in mind that returning something from a function through an asynchronous operation is not possible...the original thread of execution no longer exists. The asynchronous operation is handled by a separate thread (if my memory serves me correctly).

Thank you

Answer 2

If you want to achieve this, you can use the following code:

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

In the code above, OnStateChanged functions as an event handler...

Note: Inside the OnStateChanged function, you have the option to submit your form depending on the response.

Furthermore, when validating the username and password on the server side, upon successful validation, log the user in and send the status back to JavaScript. Then, instead of re-submitting a form, reload or redirect the page upon success, or display an alert message if it fails...

Keep in mind that returning something from a function through an asynchronous operation is not possible...the original thread of execution no longer exists. The asynchronous operation is handled by a separate thread (if my memory serves me correctly).

Thank you

Answer 3

Answer №2

Using jQuery won't magically solve the issue of trying to base a submission on the results of an asynchronous request.

One approach to address this is:

1) Assign the form's onsubmit function to call snappyajaxfunction();

2) When the state changes and readystate is 4, grab a reference to the form and execute the following steps:

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

In essence - Make sure onsubmit always returns true and then manually trigger another form submission. To enhance user experience, consider disabling the submit button during the asynchronous operation and re-enabling it once the process is complete.

Answer 4

Using jQuery won't magically solve the issue of trying to base a submission on the results of an asynchronous request.

One approach to address this is:

1) Assign the form's onsubmit function to call snappyajaxfunction();

2) When the state changes and readystate is 4, grab a reference to the form and execute the following steps:

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

In essence - Make sure onsubmit always returns true and then manually trigger another form submission. To enhance user experience, consider disabling the submit button during the asynchronous operation and re-enabling it once the process is complete.

Answer 5

Answer №3

Take a look at this comprehensive ajax tutorial.

This tutorial will guide you through the process of utilizing ajax properly, step by step.

Following inkedmn's advice, I suggest using jquery or any other JavaScript framework for best results.

Answer 6

Take a look at this comprehensive ajax tutorial.

This tutorial will guide you through the process of utilizing ajax properly, step by step.

Following inkedmn's advice, I suggest using jquery or any other JavaScript framework for best results.

Answer 7

Answer №4

The issue here lies in the asynchronous nature of ajax calls, where the response is separate from the request itself. To handle this effectively, adjustments need to be made in your code. Making http calls synchronous is not recommended.

Take a look at the following code snippet which demonstrates how to work with asynchronous requests and 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 8

The issue here lies in the asynchronous nature of ajax calls, where the response is separate from the request itself. To handle this effectively, adjustments need to be made in your code. Making http calls synchronous is not recommended.

Take a look at the following code snippet which demonstrates how to work with asynchronous requests and 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 9

Answer №5

Implementing closures and passing functions as parameters can help improve the functionality of your code.
These are just two examples of what javascript excels at.

ajaxFunction(url, callback)
{
   var request...

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

You can utilize it by creating a function like this:

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

The use of closure allows 'request' to be accessible within the onreadystatechange function. The method 'callback' is passed as an argument in ajaxFunction.

Answer 10

Implementing closures and passing functions as parameters can help improve the functionality of your code.
These are just two examples of what javascript excels at.

ajaxFunction(url, callback)
{
   var request...

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

You can utilize it by creating a function like this:

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

The use of closure allows 'request' to be accessible within the onreadystatechange function. The method 'callback' is passed as an argument in ajaxFunction.

Tips for successfully retrieving a variable from a function triggered by onreadystatechange=function()

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Looking to deactivate a particular checkbox in a chosen mode while expanding the tree branches

"Step-by-step guide on associating JSON data with <li> elements using AngularJS

What is the best approach to updating multiple rows instead of just the first row using the update button located on both sides using PHP and AJAX?

What is the method for setting and comparing collectionsjs equality?

The Body Parser is having trouble reading information from the form

Utilize CountUp.js to generate a dynamic timer for tracking days and hours

Avoiding Vue Select from automatically highlighting the initial option: tips and tricks

Ways to ensure text fits nicely within a container: HTML & CSS

Modify a field within MongoDB and seamlessly update the user interface without requiring a page refresh

Troubleshooting 'Warning: Prop `id` did not match` in react-select

Challenges with window opening function while already in fullscreen view

Is OpenLayers + Ajax causing issues or errors?

Access and retrieve pkpass files from a server using React

Instructions for setting a default value for ng-options when dealing with nested JSON data in AngularJS

Tips for transferring data between two forms in separate iFrames

Tips for sending a parameter to a URL from a controller using AngularJS

Using jQuery to combine the values of text inputs and checkboxes into a single array or string

Shift the content downwards within an 'a' snippet located in the sidebar when it reaches the edge of the right border

Creating a custom design for legends in Chart.js

HeaderView in Angular Framework