Jquery Has Deprecated Synchronous Xmlhttprequest

jQuery has deprecated synchronous XMLHTTPRequest

To avoid this warning, do not use:

async: false

in any of your $.ajax() calls. This is the only feature of XMLHttpRequest that's deprecated.

The default is async: true, so if you never use this option at all, your code should be safe if the feature is ever really removed.

However, it probably won't be -- it may be removed from the standards, but I'll bet browsers will continue to support it for many years. So if you really need synchronous AJAX for some reason, you can use async: false and just ignore the warnings. But there are good reasons why synchronous AJAX is considered poor style, so you should probably try to find a way to avoid it. And the people who wrote Flash applications probably never thought it would go away, either, but it's in the process of being phased out now.

Notice that the Fetch API that's replacing XMLHttpRequest does not even offer a synchronous option.

Deprecation Synchronous XMLHttpRequest

you just need to change

request.open('GET', 'http://www.mywebsite.com', false);

to

request.open('GET', 'http://www.mywebsite.com', true);

This will make the request operate asynchronously, meaning the code after it is sent will execute immediately instead of waiting for the request to complete. You can then use an event listener to tell the request what code to run when it's complete.

request.onreadystatechange = function () {
    if(request.readyState === XMLHttpRequest.DONE) {
        console.log("Request completed!");
    }
}

Synchronous XMLHttpRequest on the main thread is deprecated within embedded Javascript code

You need to change your code to use asynchronous Ajax requests. As the warning indicates, using synchronous requests is bad for the user experience. Also, there literally never is a reason to use synchronous Ajax requests, ever.

And that means you need to use callback functions. Compare:

function getText(path, success) {
    var req = new XMLHttpRequest();
    req.open("GET", path, true);
    req.onreadystatechange = function () {
        if (req.readyState === 4) {
            if (req.status === 200) {
                success(req.responseText);       // call a function with the received value
            } else {
                console.log("unexpected response status " + req.status);
            }
        }
    };
    req.send(null);
}

function load() {
    getText('drinks.json', function (allText) {  // pass a function to call when the request is done
        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>";
        }
    });
}

---

Related Topics