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

Instantly display selected image

Firebase ref.on('value') will repeatedly trigger, even if no changes have occurred

Having trouble determining the total amount in my online shopping cart

The process of altering a span label's class with JavaScript

How can we bring in prop array values in React?

adjustable canvas dimensions determined by chosen images

Modifying the information depending on the option chosen from the dropdown menu using angularJS

In order to use DIV jQuery, it is necessary to have at least one input

Turning a string array into a basic array can be achieved through a few simple steps

extract keys and values from an array of objects

What steps should I take to export a function from a React functional component in order to create a reusable library?

"The issue of Django showing a 'select a valid choice' error when trying to populate a select field

Adding ngrx action class to reducer registration

Utilize conditional styling in Vue using CSS

Managing multiple sets of data in a structured form similar to an array

Having trouble with sending a JSON post request in Flask?

Dynamically load WordPress content using ajax and incorporate CSS3 animations for added visual appeal

Adjusting the size of Bootstrap alerts while ensuring the close icon remains correctly positioned

Steps to resolve the issue: The current experimental syntax 'classProperties' is not supported

What is the best way to conceal text that is not enclosed in <p> or <span> tags?