Zapisujemy to jako pliki index.html i tresc2.html – nazwy są oczywiście nieistotne, o ile będziemy pamiętać o nich przy odnośnikach.

Wyświetlenie tej witryny w obecnej postaci nie stanowi żadnego problemu – mamy dostępną pełną funkcjonalność. Dodatkowo strona jest lekka – nie chodzi o rozmiar mierzony w KB, ale o narzut struktury na treść – rzeczywiście póki co treść jest w mniejszości, ale jedno zdanie chyba lepiej napisać na twitterze niż tworzyć własną stronę. Gdy przybędzie treści, okaże się, że wspomniany narzut jest niewielki. Bot wyszukiwarki na pewno ucieszyłby się (gdyby potrafił) widząc taką strukturę.

Tu uwaga: HTML ma sporo znaczników, które mają swój sens – tu widzicie tego przykład. Niech elementy list służą do wyświetlania list. Paragrafy – do paragrafów, a kontenery div – do tworzenia podziału strony. Nie opierajmy wszystkiego tylko na div-ach, paragrafach bądź listach – niech się uzupełniają. Nawet, uwaga uwaga, tabelki nie są złe, jeśli używa się je do właściwych celów – prezentacji danych tabelarycznych.

OK, nasza strona działa. Jestem pewien, że żadna współczesna przeglądarka (a i starsze również) nie będzie miała problemów z jej wyświetleniem. Ale przecież nie żyjemy w epoce hateemela łupanego, tylko w web 2.0. Gdzie wrażenia użytkownika? Przecież jeśli zobaczy taką stronę, natychmiast ją zamknie. (to prawda, choć z wyjątkiem wspomnianych użytkowników urządzeń przenośnych – oni mogą być nam wdzięczni).

Chcielibyśmy, żeby odnośniki pojawiały się w postaci kart zakładek, aktywna zakładka niech ma inny kolor, a kontener content był otoczony obwódką. Miło byłoby też, żeby całość była wyśrodkowana na stronie. W kodzie HTML przemyciłem już odpowiednie oznakowanie klas i identyfikatorów, pora je ostylować:

* {
    margin: 0;
    padding: 0;
}
div#tabs {
    margin: auto;
    width: 70%;
}
ul {
    float: left;
    list-style-type: none;
}
li {
    float: left;
    padding: 10px;
    border: 1px solid black;
}
li.selected {
    background-color: grey;
}
div#content {
    clear: both;
    border: 1px solid black;
    padding: 10px;
}

Do HTMLa w sekcji HEAD dodajemy

<link href="/style.css" rel="stylesheet" type="text/css" />

Strona wyświetla się tak, jak chcieliśmy. Lista przybrała postać zakładek, aktywna zakładka jest szara. Przy odrobinie wyobraźni może to udawać zakładki. Jeśli jednak nie chcemy liczyć na odrobinę wyobraźni, popracujmy nad stylami, żeby wszystko to wyglądało jakoś sensowniej. Dla potrzeb tego przykładu, musi wystarczyć to, co jest.

Czas na bajery. Nie oczekujcie oczywiście jakichś niesłychanych rzeczy – co można zrobić z dwoma zdaniami na dwóch stronach. Ale AJAX będzie i to, w perspektywie, całkiem praktyczny.

Nie chcemy przeładowywać całej strony. Chcemy, żeby ładowanie nowej treści odbyło się w sposób niewidoczny dla użytkownika. Stracimy co prawda funkcjonalność przycisku wstecz, ale to element często poświęcany w imię AJAXowego interfejsu.
Podłączamy bibliotekę jQuery. Można to zrobić na mnóstwo sposobów – o tym poczytacie gdzie indziej (np. na youthcoders.net lub jquery.com). W tym przykładzie, prosto z katalogu strony, więc w HEAD dodajemy

Oprogramowanie zakładek

$(document).ready(function() {
	$('.link').click(function(event) {
		var href = $(this).attr("href");
		var currentLink = $(this).parent().parent().children('.selected');
		var thisLink = $(this).parent();
		$.ajax({
			url: href,
			dataType: "html",
			success: function(response) {
				currentLink.removeClass("selected");
				thisLink.addClass("selected");
				$('#content').html($('#content',response).html());
			}
		});
		event.preventDefault();
	})
});

Po kolei:

Linia 2. – definiujemy reakcję na kliknięcie na łączu w zakładce

Linia 3. – pobieramy adres odnośnika w zakładce

Linia 4. – aktualnie podświetlona zakładka – będziemy chcieli ją wygasić

Linia 5. – kliknięta zakładka – będziemy chcieli ją podświetlić

Teraz (linia 6.) wykorzystamy obiekt [Edycja lipiec 2012: tak, teraz już wiem – metodę obiektu] AJAX udostępniany przez jQuery. To co widzimy, to wywołanie jego konstuktora i przekazanie mu parametrów. Najważniejszy jest parametr success – to funkcja anonimowa, która zostanie wywołana, jeśli przeglądarka odbierze wynik zapytania wysłanego AJAXem. Ten wynik możemy obsłużyć – to właśnie parametr response tej funkcji. Nazwa jest całkiem dowolna – sami ja ustalamy, ale musimy się jej potem trzymać.

Najpierw obsługujemy zakładki – gasimy jedną i zapalamy drugą.

Następnie, w linii 12., rzecz trochę karkołomna. $(’#conent’).html(treść) spodowduje, że do kontenera content wstawiona zostanie treść – ale nie możemy przekazać tam całej otrzymanej strony – przecież zawiera ona też zakładki i całą resztę. Interesuje nas tylko zawartość takiego samego kontenera z tamtej strony. Wydobądźmy go więc. Muszę przyznać, że byłem w szoku, jak proste jest to zadanie, gdy użyjemy jQuery (jQuery często wywołuje u mnie szok, przyznaję). Funkcja $(’#conent’).html() – czyli gdy nie ma parametru – zwraca zawartość, zamiast ją ustawiać. A wskazanie, że oczekujemy zawartości z otrzymanej strony, a nie z pliku, w którym się aktualnie znajdujemy – wystarczy po przecinku za selektorem podać zmienną otrzymaną w odpowiedzi na żądanie. Ta prostota jest zaskakująca.

Ale to jeszcze nie koniec. Jeśli w tym miejscu przerwalibyśmy, wszytsko nie miałoby sensu. Kliknięcie łącza najpierw pobrałoby stronę AJAXem, a potem i tak przeładowało ją. Funkcja event.preventDefault() wyłącza typowe działanie odnośnika (uwaga na parametr event funkcji anonimowej w linii 2).

To cała istota postępującego rozszerzenia – mieliśmy łącze, które spełniało swoje zadanie. Odbieramy mu je za pomocą JavaScriptu i zastępujemy lepszą funkcjonalnością. Jest to pewne i bezpieczne, bo skoro JavaScript zdołał odebrać łączu funkcjonalność, to mamy pewność, że jest włączony i obsługiwany – może więc tę funkcjonalność zastąpić. Podobnie jest z ukrywaniem treści – jeśli chcesz, żeby jakiś kontener rozwijał się po kliknięciu – ukryj go skryptem, a nie stylem. Wtedy, jeśli uda się go ukryć, to na pewno uda się go też rozwinąć. A gdyby skrypty miały nie zadziałać, treść będzie odsłonięta.

Zapiszmy powyższy skrypt w pliku script.js i podłączmy do naszych plików HTML.

<script src="/script.js" type="text/javascript"></script>

Aplikacja (ok, to trochę za duże słowo – raczej strona) jest gotowa. Z jednej strony mamy fajne wykorzystanie AJAXa – można je rozszerzać na wiele zakładek i stron, z drugiej zapewniliśmy dostępność, a zawartość merytoryczna jest dostępna dla każdego, niezależnie od tego, jak i gdzie ogląda naszą stronę.

A teraz przyznajmy, że to co zrobiliśmy nie ma sensu. Nadal mamy 2 strony, które trzeba utrzymywać (choć maksymalnie to uprościliśmy, trzymając wspólne części – skrypt i style – w osobnych plikach), nadal przez sieć podróżuje cała strona, a nie tylko potrzebny nam jej fragment. Prawdziwe cuda można zdziałać przy pomocy np. skryptów PHP – żądanie AJAX może modyfikować URL dodając jakiś parametr, który strona serwera rozpozna i w odpowiedzi wystawi tylko potrzebne dane, być może dynamiczne, aktualne itp. Jednak ten przykład ze statycznymi stronami pokazuje metodę i podejście – postępujące ulepszenie.

Podsumowanie:

• Zrób swoją stronę prosto – mało kodu, dużo sensu, pełna funkcjonalność dostępna bez skryptów, stylu etc.
• Dodaj style i skrypty w zewnętrznym pliku – łatwiej tym zarządzać, w perspektywie łatwiej zmieniać, a użytkownicy, którzy tego nie chcą, nie będą musieli ściągać dodatkowych plików.
• Niech dopiero dodane skrypty wyłączą funkcjonalność – bo wtedy mamy pewność, że potrafią ją zastąpić.

I jeszcze miejsce, gdzie można poczytać więcej o temacie, po angielsku:

http://en.wikipedia.org/wiki/Progressive_enhancement