najnowsze realizacje:
Ivan Leskov
Grzegorzfirlej.pl - v2
Sloniec.com - Magdalena & Rafał Słoniec
Szymon Janicki - strona domowa
Diamond Hair Design Studio

jQuery i AJAX - miniframework - część I

W części aplikacji których stworzyłem lub aktualnie nadzoruję zaczynam wprowadzać AJAX. Rózni programiści - różne przyzwyczajenia - rózne podejścia do sprawy... rózne problemy. Nie chciałem pisać osobnej funcji dla każdego serwisu czy nawet dla każdego szablonu podstron. Dlatego potrzebowałem funkcji, która ułatwi zadanie tak bardzo jak to tylko jest możliwe.

Z pomocą jak zwykle przyszło jQuery, w oparciu o którego zaczynam budować miniframework do obsługi AJAXa. Ma on jedno zadanie - działać zawsze przy najmniejszym jak to tylko możliwe grzebaniu w bebechach serwisu.

Pierwsza z funkcji obsługuje rządania GET, czyli po ludzku zmienia zawartość DIV-ów na stronie. Oto i ona:

$(function(){
	$('a').click(function(){
		var link = $(this).attr('href');
		var target = $(this).attr('rel');
		var element = $(this);
		if (link && target) {
			$.ajax({ 
				type: "GET",
				url: link,
				data: {'ajax':1},
				timeout: 10000,
				cache: false,
				success: function(html){
					$('#'+target).html(html);
					$('#loading').hide();
				},
				beforeSend: function(){
					$('#loading').show();				
				},
				error: function(){
					$('#'+target).html('błąd pobierania danych');
					$('#loading').hide();
				}
			});
		return false;
		}
	});
});

Jak Ona działa? Funkcja wywoływana jest za każdym kliknięciem w odsyłacz. Sprawdzane są dwa parametry: href i rel. Href to rzecz oczywista - adres nowoładowanej podstrony. A po co rel? Zawiera on ID elmentu, do którego trafi wynik z AJAXa. Po co takie kombinowanie? Czasem trzeba wymieniać zawartość w różnych miejscach, nie zawsze pełną zawartość strony. Wten sposób mając jedną funkcję mogę obsłużyć cały ten ruch. Oczywiście można z niego zrezygnować, jeżeli mamy pewność, że zawsze będziemy działać na tym samym elemencie.

Co ona jeszcze potrzafi?

  • całkowicie odcinamy się od grzebania w zdarzeniach, nie podajemy onclicków itp. (to zapewnia jQuery same w sobie);
  • zmienna cache=1 wymusza pobieranie zawartości z pominięciem cache'u przeglądarki. Można oczywiście wyłączyć w zależności od potrzeby;
  • wyświetla/chowa element #loading. Można w nim umieścić informację o pobieraniu treści strony;
  • ustawienie dodatkowej zmiennej $_GET['ajax'] pozwala na oprogramowanie szablonów w ten sposób, że zgłoszenia AJAX pomijają generowanie otoczki szablonu a generują tylko widok zawartości;

Tak obkodzony serwis utrzymuje w pełni swoją funkcjonalność po wyłączeniu JavaScript. Oczywiście wtedy przeładowywane są całe podstrony ale nadal mamy dostęp do wszystkiego. I co najważniejsze - mają też wyszukiwarki internetowe.