Javascript匿名函数不更新变量

Question

我的问题是。我有一个函数，它应该得到一个文件并返回内容，因为我的主机提供程序不允许我使用PHP。

function getStoryFromFile(file){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            return xhttp.responseText;
        }
    };
    xhttp.open("GET", file, true);
    xhttp.send();
}

然后我发现匿名函数不是这样工作的。然后我试着让它工作，让它这样做。

function getStoryFromFile(file){
    var xhttp = new XMLHttpRequest();
    var x = 'false';
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            x = 'true';
        }
    };
    xhttp.open("GET", file, true);
    xhttp.send();
    if (x == 'true'){
        return xhttp.responseText;
    }
}

但这也不起作用。所以我试了好几个小时都没用。我得到的都是"未定义"。所以，谁能给我解释一下，为什么Javascript不允许我以第二种方式返回内容，为什么Javascript的开发者让这门语言如此他妈的难以理解。谢谢你。

编辑如何让回调函数写入变量?我:

function displayPage(){
file = 'story1.html' //Not actually like this in file, it changes based on database but i simplified it
var toHTML = '';
getStoryFromFile(file,function(text){
toHTML += text + "<br>";
});
document.getElementById('div').innerHTML = toHTML;
}

匿名函数不写，即使它是全局的。这是现在的主要问题

Answer 1

不，这些都不起作用，因为它是一个异步调用(与匿名函数无关)。正确的做法是提供一个回调函数。

function getStoryFromFile(file, callback){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            callback(xhttp.responseText);
        }
    };
    xhttp.open("GET", file, true);
    xhttp.send();
}
getStoryFromFile('someFile', function(text){
    // do something with the responseText.  let's console.log it:
    console.log(text);
});