Nagłówki i metody HTTP w JavaScript – jQuery, AngularJS i Ext JS.

Omawiałem już wysyłanie nagłówków HTTP w czystym JavaScript. Dziś przyjrzymy się jak zrobić to w popularnych frameworkach. Na tapetę bierzemy wszystkm znane jQuery, popularny AngularJS oraz bardzo dobry framework Ext JS.

Dwa pierwsze frameworki są powszechnie znane. jQuery powstało w 2006 roku i jest już standardem. AngularJS to młodszy framework ale bardzo szybko zdobywa popularność.

Mniej znany ExtJS jest z nami już od ponad 8 lat. Jest bardzo rozwiniętym i dopracowanym frameworkiem. Wikipedia podaje, że ExtJS ma największą funkcjonalność ze wszystkich frameworków JavaScript.

W przykładach będę korzystał z wywołań do serwera z poprzedniego artykułu o nagłówkach HTTP.

jQuery

W bibliotece jQuery korzystamy z funkcji $.ajax. Ustawienie typu żądania i nagłówków jest proste. Wystarczy odpowiednio skonfigurować obiekt:

$.ajax({
   type: "FIRE",
   url: "http://localhost/test/JavaScript_http/index.php",
   headers: {
      'Naglowek': "Dowolny tekst",
   }
})

Parametr type to oczywiście wywoływana metoda HTTP. Tutaj wywołujemy wymyśloną metodę FIRE. Z kolei headers pozwala nam zdefiniować dowolne nagłówki.

Mamy też kilka predefiniowanych metod dla popularnych żądań. Możemy wywołać $.get() i $.post().

Wywołanie $.ajax zwraca nam obiekt jqXHR. Żeby odczytać nagłówki odpowiedzi korzystamy z jednej z metod tego obiektu. Może to być np. done() lub fail(). Każda z nich otrzymuje jako parametr tenże obiekt jqXHR, który zachowuje się prawie tak samo jak znany nam XMLHttpRequest. Nagłówki czytamy funkcjami getAllResponseHeaders() lub getResponseHeader().

$.get("index.php").done(function(data,status,jqXHR){
   console.log(jqXHR.getAllResponseHeaders());
});

Kod HTTP zwrócony przez serwer możemy pobrać funckją jqXHR.statusCode(). Równie łatwo możemy ustawić wywołania funkcji dla każdego kodu z osobna:

$.ajax("index.php",{
   type: "POST",
   statusCode: {
      404: function() {
         alert("nie ma takiego adresu!");
      },
      200: function() {
         console.log("wszystko OK");
      }
   }
});

Więcej informacji o AJAXie w jQuery znajdziemy w dokumentacji.

AngularJS

W jQuery było łatwo. W AngularJS jest równie prosto. Korzystamy z wstrzykniętego obiektu $http. Mamy do wyboru większą gamę metod:

$http.get("index.php");
$http.post("index.php",{msg:'Nasze dane do wysłania'});
$http.delete("index.php?id=1");

Podobnie dla HEAD, PUT, PATCH. Szkoda, że nie zaimplementowano OPTIONS. Aby wywołać naszą ulubioną metodę FIRE podamy obiekt z ustawieniami:

$http({
   method: "FIRE",
   url: "index.php",
   headers: {
      'Naglowek': "Dowolny tekst",
   },
   data: "dowolne dane, może być string, obiekt lub FSM ;)"
});

Odczytanie headerów jest równie łatwe. Wywołanie $http zwraca obiekt promise. Możemy w nim ustawić funkcje przyjmujące parametry odpowiedzi. Przykładowo:

$http.delete('index.php?id=1')
   .success(function(data,status,headers,config){
      alert('usunięto');
      console.log(status);

      // uwaga na funkcję headers()
      console.log(headers());
   })
   .error(function(data,status,headers,config){
    	alert('nieudane usuwanie');

    	// pobieramy pojedynczy nagłówek
    	console.log(headers('content-type'));

    });

Uwaga na parametr headers! Nasze anonimowe funkcje dostają tu kolejną funkcję. Wywołujemy ją bez parametrów aby dostać wszystkie nagłówki. Możemy też podać parametr – nazwę nagłówka, który chcemy otrzymać.

Pozostałe parametry naszych funkcji to dane otrzymane od serwera, kod odpowiedzi (200, 404 itp) oraz ostatni – konfiguracja naszego obiektu wywołującego $http. Nawet jeśli wywołaliśmy skróconą funkcję $http.get() to w ostatnim parametrze otrzymamy obiekt, który podalibyśmy do metody $http().

Korzystanie z obiektu $http jest dokładnie omówione w dokumentacji AngularJS.

Sencha Ext Js

Na koniec mniej znany ale równie ciekawy framework JavaScript. W ExtJS budujemy całe aplikacje w JavaScript praktycznie bez użycia HTML. Mamy tu dużo AJAXa więc i manipulacja nagłówkami będzie przydatna.

Wywołanie AJAXa jest bardzo podobne do poprzednich przykładów. Zmienia się tylko nazwa funkcji.

Ext.Ajax.request({
    url: 'index.php',
    method: 'FIRE',
   	headers: {
   		'Naglowek': "Dowolny tekst",
   	}
});

Ustawiamy metodę oraz zawartość nagłówków podobnie jak w AngularJS. Nawet nazwy parametrów (ale tylko tych) są identyczne.

Aby pobrać headery i informacje o odpowiedzi podajemy funkcję callback. Przyjmuje ona znany nam już bardzo dobrze obiekt XmlHttpRequest:

Ext.Ajax.request({
    url: 'index.php',
    success: function(xhr) {
      console.log(xhr.getAllResponseHeaders());
    },
    failure: function(xhr) {
      console.log(xhr.status);
    }
});

W obiekcie Ext.Ajax mamy też dużo dodatkowych metod. Możemy od razu pobierać dane JSON, binarne, sterować cacheowaniem odpowiedzi itd. Możliwości jest dużo. Warto przeczytać dokumentację wywołań AJAX w ExtJs.

Na koniec

Widzimy, że frameworki realizują wywołania w bardzo podobny sposób. Nie ma tu wielkiej filozofii – każdy mniej lub bardziej przykrywa obiekt XmlHttpRequest.

Znając obsługę headerów mam nadzieję, że nikt nie będzie tworzył serwisów RESTopodobnych. Nie będziemy w URL lub w danych wysyłać takich informacji jak daty, cache, tagi, relacje, typy danych itd. Wszystko to w porządnym REST API powinno być przesyłane w nagłówkach HTTP.