Kilka żądań Ajax w tym samym czasie

Question

Ostatnio opracowałem projekt, w którym wysyłałem wiele żądań ajaxowych na jednej stronie aspx. Wprowadziłem również zegar, gdy ta prośba ma miejsce w odstępie 5 sekund. Wszystko wydaje się działać dobrze, aż nagle odpowiedzi mieszają się. Wiem, że mogę zrobić to samo z jedną prośbą, ale zastanawiam się, dlaczego tak się dzieje. Rozejrzałem się po internecie, ale nie mogę jeszcze znaleźć rozwiązania. Teraz faktycznie zaadoptowałem ten styl kodowania, jak na przykład złożenie jednej prośby z wieloma wynikami, ale zastanawiam się i naprawdę chcę wiedzieć, jak zrobić wiele zapytań ajaxowych, których odpowiedzi nie będą mieszać. To jest mój przykładowy kod:

$(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

Jeśli potrzebujesz wnioski wydarzy w porządku, to nie powinien być za pomocą AJAX (pierwsze „a” jest dla „asynchroniczny”).

Aby rozwiązać ten problem, można wywołać request2() w wywołaniu zwrotnym, aby "powodzenie" pierwszego żądania.

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

    }); 
} 

Answer 2

To nie jest błąd JavaScript, jest pomieszany, ponieważ wywołujesz jedną stronę w tym samym czasie. Gdybyś miał dwie strony po stronie serwera dla twoich dwóch plików AJAX, byłoby dobrze. Spróbuj utworzyć dwa różne pliki aspx dla różnych methods, aby je połączyć.

Ale to nie byłaby dobra praktyka. Dlaczego nie wysłano tej metody jako parametru i nie ma warunku w pliku aspx dla różnych metod? Jeśli masz dwie (lub więcej) metody używane w tym samym czasie, po prostu wyślij oba na serwer za pomocą jednego połączenia. Zapiszesz nagłówek HTTP i opóźnienie połączenia dla twojego połączenia.

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

Jak już zostało powiedziane, nie można zagwarantować kolejności, że wyniki powrotu. Ale jeśli jest to konieczne, aby być w stanie określić tego, ty mogłaby stworzyć niepowtarzalny identyfikator dla każdego asynchronicznego żądania, które jest wykonane, następnie odpowiednio uporządkuj odpowiedzi przychodzące.

Przykład, w którym widzę, że takie rozwiązanie jest użyteczne, to wykonywanie akcji po naciśnięciu klawisza (np. Onkeyup). Robiąc coś takiego, możesz chcieć zakodować znacznik czasu, numer wersji lub podobne, abyś mógł zagwarantować jakieś zamówienie. Jeśli użytkownik próbuje wyszukać "test", możliwe, że odpowiedź autouzupełniania dla "tes" zostanie zwrócona przed odpowiedzią dla "te". Jeśli po prostu zastąpisz dane autouzupełniania, to oczywiście nie będzie to pożądane zachowanie, ponieważ możesz wyświetlać nieprawidłowe wyniki dla bieżących tokenów wyszukiwania.

Kodowanie znacznika czasu (lub unikalnego identyfikatora, licznika, numeru wersji, klucza itp.) Pozwoli ci to sprawdzić, aby sprawdzić, czy masz najbardziej aktualną odpowiedź, lub sortować wyniki według znacznika czasu, jeśli trzeba zagwarantować zamówienie, itp.

Answer 4

Poniższa funkcja akceptuje tablicę adresów URL dla żądań JSON i wywołuje wywołanie zwrotne z tablicą wyników po zakończeniu wszystkich żądań. Można go łatwo zaadaptować do użycia poza JSON.

Pomysł polega na przechowaniu przychodzących odpowiedzi w postaci tablicy po ich otrzymaniu, a następnie wywoływania wywołania zwrotnego po uzyskaniu wszystkich wyników. To podejście jest dobrym sposobem aktualizowania partii DOM i unikania licznika czasu dla każdego z nich. węzeł, który chcesz zaktualizować.

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); 
      } 
     }); 
    }); 
}