czwartek, 7 czerwca 2012

Przerwanie zapytań AJAX

Aktualnie pracuję przy projekcie KantorOnline.pl, jednym z najważniejszych elementów serwisu jest tabela notowań kursów walut. Dane do niej są aktualizowane ze sporą częstotliwością, a zapytania temu towarzyszące nie zawsze wykonywane dostatecznie szybko, powoduje to pewien interesujący problem: podczas próby przejścia pod inny adres, przeglądarka stara się najpierw uporać ze wszystkimi niedokończonymi zapytaniami, mam tutaj na myśli głównie AJAX. Solucja na szczęście nie jest zbyt wymagająca.


Na początek należy zadeklarować dwie zmienne, w request -domyślnie pustej tablicy- będą przechowywane referencje do obiektów XHR, a w flag -domyślnie o wartości true- wskazówka czy kolejne zapytania maja być wykonywane.
var
    request    = [],
    flag    = true;
Zapytania będą wykonywane jeśli flaga będzie miała wartość true, a ich obiekty dodawane do do tablicy. Po wykonaniu zapytania obiekt zostanie usunięty z request.
if( flag === true )
    {
    var id = Math.random().toString( 36 );
    request[ id ] = new XMLHttpRequest();
    request[ id ].open( 'GET', 'test.txt', true ); 
    request[ id ].onload = function()
        {
       
        delete request[ id ];
       
        }; 
    request[ id ].send( null );
    }
Jeśli użytkownik będzie chciał zmienić adres, przez zamknięciem strony flag zostanie ustawione na false, a we wszystkich nieusuniętych obiektach (niezakończonych zapytanich) zostanie wykonana metoda abort, kończące je.
window.onbeforeunload = function( e )
    {
       
    flag = false;
    for( var id in request )
        {
        if( request.hasOwnProperty( id ) )
            {
            request[ id ].abort();
            }
        }
   
    };
Przygotowałem test do pobrania, musicie jednak jeszcze stworzyć i wypełnić plik test.txt zawartością, dostatecznie dużą aby zapytanie nie kończyło się zbyt szybko.