Nowe metody do obsługi AJAX w jQuery 1.5

Nowa wersja jQuery wprowadza nowe metody, które pozwalają na bardziej intuicyjne zarządzanie żądaniami AJAX. Wśród nich znajdziemy zarówno rozszerzone możliwości funkcji $.ajax, jak i dodanie obiektu Deferred Object, który przechowuje status aktualnego żądania - a także pozwala łatwo łączyć metody obsługi żądania. Jak widać zmiany w obsłudze AJAX'a są dość spore - ale wiązało się z całkowitym przepisaniem tego modułu.

$.ajax - status - obsługa statusów odpowiedzi

Jedną z nowych metod obsługi żądań jest definiowanie specjalnych funkcji dla różnych kodów/statusów odpowiedzi od serwera - przykładowo dla 200, 404 i 503.

$.ajax({
   ...
   statusCode: {
      200: function(data) {
         alert('OK');
      },
      404: function(error) {
        alert('Błąd');
      }
   }
});

$.ajax - headers - obsługa wysyłanych nagłówków

Nowa właściwość headers pozwala definiować zestaw nagłówków wysyłanych do serwera. Podajemy parametr jako obiekt złożony z pary - klucza i wartości;

$.ajax({
   ...
   headers: {
      'X-EXTRA-SSL':1
   }
});

$.ajax - obsługa parsowania przychodzących wiadomości

Nowe API do AJAXu wprowadza możliwość pełnej obsługi żądania - poczynając od filtrowania i odpowiedniego przygotowania wysyłanych parametrów poprzez ich parsowanie po odebraniu żądania aż do zdefiniowania własnych parametrów odpowiedzi (po ich uprzednim przeanalizowaniu).

• prefilters - służą do filtrowania i ostatecznego definiowania parametrów żądania; wpis na stronie jQuery zawiera bardzo trafne przykłady zastosowania:
  
  • sprawdzanie czy takie samo wywołanie jest obecnie przetwarzane i w takim wypadku jest ono anulowane, a wywoływane jest nowe
    

    var currentRequests = {};
    
    $.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
       if ( options.abortOnRetry ) {
          if ( currentRequests[ options.url ] ) {
             currentRequests[ options.url ].abort();
          }
          currentRequests[ options.url ] = jqXHR;
       }
    });
    

  • zmiana adresu url żądania w przypadku, gdy kieruje poza aktualną domenę (przykładowo na adres proxy)
    

    $.ajaxPrefilter( function( options ) {
       if ( options.crossDomain ) {
          options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url );
          options.crossDomain = false;
       }
    });
    
    

• converters - czyli funkcje, które parsują odpowiedź. Istnieje możliwość przypisania konwertera do poszczególnego typu odpowiedzi (dataType); jednocześnie wprowadzono możliwość definiowania własnych typów - które są obsługiwane przez własne, zdefiniowane konwertery
  

  $.ajaxSetup({
     converters: {
        "mydatatype": function( textValue ) {
           if ( valid( textValue ) ) {
              // Some parsing logic here
              return mydatatypeValue;
           } else {
           // This will notify a parsererror for current request
              throw exceptionObject;
           }
        }
     }
  });
  
  

• transports - obiekty służące do przygotowywania odpowiedzi - najczęściej dla własnych typów odpowiedzi; wśród nich możemy definiować własne typy danych (predefiniowane to 'text', 'json', 'xml' itd.) - jednocześnie przygotowując odpowiedni obiekt do przesłania dalej - tym razem dołączony przykład przedstawia ściąganie obrazka - kod dostępny w artykule na jquery.com

Więcej na ten temat w artykule na jquery.com poświęconemu rozszerzaniu zapytań AJAX'owych w jQuery.

Deferred Object

Kolejną zmianą jest zmiana wartości zwracanej przez metodę $.ajax na obiekt o nazwie jqXHR czyli tzw. Deferred Object. Pozwala on na obsługę żądania zarówno w trakcie jego wykonywania (oczekiwania na odpowiedź) jak i już po. W tym celu możemy wykorzystać kilka metod:

• fail - w parametrze podajemy funkcję, która będzie obsługiwać żądanie zakończone błędem
  

  $.get("gate.php").fail(
      function(){ alert("błąd"); }
  );
  

• done - w parametrze podajemy funkcję, która będzie obsługiwać żądanie zakończone sukcesem
  

  $.get("gate.php").done(
      function(){ alert("sukces"); }
  );
  

• then  - w parametrze podajemy dwie funkcje - pierwsza do sukcesu, druga do błędu
  

  $.get("gate.php").then(
      function(){ alert("sukces"); },
      function(){ alert("błąd"); }
  );
  

W celu sprawdzenia aktualnego statusu żądania możemy użyć funkcji:

• isResolved - zwraca true w momencie, kiedy została wywołana funkcja resolve (czyli w momencie sukcesu lub wcześniej bezpośrednio przez program)
• isRejected - zwraca true w momencie, kiedy została wywołana funkcja reject (czyli w momencie błędu lub wcześniej bezpośrednio)

Jeżeli chcemy przedwcześnie nadać status żądaniom możemy to zrobić używając funkcji:

• resolve lub resolveWith - sukces; w celu wywołania funkcji done
• reject lub rejectWith - błąd; w celu wywołania funkcji fail