Using synchronous XMLHttpRequest on the main thread is no longer recommended when working with embedded JavaScript in code

Question

Using synchronous XMLHttpRequest on the main thread is no longer recommended when working with embedded JavaScript in code

I've implemented a basic Ajax function on my website, but I'm encountering a warning in the console.

The warning states:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

What exactly does this mean and how can I prevent it?

function readTextFile(file) {
    var rawFile = new XMLHttpRequest();
    var allText = "";
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                allText = rawFile.responseText;
            }
        }
    }
    rawFile.send(null);
    return allText;
}

function load() {
    var allText = readTextFile('drinks.json');
    var mydata = JSON.parse(allText);
    var div = document.getElementById('cocktaillist');

    div.innerHTML = "";
    for (var i = 0; i < mydata.length; i++) {
        div.innerHTML = div.innerHTML + "<p class='inner' id="+i+">"+ mydata[i].name +"</p>" + "<br>";
    }
}

javascript ajax

Answer 1

Answer №1

To improve your code efficiency, consider switching to asynchronous Ajax requests instead of synchronous ones. Synchronous requests can negatively impact the user experience, so it's best to avoid them altogether.

Make sure to implement callback functions in your code for better handling. Here is a comparison:

function fetchData(url, successCallback) {
    let request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            if (request.status === 200) {
                successCallback(request.responseText);       
            } else {
                console.log("Unexpected response status: " + request.status);
            }
        }
    };
    request.send(null);
}

function initialize() {
    fetchData('data.json', function (responseData) {  
        let data = JSON.parse(responseData);
        let container = document.getElementById('datalist');
        container.innerHTML = "";
        for (let i = 0; i < data.length; i++) {
            container.innerHTML += "<p class='item' id="+i+">"+ data[i].name +"</p><br>";
        }
    });
}

Answer 2

To improve your code efficiency, consider switching to asynchronous Ajax requests instead of synchronous ones. Synchronous requests can negatively impact the user experience, so it's best to avoid them altogether.

Make sure to implement callback functions in your code for better handling. Here is a comparison:

function fetchData(url, successCallback) {
    let request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            if (request.status === 200) {
                successCallback(request.responseText);       
            } else {
                console.log("Unexpected response status: " + request.status);
            }
        }
    };
    request.send(null);
}

function initialize() {
    fetchData('data.json', function (responseData) {  
        let data = JSON.parse(responseData);
        let container = document.getElementById('datalist');
        container.innerHTML = "";
        for (let i = 0; i < data.length; i++) {
            container.innerHTML += "<p class='item' id="+i+">"+ data[i].name +"</p><br>";
        }
    });
}

Answer 3

Answer №2

The following message was observed:

It has been advised that using synchronous XMLHttpRequest on the main thread is no longer recommended due to its negative impact on user experience.

This is a cautionary notice regarding the use of synchronous requests in JavaScript, as it disrupts the asynchronous behavior and hinders the user interface, particularly under poor network conditions.

To address this issue, ensure you have set the third parameter of rawFile.open() to true and have included a rawFile.onreadystatechange callback to handle responses appropriately. The rest of your code appears to be in good order.

Answer 4

The following message was observed:

It has been advised that using synchronous XMLHttpRequest on the main thread is no longer recommended due to its negative impact on user experience.

This is a cautionary notice regarding the use of synchronous requests in JavaScript, as it disrupts the asynchronous behavior and hinders the user interface, particularly under poor network conditions.

To address this issue, ensure you have set the third parameter of rawFile.open() to true and have included a rawFile.onreadystatechange callback to handle responses appropriately. The rest of your code appears to be in good order.

Using synchronous XMLHttpRequest on the main thread is no longer recommended when working with embedded JavaScript in code

Answer №1

Answer №2

Similar questions

Tips for streamlining distinct states and generalized state in UI Router

The hide() and on() methods are not compatible with Internet Explorer (IE)

Prevent the Esc key from closing panel in jQuery Mobile

JavaScript promise will return a value that is undefined

Eliminate the unnecessary code repetition in my functions using Typescript

What is the best way to apply margins to a nested div element in relation to its parent div element using CSS?

Looking for assistance with transferring a JavaScript array to my PHP script

Is there a built-in event in Jquery UI tabs for when the tabs are collapsed?

Create a leaflet rectangle using coordinates derived from user mouse actions

What is the method for setting a variable to an object property's value?

The Firefox extension is in need of Google Chrome for compatibility

Does Angular perform tree shaking on a service that is provided at the root level, as long as it is not explicitly injected into a component instance?

Order objects in a JavaScript array

Is there a way for me to automatically close the navbar by clicking anywhere on the body of

Unable to retrieve a response, the operation `users.findOne()` has exceeded the buffering time limit of 10000ms

Make sure to always select the alternative option in ajax

Is it possible to fulfill a promise within an if statement?

Jesting around with mocking console.error leads to test failures

Undefined output in Typescript recursion function

The click event for getelementbyid() function is malfunctioning