Podstawy jQuery #3

W trzecim artykule z serii Podstaw jQuery zakończymy temat zdarzeń przeglądarki i przystąpimy do obsługi technologi AJAX.

Dynaimczna zawartość dokumentu

Biblioteka jQuery pozwala nam, jak wspomniano w poprzednich częściach, modyfikować zawartość strony. Wspomniane w drugiej części serii metody obsługi zdarzeń mają pewną wadę związaną z dynamiczną zawartością. Polega ona na tym, że zdarzenie obsługiwane jest jedynie na obiektach obecnych w dokumencie w chwili wykonania metody. Kiedy rozważamy podstawowe zapotrzebowanie na obsługę zdarzeń nie stanowi to być może problemu. Problem pojawia się, kiedy nie mamy pewności ile obiektów i w jakiej kolejności będą się pojawiać. Szczęśliwie takie problemy zostały przewidziane przez twórców biblioteki. Z pomocą przychodzą nam metody on() oraz off().

Wiązanie zdarzeń elementu z obiektem

Dotychczasowa konstrukcja obsługi zdarzeń najpierw kazała wybrać (za pomocą selektora) elementy drzewa DOM, a następnie przypisać dla zdarzenia odpowiednią (zwykle anonimową) funkcję. Jak wspomniano wyżej, aby sensownym było takie rozwiązanie, obiekty które chcieliśmy obsługiwać musiały istnieć. Metoda on() ma nieco inną charakterystykę. Można ją wywoływać dwojako.

Dwie drogi

Sposób pierwszy: wywołanie bezpośrednie

Jest to mniej interesujące zastosowanie metody. Nie poświęcimy mu wiele uwagi, gdyż jego zachowanie jest analogiczne do użycia metod takich jak click() czy resize(). Składnia (przykład zaczerpnięty z dokumentacji) jest następująca :

$( "#dataTable tbody tr" ).on( "click", function() {
	alert( $( this ).text() );
});

Przewaga tego rozwiązania w stosunku do przedstawionych w drugiej części serii polega na tym, że "click" możemy zastąpić zmienną, i reagować różnymi zdarzeniami. Parafrazując przykładowy kod, można powiedzieć:

Wszystkie obecne elementy (określone selektorem) #dataTable tbody tr na kliknięcie mają zareagować wywołaniem funkcji alert()

Sposób drugi: delegacja zadania

Drugi sposób zmienia nieco podejście do zdarzeń. Ponownie posłużę się przykładem z dokumentacji metody on():

$( "#dataTable tbody" ).on( "click", "tr", function() {
	alert( $( this ).text() );
});

Pierwsza rzuca się w oczy różnica w ilości parametrów oraz w selektorze. Efekt końcowy takiej metody będzie nieco inny niż w pierwszym przypadku. Zakładając, że kod przedstawiony powyżej uruchomimy zaraz po wczytaniu dokumentu, każdy element tr podległy pod #dataTable tbody zareaguje na zdarzenie click alertem. Dotyczy to również elementów dodanych do dokumentu po wywołaniu on(). Zasadę działania tej metody dobrze przedstawia sformułowanie:

Do wszystkich elementów #dataTable tbody: jeżeli którekolwiek z twoich dzieci (elementów podrzędnych) o “nazwie” tr zostanie kliknięte - wywołaj na nim zadaną funkcję

Różnica polega na tym, że delegujemy zadanie do istniejącego obiektu - rodzica, który później podepnie obsługę do każdego ze swoich dzieci. Jeśli nie ma jasno określonego obiektu - rodzica zawsze możemy posłużyć się znaną nam już z poprzednich części referencją document.

$(document).on("zdarzenie", "selektor_nawet_nieobecnego_elementu", function(){
	// reakcja na "zdarzenie"
});

Lista zdarzeń jest oczywiście dostępna w dokumentacji jQuery.

Metoda off()

Nie rozwijając zbędnie tematu: umiemy powiązać obiekt ze zdarzeniem. Przewidujemy zapewne możliwość zaistnienia sytuacji, w której zechcemy odwołać nasze poprzednie powiązania. Właśnie taki cel realizuje metoda off(). Jej składnia jest prosta, analogiczna do metody on()

$("selektor").off("zdarzenie", "selektor_obiektow-dzieci", funkcja);

We wspomnianej powyżej składni dopuszcza się pominięcie argumentów, co poskutkuje zignorowaniem wszystkich dotychczasowych powiązań przyczynowo-skutkowych.

Na tym zakończymy opis zdarzeń w jQuery. Mam nadzieję, że kilka przedstawionych przykładów (głównie w drugiej części serii ) pomogły zrozumieć to zagadnienie.

AJAX

AJAX - Asynchronous JavaScript and XML czyli asynchroniczny JavaScript i XML to technika zaimplementowana również w jQuery, która pozwala na wysyłanie zapytań do serwerów bez przeładowania strony. Nawet nieświadomie, każdy z czytelników miał do czynienia z jej wykorzystaniem. Dobrym przykładem są wyszukiwarki, które w trakcie wpisywania podpowiadają zapytania. Technika ta ma również zastosowanie na moim portfolio. Kilka korzyści płynących z zastosowania AJAX:

Tworzenie stron jedno-dokumentowych
Zwiększenie dynamiki interakcji z użytkownikiem
Optymalizacja ruchu sieciowego i obciążenia serwera

Rozważmy następujący przykład. Stwórzmy nowy projekt zgodnie z instrukcją zawartą w pierwszej części Podstaw jQuery. Dodatkowo, utwórz pliki zrodlo1.html i zrodlo2.txt (w pierwszym zamieszczamy dowolną treść html, w drugim dowolną treść tekstową). Posłużą nam jako źródła dynamicznej zawartości.

index.html

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Strona główna</title>
    <link rel="stylesheet" href="styl.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="skrypty.js"></script>
  </head>
  <body>
    <h1>Dynamiczna strona</h1>
	
	<ul>
		<li><a href="#" id="pierwsza">Pierwsza strona</a></li>
		<li><a href="#" id="druga">Druga strona</a></li>
	</ul>

    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
	
	<div id="status">Wczytano</div>
  </body>
</html>

styl.css

html, body{
    margin:0px;
    padding:0px;
    background:#000;
    color:#FFF;
	font-family:verdana;
}
body > ul{
	display:inline;
}
body > ul > li{
	padding: 10px;
	float:left;
	list-style-type:none;
}
li > a{
	color:#00cdff;
}
p{
	padding:30px 5px;
}

skrypty.js

$(function(){
	$("body > ul").on("click", "a", function(e){
	
		$("#status").text("Wczytywanie...");		// ustawienie tekstu pola #status
		e.preventDefault(); 						// powstrzymujemy wykonanie domyślnego zadania <a> czyli przekierowania
		var id = $(this).attr("id");				// do zmiennej id przechwytujemy identyfikator tego <a>, w które kliknięto
		
		if( id == "pierwsza"){
			$.get("zrodlo1.html", function(dane){  	// wykonaj zapytanie GET o zasób zrodlo1.html
				$("p").html(dane);
			});
		}
		
		else if( id == "druga" ){
			$.ajax({								// wykonaj zapytanie ajax według parametrów:
				type: "GET",						// Typ - HTTP GET
				url: "zrodlo2.txt"					// Zasób - zrodlo2.txt
			}).done(function( dane ) {				// gdy zapytanie zostanie zakończone powodzeniem wykonaj funkcję:
				$("p").text(dane);
			});
		}
	});
	
	$( document ).ajaxComplete(function() {			// obsługa zdarzenia "wykonano zapytanie ajax"
		$("#status").text("Wczytano");
	});
		
});

Działający kod znaleźć można pod tym adresem. Zasada działania jest intuicyjna, więc nie będziemy jej opisywać. Skupmy się na wykorzystaniu metod AJAX. Przykład przedstawia dwa sposoby wywołania metod AJAX. Jest ich więcej, kolejne jednak przedstawimy w następnych częściach serii.

Metoda get()

Pierwsza z wykorzystanych metod ma bardzo prostą składnię. Wykonuje ona zapytanie HTTP GET do lokalnego serwera (jeśli uruchamiasz kod bezpośrednio z dysku - do systemu plików) o zasób o nazwie zrodlo1.html. Drugi argument dla get() to funkcja, która wykonywana jest kiedy zapytanie kończy się powodzeniem. Jej argument to, jak łatwo się domyślić, zmienna przechowująca treść zasobu, o który pytaliśmy.

Metoda ajax()

Jest to metoda bardziej ogólna. Argumenty użyte dla tej metody w powyższym przykładzie powodują, że zachowa się ona dokładnie tak samo jak jej poprzedniczka. Wachlarz ustawień, które można dostarczyć metodzie jest zbyt duży, by omówić go w tym artykule, zatem zainteresowanych odsyłam do dokumentacji. Tłumacząc jedynie w podstawowym zakresie, pośród ustawień wskazujemy między innymi: zasób, typ zapytania czy dane wejściowe do zasobu (data por. dokumentacja).

Metoda post()

Nie użyta w przykładzie metoda upraszczająca wykonanie zapytania HTTP POST. Przykład zastosowania:

$.post( "test.php", { imie: "Jan", numer: 123123123 }, function(){
	// reakcja na zapytanie zakończone powodzeniem
});

W nadziei, że artykuł przybliżył zagadnienia delegacji zdarzeń i obsługi AJAX zapraszam na kolejną część, która ukaże się niebawem.

Przydatne linki:

Aktualizacja

Zapraszam do kolejnego artykułu z serii