Exploring the mechanics of an Ajax call

Question

Exploring the mechanics of an Ajax call

Feeling a little lost in the call flow of Ajax - can anyone provide some guidance?

This is my HTML:

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">Change Content</button>

My JavaScript:

var xmlhttp;

function loadXMLDoc(url, cfunc) {
    alert("4");
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    alert("5");
    xmlhttp.onreadystatechange = cfunc;
    alert("6");
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

function myFunction() {
    alert("1");
    loadXMLDoc("ajax_info.txt", function() {
        alert("2");
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert("3");
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        }
    });
}

From what I understand, the Alert box sequence should be

1 2 3 4 5 6

However, it actually appears as

1456222223

Could someone please clarify why the function is being called first? I thought the function couldn't be executed until the parameter values were ready.

javascript ajax

Answer 1

Answer №1

executeLoadXMLDoc(...) is a function that runs immediately upon being called.
The callback passed to it (which contains alert("2")) will only be executed when triggered by an event, specifically when the XMLHTTPRequest triggers onreadystatechanged.

The onreadystatechanged event can fire multiple times for various state changes, as indicated by the readyState property.

Answer 2

executeLoadXMLDoc(...) is a function that runs immediately upon being called.
The callback passed to it (which contains alert("2")) will only be executed when triggered by an event, specifically when the XMLHTTPRequest triggers onreadystatechanged.

The onreadystatechanged event can fire multiple times for various state changes, as indicated by the readyState property.

Answer 3

Answer №2

Once the initial alert is fired, the function loadXMLDoc is immediately called and passed an anonymous function containing alerts "2" and "3". It's important to note that this function isn't executed at that moment - only a reference to it is passed so that loadXMLDoc can execute it later.

That's why you initially see "1 4 5 6" as output.

xmlhttp.onreadystatechange = cfunc;

assigns the anonymous function we passed to loadXMLDoc as the onreadystatechange handler. This event is triggered multiple times during an AJAX request whenever the browser detects a change in the request state (it's worth noting that the readyState value may not change every time).

This explains why "2" is displayed multiple times.

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    alert("3");
    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}

Within the onreadystatechange handler, there's a check for the readyState being equal to 4 and the status being 200. A readyState of 4 indicates that the request has been completed, while the comparison with status == 200 verifies the success of the HTTP response.

Therefore, "3" is only displayed last because it's executed once the request is finished, meeting the conditions outlined in the if statement.

For further insights, consider reading the MDC article on making AJAX Requests.

Answer 4

Once the initial alert is fired, the function loadXMLDoc is immediately called and passed an anonymous function containing alerts "2" and "3". It's important to note that this function isn't executed at that moment - only a reference to it is passed so that loadXMLDoc can execute it later.

That's why you initially see "1 4 5 6" as output.

xmlhttp.onreadystatechange = cfunc;

assigns the anonymous function we passed to loadXMLDoc as the onreadystatechange handler. This event is triggered multiple times during an AJAX request whenever the browser detects a change in the request state (it's worth noting that the readyState value may not change every time).

This explains why "2" is displayed multiple times.

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    alert("3");
    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}

Within the onreadystatechange handler, there's a check for the readyState being equal to 4 and the status being 200. A readyState of 4 indicates that the request has been completed, while the comparison with status == 200 verifies the success of the HTTP response.

Therefore, "3" is only displayed last because it's executed once the request is finished, meeting the conditions outlined in the if statement.

For further insights, consider reading the MDC article on making AJAX Requests.

Exploring the mechanics of an Ajax call

Answer №1

Answer №2

Similar questions

ReactJS attempting to invoke a class function using a dynamically generated button

Utilizing Vue.js components and properties to invoke a function

The React application is experiencing difficulties in receiving the response data (JSON) from the Express server, despite the fact that

My code to hide the popup when clicking outside doesn't seem to be working. Can you help me figure out why?

Vue: setInterval not updating timer variable

Different approach for searching and modifying nested arrays within objects

Experiencing issues with transferring JSON response from Axios to a data object causing errors

The Material UI Select Component has the ability to transform a controlled text input into an uncontrolled one

Store the token securely in your browser's localStorage and set up interceptors

When attempting to send coordinates to the Polyline component in React Native, an error is encountered stating that NSNumber cannot be converted to

Implementing an onclick event listener in combination with an AJAX API call

Styled-components is not recognizing the prop `isActive` on a DOM element in React

When new AJAX content is loaded, Isotope container fails to properly target the new objects and instead overlaps the existing ones

Creating a collaborative storage space within a MERN project folder

Implementing event handling with .On() in Jquery following .Off()

Is it possible for a JWT generated using RS256 to be decoded on the jwt.io platform?

Rails: Unable to manipulate the value of text_field using jquery

"Troubleshooting: Inability to send emails through PHP mail script while using jQuery's

In JavaScript, the input box is set to automatically capitalize the first letter, but users have the ability

What is the best way to incorporate an npm module in a django-admin widget without the need to install node?