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.