W kolejnej, czwartej już części serii dokończymy temat technologii AJAX. Na wstępie zaznaczam, że seria Podstawy jQuery nie pokryje całego spektrum możliwości, jakie niesie za sobą ta technologia, a jedynie wprowadza do tematu. Dzisiejszy (krótszy niż zwykle) artykuł zapozna nas z dwiema pozostałymi metodami.

getScript()

Pierwszą z metod jest getScript(). Tworząc witryny, szczególnie takie, które wymagać będą zastosowania zewnętrznych mechanizmów JavaScript, pewne możliwości będą udostępniane użytkownikowi tylko pod pewnymi warunkami. Czasami źródło skryptu będzie różne w zależności od wyboru użytkownika bądź cech jego przeglądarki. Dobrym przykładem może być np mechanizm kodu Captcha udostępniany przez Google, który pojawia się tylko kiedy użytkownik wysyła pewne dane do naszej strony. Przykładowe zastosowanie:

$.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js', function(){
	Recaptcha.create(KLUCZ_CAPTCHA, "recaptcha_content", RecaptchaOptions);
});

Jak widać w przykładzie, wewnątrz funkcji callbacku (wywoływanej jak po przednio po skutecznym wywołaniu AJAX) używamy obiektu Recaptcha, który zdefiniowano wewnątrz załadowanego skryptu.

Metoda ta jest stosowana raczej w specyficznych sytuacjach, nie będziemy szerzej przybliżać jej zastosowań. Kiedy będziesz jej potrzebować, będziesz o tym wiedzieć.

getJSON()

Znacznie częściej stosowaną metodą, którą prędzej czy później poznaje każdy webdeveloper jest getJSON. Odpowiednie jej przybliżenie wymagać będzie krótkiego wprowadzenia do JSON.

Dygresja o JSON

JSON, JavaScript Object Notation (wym. ˈdʒeɪsən) – lekki format wymiany danych komputerowych.

Wbrew swojej nazwie, JSON nie jest formatem zdefiniowanym jedynie dla języka JavaScript. Format ten pozwala przekazywać struktury danych pomiędzy aplikacjiami niezależnie od języka w jakim zostały napisane. Dziedzinę jego zastosowań i sposób wykorzystania najlepiej opisze przykład.

W grupie programistów jesteś odpowiedzialny za interfejs webowy. Tworzycie oprogramowanie umożliwiające obsługę użytkowników. Decydujecie, że najlepszym rozwiązaniem będzie stworzyć jednolity serwer usług API, który udostępni wszystkie swoje możliwości do docelowych kanałów (przeglądarka, aplikacja mobilna czy desktopowa). Pada pytanie, w jaki sposób odebrać dane takie jak tablica obiektów wygenerowana na serwerze (w języku PHP, Python czy Ruby) po stronie serwera, przez jQuery.

W takiej i podobnych sytuacjach warto zastosować JSON. Można go traktować jako ustalony standard, według którego aplikacje porozumiewają się ze sobą i przekazują sobie struktury danych.

Wracając do metody getJSON, rozważmy rozwiązanie problemu podobnego do wspomnianego w przykładzie w praktyce. Załóżmy, że wykonując zapytanie o zasób /api/?method=getUsers serwera otrzymujemy następującą strukturę JSON:

[
    {"login":"John", "rola":"Administrator"},
    {"login":"Anna", "rola":"Moderator"},
    {"login":"Peter", "rola":"Użytkownik"}
]

Dzięki zastosowaniu jQuery możemy w prosty sposób wyświetlić listę użytkowników w dowolnym miejscu naszej strony, pod dowolnymi warunkami. Przykładowy kod:

$.getJSON('/api/?method=getUsers', function(data){
	data.forEach(function(element){
		$('ul.uzytkownicy').append('<li> <strong> '+element['login']+' </strong> - '+element['rola']+'</li'>);
	});
});

Tak skonstruowany skrypt po zapytaniu serwera przejdzie przez każdy element tablicy użytkowników i do listy ul.uzytkownicy doda każdorazowo wpis zawierający login i rolę użytkownika.

Podsumowanie

Dzisiejszy artykuł (odbiegający nieco merytorycznie od ‘podstaw’ jQuery) pokazuje, że jQuery niesie za sobą bardzo duży potencjał dla webdevelopera. Wkrótce kolejny artykuł z serii Podstawy jQuery.

Jeśli masz uwagi/sugestie do artykułów zapraszam do kontaktu mailowego.

Aktualizacja

Kolejny artykuł z serii jest już dostępny.