如何對XMLHttpRequest進行多次調用

Question

我是javascript新手，正在嘗試使用XMLHttpRequest發出異步http請求。 為了說明，我有以下代碼：

        function launchRequest(request, callback) {
            var xhr = new XMLHttpRequest();

            xhr.open("POST", "/api", true);
            xhr.onload = function(e) {
                callback(xhr.responseText);
            }   
            xhr.send(JSON.stringify(request));
        }

        function getAlbums(callback) {
            launchRequest({
                "command" : "getfolders"
            }, callback);
        }

        function getPhotosFromAlbum(albumId, callback) {
            launchRequest({
                "command" : "getphotos",
                "arguments" : {
                    "foldername" : albumId
                }
            }, callback);
        }

        getAlbums(function(result) {
            document.write('first callback <br/>');
        });


        getAlbums(function(result) {
            document.write('second callback <br/>');
        });

期望的行為是一次調用兩個回調函數，但是觀察到的行為是第一個函數被調用一次並且頁面停滯。

我已經讀到原因可能是xhr的重復使用，但是，如果我錯了，請糾正我，初始化會強制變量位於函數的范圍內。

Answer 1

在文檔加載后調用document.write ，整個文檔將被覆蓋，因此所有內容都消失了。

一定會在最初加載文檔后在異步函數的回調中調用document.write 。

將其更改為類似

var element = document.getElementById('result');

element.innerHTML += 'first callback <br/>';

並確保您在DOM中有一個具有該ID的元素

小提琴