Le deuxième appel sur deux xmlhttprequest ne fonctionne pas

Question

J'ai lu beaucoup de choses sur la façon d'essayer de faire deux xmlhttprequest en parallèle, mais il semble que quelque chose ne fonctionne pas vraiment.
J'ai 1 fichier php. qui comprend 2 fichiers .js. La première exécute xmlhttprequest toutes les 3 secondes.
Je veux que la seconde s'exécute à la demande, mais chaque fois que je la déclenche, elle retourne avec le statut 4 mais le responseText est toujours vide. (Le fichier PHP imprime sans poser de question, j'ai même essayé de mettre sur le fichier PHP juste window.open('1') pour voir que le fichier est appelé et ce n'est pas le cas).

Voici le premier JS:

var req1 = createXMLHttpRequest2(); 

var user_redirected = false;

function createXMLHttpRequest2() { 
var ua2; 
if(window.XMLHttpRequest) { 
    try { 
    ua2 = new XMLHttpRequest(); 
    } catch(e) { 
    ua2 = false; 
    } 
} else if(window.ActiveXObject) { 
    try { 
    ua2 = new ActiveXObject("Microsoft.XMLHTTP"); 
    } catch(e) { 
    ua2 = false; 
    } 
} 
return ua2; 
} 

function set_user_redirected_false() { 
user_redirected = false; 
} 

function get_user_redirected() { 
return user_redirected; 
} 

function handleResponse(username, game_id, isInvitation) { 
    if(req1.readyState == 4 && req1.status==200) { 
     var response = req1.responseText; 
     if (response == "true") { 
      // Ask to set the game_accepted var to 1 (user is redirected and not leaving) 
      user_redirected = true; 
      if (isInvitation == "true") { 
       window.location.href = "game.php?game_id="+game_id+"&position=2"; 
      } else { 
       window.location.href = "game.php?game_id="+game_id+"&position=1"; 
      } 
     } 
     else { 
      setTimeout(function(){sendRequest();}, 3000); 
     } 
    } 
} 

function sendRequest() { 
    user_redirected = false; 
    var username = ""; 
    var game_id = -1; 
    var isInvitation = "false"; 
    username = document.getElementById("username").value; 
    game_id = document.getElementById("game_id").value; 
    isInvitation = document.getElementById("invitation").value; 
    if (isInvitation == "true") { 
     req1.open('GET', 'check_for_inviter.php?username='+username+'&game_id='+game_id ,true); 
    } else { 
     req1.open('GET', 'check_for_opponent.php?username='+username+'&game_id='+game_id,true); 
    } 
    req1.onreadystatechange = function(){handleResponse(username, game_id, isInvitation);}; 
    req1.send(null); 
} 

Ceci est le deuxième fichier JS:

function createXMLHttpRequest() { 
    var ua; 
    if(window.XMLHttpRequest) { 
     try { 
      ua = new XMLHttpRequest(); 
     } catch(e) { 
      ua = false; 
     } 
    } else if(window.ActiveXObject) { 
     try { 
      ua = new ActiveXObject("Microsoft.XMLHTTP"); 
     } catch(e) { 
      ua = false; 
     } 
    } 
    return ua; 
} 

function delete_waiting_games(username) { 
    var req2 = createXMLHttpRequest(); 
    req2.open('GET', 'delete_waiting_games_for_username.php'); 
    req2.onreadystatechange = function(){ 
     window.open(req2.readyState+'&'+req2.responseText); 
    }; 
    req2.send(null); 
} 

Comme vous pouvez le voir, j'ouvrir une nouvelle fenêtre pour voir la réponse et l'état prêt (juste pour le test) et je reçois toujours le statut 4 et vide responseText.

Merci.

Answer 1

Utilisez setTimeout pour séparer les appels et with pour encapsuler les XMLHTTPRequest:

function xhr() 
    { 
    with(new XMLHttpRequest) 
    { 
    open("GET",{},true); 
    setRequestHeader("Foo", "Bar"); 
    send(""); 
    onreadystatechange = handler; 
    } 
    } 

function handler(event) 
{ 
!!event.target && !!event.target.readyState && event.target.readyState === 4 && (console.log(event)); 
} 

setTimeout(xhr, 500); 
setTimeout(xhr, 1000);