如何爲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/>'; 

，並確保您有該ID的元素在DOM

FIDDLE