Ajax demandes multiples en même temps

Question

récemment j'ai développé un projet où j'ai envoyé plusieurs demandes ajax à une seule page ASPX. Je mets aussi une minuterie où cette requête se passe avec un intervalle de 5 secondes. Tout semble fonctionner correctement jusqu'à ce que les réponses se mélangent soudainement. Je sais que je pourrais faire la même chose avec une seule demande, mais je me demande pourquoi cela se produit. J'ai regardé autour d'Internet, mais je ne trouve pas encore de solution. J'ai maintenant effectivement adopté ce style de codage comme faire une demande avec des résultats multiples, mais je me demande et je veux vraiment savoir comment faire plusieurs requêtes ajax si la réponse ne va pas se mélanger. Ceci est mon code exemple:

$(document).ready(function() { 
     var a = setInterval("request1()", 5000); 
     var b = setInterval("request2()", 5000); 
    }); 

function request1() { 

     $.ajax({ 
      url: 'ajaxhandler.aspx?method=method1' , 
      beforeSend: function (xhr) { 
       xhr.overrideMimeType('text/plain; charset=utf-8'); 
      }, 
      success: function (data) { 
        alert(data); 
      } 

     }); 
    } 


function request2() { 

     $.ajax({ 
      url: 'ajaxhandler.aspx?method=method2' , 
      beforeSend: function (xhr) { 
       xhr.overrideMimeType('text/plain; charset=utf-8'); 
      }, 
      success: function (data) { 
        alert(data); 
      } 

     }); 
    } 

Answer 1

Si vous avez besoin des demandes de se produire dans l'ordre, vous ne devriez pas utiliser AJAX (le premier « a » est pour « asynchrone »). Pour résoudre ce problème, vous pouvez appeler request2() dans le rappel pour le "succès" de votre première demande.

function request1() { 
    $.ajax({ 
     url: 'ajaxhandler.aspx?method=method1' , 
     beforeSend: function (xhr) { 
      xhr.overrideMimeType('text/plain; charset=utf-8'); 
     }, 
     success: function (data) { 
       request2(); 
     } 

    }); 
} 

Answer 2

Ce n'est pas une erreur JavaScript, il est foiré car vous appelez une seule page en même temps. Si vous aviez deux page côté serveur pour vos deux fichiers AJAX, alors ce serait bien. Essayez de créer deux différents fichiers aspx pour vous différents methods pour les appeler ensemble.

Mais ce ne serait pas une bonne pratique. Pourquoi n'avez pas envoyé la méthode en tant que paramètre et avez une condition dans votre fichier aspx pour différentes méthodes? Ensuite, si vous avez deux (ou plusieurs) méthodes utilisées en même temps, envoyez simplement les deux au serveur avec un seul appel. Vous allez enregistrer un en-tête HTTP et appeler le délai pour votre appel.

function requestAll() { 

     $.ajax({ 
      url: 'ajaxhandler.aspx' , 
      data: ['method1', 'method2'], 
      beforeSend: function (xhr) { 
       xhr.overrideMimeType('text/plain; charset=utf-8'); 
      }, 
      success: function (data) { 
        alert(data); 
      } 

     }); 
    } 

Answer 3

Comme cela a été dit, vous ne pouvez pas garantir l'ordre que les résultats reviennent. Mais s'il est nécessaire de pouvoir déterminer, vous pourriez peut créer un identifiant unique pour chaque requête asynchrone qui est faite, puis trier les réponses entrantes en conséquence. Un exemple où je vois qu'une telle solution est utile est l'exécution d'actions sur une frappe de touches (par exemple, onkeyup). Lorsque vous faites quelque chose comme ça, vous pouvez encoder un horodatage, un numéro de version, ou similaire, de sorte que vous pouvez garantir une sorte d'ordre. Si l'utilisateur tente de rechercher "test", il est possible que la réponse à la saisie semi-automatique pour "tes" soit renvoyée avant la réponse pour "te". Si vous remplacez simplement les données de saisie semi-automatique, ce comportement ne sera manifestement pas le comportement souhaité, car vous pourriez afficher des résultats incorrects pour les jetons de recherche en cours.

L'encodage d'un horodatage (ou ID unique, compteur, numéro de version, clé, etc.) vous permettra de vérifier que vous avez la réponse la plus à jour, ou de trier les résultats par horodatage si vous besoin de garantir la commande, etc.

Answer 4

La fonction ci-dessous acceptera un tableau d'URL pour les demandes JSON et appellera le rappel avec un tableau de résultats une fois que toutes les demandes auront été complétées. Il peut être facilement adapté à une utilisation non-JSON. L'idée est de stocker les réponses entrantes dans un tableau lorsqu'elles arrivent, puis d'invoquer le rappel une fois que tous les résultats sont entrés. Cette approche est un bon moyen de mettre à jour par lots les DOM et d'éviter d'avoir une minuterie pour chaque nœud que vous souhaitez mettre à jour.

function multi_getJSON(urls, callback) 
{ 
    // number of ajax requests to wait for 
    var count = urls.length; 

    // results of individual requests get stuffed here 
    var results = []; 

    // handle empty urls case 
    if(count === 0) 
    { 
     callback(results); 
     return; 
    } 

    urls.forEach(function(url, index) 
    { 
     $.getJSON(url, function(data) 
     { 
      results[index] = data; 
      count = count - 1; 

      // are we finished? 
      if(count === 0) 
      { 
       callback(results); 
      } 
     }); 
    }); 
}