Storing retrieved data from an Ajax request into a variable

Question

Storing retrieved data from an Ajax request into a variable

Presented below is a function that utilizes Ajax:

function fetchSource(callback){
    var ajaxRequest;  
    try{
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                alert("Your browser broke!");
                return false;
            }
        }
    }   
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4 &&ajaxRequest.status==200){
            var sourceData = ajaxRequest.responseText;  
            callback(sourceData);
        }
    }
    ajaxRequest.open("POST", "takesource4.php", true);
    ajaxRequest.send(null); 
}

In addition, we have the following code snippet:

var response4;
function executeFunction() {
    fetchSource(function(sourceData){   
        response4 = sourceData;
    });
    alert(response4);
}

The above function is called using the button below:

<div id="run">
  <button id="button_run" class="button" onclick="executeFunction()">Run</button>
</div>

Upon clicking the button, instead of displaying the expected response from the Ajax request, it appears to be showing an undefined value (undefined), as evident in the line below:

alert(response4);

javascript ajax variables

Answer 1

Answer №1

My recommendation is to update the callback function within the run method like this:

let testVariable;
function run() {
    fetchSourceData4(function(data){   
        testVariable = data;
        alert(testVariable);
    });
}

Answer 2

My recommendation is to update the callback function within the run method like this:

let testVariable;
function run() {
    fetchSourceData4(function(data){   
        testVariable = data;
        alert(testVariable);
    });
}

Answer 3

Answer №2

Alert somous4 in advance of any changes made by the request callback. In this scenario, the commands block takes precedence over the request callback.

Languages like PHP on the server-side handle this automatically, eliminating the need for events there. They pause until the request is completed. This happens because the commands block shifts to become the event callback.

Answer 4

Alert somous4 in advance of any changes made by the request callback. In this scenario, the commands block takes precedence over the request callback.

Languages like PHP on the server-side handle this automatically, eliminating the need for events there. They pause until the request is completed. This happens because the commands block shifts to become the event callback.

Answer 5

Answer №3

When dealing with asynchronous code, it is important to understand that it executes concurrently. This means that your alert statement may be triggered before your callback function runs (the callback function only runs after receiving data from the server). To ensure that the alert shows the correct value, place it inside the callback like so:

var somous4;
function run() {
    ajaxtakesource4(function(sourcetest){   
        somous4 = sourcetest;
        alert(somous4);
    });
}

Edit: In response to the OP's comment, instead of focusing on return values, try the following approach:

function foo(soumous4) { // use somous4 for whatever you want... }

// Call this function foo inside the callback.
ajaxtakesource4(function(sourcetest){   
    somous4 = sourcetest;
    foo(somous4);
});

Answer 6

When dealing with asynchronous code, it is important to understand that it executes concurrently. This means that your alert statement may be triggered before your callback function runs (the callback function only runs after receiving data from the server). To ensure that the alert shows the correct value, place it inside the callback like so:

var somous4;
function run() {
    ajaxtakesource4(function(sourcetest){   
        somous4 = sourcetest;
        alert(somous4);
    });
}

Edit: In response to the OP's comment, instead of focusing on return values, try the following approach:

function foo(soumous4) { // use somous4 for whatever you want... }

// Call this function foo inside the callback.
ajaxtakesource4(function(sourcetest){   
    somous4 = sourcetest;
    foo(somous4);
});

Storing retrieved data from an Ajax request into a variable

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to automate the clicking of a button on this webpage if using .click() is not effective?

Concealing overflow in a sticky container when a fixed child element is present

Transferring JSON data through AJAX to a PHP backend

Error: It seems like Material UI has updated their export structure and now `makeStyles` is no longer available in the

filling out a form with data retrieved through an ajax request

A guide on adding two fields together in AngularJS and displaying the output in a label

Extract the value of an HTML tag and store it in a PHP variable

What are some best practices for utilizing `element.offsetParent` in HTML SVG elements?

Toggle the visibility of components based on the selected value of h:selectOneRadio

Trigger a JavaScript function upon clicking a link

The getInitialProps function in Next.js is not functioning properly in mobile browser environments

Tips for adjusting the time interval on an automatic slideshow when manual controls are in play

Using AJAX to dynamically update a div's class following a POST request

What is the best way to incorporate CSS into an AJAX request?

Enforcing Single Menu Accessibility in React: Only One Menu Open at a Time

What causes JavaScript to be unable to run functions inside other functions?

JQuery - Select element by clicking outside

Using jQuery to create an AJAX request for a basic website

Press the button to eliminate

What causes the transformation of [{"value":"tag1"} into [object Object] when it is logged?