主线程上的同步 XMLHttpRequest 在嵌入式 Javascript 代码中已弃用

Question

I have scripted a simple Ajax function and embedded this to my website.

On the console I get this warning

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

What does this mean and how to avoid 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>";
    }
}

Answer 1

The message you observed:

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

Is a warning about the fact that a synchronous request defeats the asynchronous nature of JavaScript and blocks the user interface, which causes bad user experience, especially in case of bad network quality.

You should set true as third parameter of rawFile.open() and you already provided a rawFile.onreadystatechange callback in order to execute code when you have received a response, so the rest of your code is fine.

Answer 2

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>";
        }
    });
}