JavaScript（普通的，没有jQuery）-带有*synchronous*AJAX（XMLHttpRequest）调用的函数的行为与异步相同？

Question

我有一个文件，tst.html，内容如下：

part two

（无标记或任何其他内容，仅用于演示）

然后通过同步AJAX（XMLHttpRequest）加载所述文件：

function someFunc() {
    var str = 'part one_';

    var x = new XMLHttpRequest();
    x.open('GET', 'tst.html', false);    // "false" for synchronous
    x.onreadystatechange = function() {
        if(x.readyState === 4) {
            switch(x.status) {
                case 200:
                    str += x.responseText.trim();
                    break;

                default:
                    return '';   // Or something
                    break;
            }
        }
    }
    x.send();

    str += '_part three';

    return str;
}

调用函数：

alert(someFunc());

// Returns "part one_part two_part three"

但是如果我将AJAX调用放入它自己的函数中：

function ajaxCall() {
    var x = new XMLHttpRequest();
    x.open('GET', 'tst.html', false);
    x.onreadystatechange = function() {
        if(x.readyState === 4) {
            switch(x.status) {
                case 200:
                    return x.responseText.trim();
                    break;

                default:
                    return '';
                    break;
            }
        }
    }

    x.send();
}

function someFunc() {
    var str = 'part one';

    str += ajaxCall();

    str += 'part three';

    return str;
}

alert(someFunc());

// Returns "part one_undefined_part three"

该函数在AJAX有机会完成之前返回合并的字符串，这与其异步函数的行为相同。

我一直在寻找类似“同步AJAX函数”的东西，但没有发现任何有用的东西。

AJAX调用的最后一个用例是在一组递归函数中，进一步的处理依赖于AJAX返回。比如：

function one(url) {
    var x = new XMLHttpRequest();
    x.open('GET', url, false);
    x.onreadystatechange = function() {
        return two(x.responseText.trim());
    }
    x.send();
}

function two(str) {
    var output;

    output += stuff;

    // ... parse through str
    // ... until match found

    if(isURL(match)) {                     // If `match` is a URL
        output += one(match);
    }else if(isFormattedString(match)) {   // if `match` is a string
        output += two(match);
    }

    output += more stuff;

    // More processing of output    

    return output;
}

var final = one(url);

在上述示例中：

>

>

可解析的字符串。

根据它是哪个函数，调用两个函数中的一个

来自one（）的回调对此也不起作用，因为我仍然需要在two（）中有一个最终的返回值。

function one(url, callback) {
    // ... AJAX stuff
    {
        callback(two(x.responseText));
    }
}

function two(str) {
    // ... same as previous

    // The following doesn't work, because then `two()` no longer has a `return`
    // ... and any other code (i.e. for !isURL cases) will still continue to execute
    if(isURL(match)) {
        one(match, function(result) {
            output += result;

            // ... more processing

            return output;
        });
    }else if(...) {
        // ... same as previous
    }

    // ... more stuffs
}

有没有办法强迫JavaScript像对待其他同步函数一样对待这个问题，在同步函数中，执行代码会停止，直到函数完成？我不清楚为什么它还没有，因为AJAX请求被明确声明为异步的。




Answer 1

问题是您的返回

return x.responseText.trim();

从处理程序返回，但不是从ajaxCall函数返回-它没有return语句，因此总是返回undefined。

Answer 2

我喜欢你提出的冗长而详细的问题（希望每个人都尽可能多地提问！），但本质上可以归结为：

function ajaxCall() {
    var x = new XMLHttpRequest();
    x.open('GET', 'tst.html', false);
    x.onreadystatechange = function() {
        if(x.readyState === 4) {
            switch(x.status) {
                case 200:
                    return x.responseText.trim();
                    break;

                default:
                    return '';
                    break;
            }
        }
    }

    x.send();
}

您的return语句是从onreadystatechange返回的，而不是您预期的ajaxCall。它与原来的不同之处在于，原来的只是串接字符串。它与将其移动到自己的功能无关。

不要使用同步ajax！了解异步函数如何工作，特别是如何从异步调用返回响应？