Zajęcia 5
5. jQuery i AJAX
5.1. Żądania
jQuery oferuje kilka metod przeznaczonych do obsługi żądań AJAX. W tabeli poniżej wymieniono sześć metod jQuery pozwalających na wykonywanie żądań AJAX. Pierwsze pięć to skróty metody $.ajax(), która została wymieniona jako ostatnia.
- .load() - wczytuje fragmenty HTML w elemencie - jest to najprostsza metoda przeznaczona do pobierania danych;
- $.get() - wczytuje dane za pomocą metody HTTP GET - jest używana do żądania danych z serwera;
- $.post() - wczytuje dane za pomocą metody HTTP POST - jest używana w celu wysyłania danych, które uaktualniają dane w serwerze;
- $.getJSON() - wczytuje dane JSON za pomocą żądania GET;
- $.getScript() - wczytuje i wykonuje dane JavaScript za pomocą żądania GET - metoda ta jest używana dla danych JavaScript (na przykład JSONP);
- $.ajax() - metoda wykorzystywana do wykonywania wszystkich żądań - wymienione wcześniej metody w tle używają $.ajax().
Metoda .load() operuje na dopasowanym zbiorze. Nową zawartość HTML umieszcza we wskazanych elementach.
Pozostałe metody są metodami obiektu globalnego jQuery, stąd ich nazwy zaczynają się od znaku $. Metody te jedynie żądają danych z serwera; nie używają automatycznie tych danych w celu uaktualnienia elementów znajdujących się w dopasowanym zbiorze. Dlatego też po znaku $ nie znajduje się selektor.
5.2. Wczytywanie zawartości
Przykład 5.2.1.
$('nav a').on('click', function(e) { // Użytkownik kliknął łącze.
e.preventDefault(); // Zatrzymanie wczytywania nowego łącza.
var url = this.href; // Pobranie wartości atrybutu href.
$('nav a.current').removeClass('current'); // Usunięcie klasy current.
$(this).addClass('current'); // Określenie nowego elementu jako bieżącego.
$('#container').remove(); // Usunięcie starej zawartości.
$('#content').load(url + ' #content').hide().fadeIn('slow'); // Nowa zawartość.
});
5.3. Skróty metod
Wymienione poniżej metody są metodami skrótów. Wszystkie w tle używają metody $.ajax():
- $.get(url[, dane][, wywołanie zwrotne][, typ]) - żądanie HTTP GET mające na celu pobranie danych;
- $.post(url[, dane][, wywołanie zwrotne][, typ]) - żądanie HTTP POST uaktualniające dane w serwerze;
- $.getJSON(url[, dane][, wywołanie zwrotne][, typ]) - wczytuje dane JSON za pomocą żądania GET;
- $.getScript(url[, dane][, wywołanie zwrotne]) - wczytuje i wykonuje kod JavaScript za pomocą żądania GET.
Parametry wymienione w nawiasach kwadratowych są opcjonalne.
Kilka informacji:
- $ - wskazuje, że jest to metoda obiektu jQuery;
- url - określa miejsce, skąd mają być pobrane dane;
- dane - dostarcza wszelkie informacje dodatkowe przekazywane serwerowi;
- wywołanie zwrotne - wskazuje, że funkcja powinna być wywołana, gdy zostaną zwrócone dane (może to być funkcja anonimowa lub nazwana);
- typ - wskazuje typ danych oczekiwanych z serwera.
Przykład 5.3.1.
Jako przykład proszę uruchomić z archiwum pobranego na poprzednich zajęciach plik o nazwie jq-get.html. Uwaga! Aby kod mógł działać poprawnie potrzebny jest serwer WWW, na przykład XAMPP.
$('#selector a').on('click', function(e) {
e.preventDefault();
var queryString = 'vote=' + $(e.target).attr('id');
$.get('votes.php', queryString, function(data) {
$('#selector').html(data);
});
});
5.4. Wysyłanie formularzy sieciowych
W celu wysłania danych do serwera prawdopodobnie użyjesz metody $.post(). Biblioteka jQuery oferuje także metodę .serialize() przeznaczoną do zbierania danych z formularza sieciowego.
Pobieranie danych formularza sieciowego
Działanie metody jQuery .serialize() przedstawia się następująco:
- pobranie wszystkich informacji z formularza sieciowego;
- umieszczenie tych informacji w ciągu tekstowym, który jest gotowy do wysłania do serwera;
- zakodowanie znaków, które nie mogą być używane w ciągu tekstowym zapytania.
Metoda ta wysyła jedynie dane z kontrolek formularza sieciowego oznaczonych jako prawidłowo wypełnione, co oznacza, że nie zostaną wysłane informacje:
- z kontrolek wyłączonych;
- z kontrolek, w których nie wybrano żadnej opcji;
- z przycisku wysyłającego formularz.
Przykład 5.4.1.
Jako przykład proszę uruchomić z archiwum pobranego na poprzednich zajęciach plik o nazwie jq-post.html. Uwaga! Aby kod mógł działać poprawnie potrzebny jest serwer WWW, na przykład XAMPP.
$('#register').on('submit', function(e) { // Po wysłaniu formularza sieciowego.
e.preventDefault(); // Uniemożliwienie wysłania formularza.
var details = $('#register').serialize(); // Serializacja danych formularza.
$.post('register.php', details, function(data) { // Użycie metody $.post() do wysłania danych.
$('#register').html(data); // Miejsce wyświetlenia wyniku.
});
});
5.5. Obsługa błędów
Dane JSON można wczytać za pomocą metody $.getJSON(). Istnieją także metody pomagające w przetworzeniu odpowiedzi, gdy wykonanie metody zakończy się niepowodzeniem.
Sukces i niepowodzenie
Są trzy metody, które można łączyć po $.get(), $.post(), $.getJSON() oraz $.ajax() w celu obsłużenia sukcesu lub niepowodzenia żądania:
- .done - metoda zdarzenia, która jest wywoływana, gdy wykonanie żądania zakończy się powodzeniem;
- .fail - metoda zdarzenia, która jest wywoływana, gdy wykonanie żądania zakończy się niepowodzeniem;
- .always - metoda zdarzenia, która jest wywoływana po wykonaniu żądania niezależnie od jego wyniku.
Przykład 5.5.1.
Jako przykład proszę uruchomić z archiwum pobranego na poprzednich zajęciach plik o nazwie jq-getJSON.html.
$('#exchangerates').append('<div id="rates"></div><div id="reload"></div>');
function loadRates() {
$.getJSON('data/rates.json')
.done( function(data){ // Serwer zwraca dane.
var d = new Date(); // Utworzenie obiektu daty.
var hrs = d.getHours(); // Określenie godziny.
var mins = d.getMinutes(); // Określenie minuty.
var msg = '<h2>Kursy wymiany walut</h2>'; // Początek komunikatu.
$.each(data, function(key, val) { // Dodanie poszczególnych kursów wymiany.
msg += '<div class="' + key + '">' + key + ': ' + val + '</div>';
});
msg += '<br>Ostatnia aktualizacja: ' + hrs + ':' + mins + '<br>'; // Wyświetlenie uaktualnionej godziny.
$('#rates').html(msg); // Umieszczenie na stronie kursów wymiany.
}).fail( function() { // Wystąpił błąd.
$('aside').append('Przepraszamy, nie można pobrać danych.'); // Wyświetlenie komunikatu o błędzie.
}).always( function() { // Ta metoda zawsze jest wywoływana.
var reload = '<a id="refresh" href="#">'; // Dodanie łącza odświeżającego zawartość.
reload += '<img src="img/refresh.png" alt="odśwież" /></a>';
$('#reload').html(reload); // Dodanie łącza odświeżającego zawartość.
$('#refresh').on('click', function(e) { // Dodanie procedury obsługi zdarzeń click.
e.preventDefault(); // Uniemożliwienie przejścia na nową stronę.
loadRates(); // Wywołanie funkcji loadRates().
});
});
}
loadRates(); // Wywołanie funkcji loadRates().
5.6. Kontrola technologii AJAX
Metoda $.ajax() daje większą kontrolę na żądaniami AJAX. W tle jest ona wykorzystywana w jQuery przez wszystkie metody skrótu dotyczące żądań AJAX.
Przykład 5.6.1.
Jako przykład proszę uruchomić z archiwum pobranego na poprzednich zajęciach plik o nazwie jq-ajax.html. Uwaga! Aby kod mógł działać poprawnie potrzebny jest serwer WWW, na przykład XAMPP.
$('nav a').on('click', function(e) {
e.preventDefault();
var url = this.href; // Adres URL strony do wczytania.
var $content = $('#content'); // Buforowanie wyboru.
$('nav a.current').removeClass('current'); // Uaktualnienie łączy.
$(this).addClass('current');
$('#container').remove(); // Usunięcie zawartości.
$.ajax({
type: "POST", // Wybór metody: GET lub POST.
url: url, // Ścieżka dostępu do pliku.
timeout: 2000, // Czas oczekiwania.
beforeSend: function() { // Przed wykonaniem żądania Ajax.
$content.append('<div id="load">Wczytywanie</div>'); // Wczytanie komunikatu.
},
complete: function() { // Po wykonaniu żądania Ajax.
$('#loading').remove(); // Usunięcie komunikatu.
},
success: function(data) { // Wyświetlenie zawartości.
$content.html( $(data).find('#container') ).hide().fadeIn(400);
},
fail: function() { // Wyświetlenie komunikatu o błędzie.
$('#panel').html('<div class="loading">Proszę spróbować wkrótce.</div>');
}
});
});
Zadania domowe
Zadanie 1.
Aplikację ToDo przygotowaną po zajęciach z jQuery zmodyfikuj tak, aby wczytywała dane z serwera: http://sealcode.org:8082/api/v1/resources/task oraz zapisywała do niego nowe zadania. Wykorzystaj metody AJAX dostępne w jQuery. Budowa obiektu “wysyłanego” powinna być następująca:
{
title: "some title",
is_done: true // or false ofc.
}
Przykładowy obiekt z pobranym zadaniem wygląda następująco:
{
created_context: {
timestamp: 1497265930338,
ip: "150.254.76.84",
user_id: null
}
last_modified_context: {
id: "m5qpwxuxq5",
type_name: "task"
}
body: {
title: "Some task",
is_done: false
}
}
Dla chętnych (na wynik ponad 100%) - proszę usprawnić aplikację tak, by była możliwa edycja stanu wykonania danego zadania na serwerze oraz aby można było usuwać zadania.
Zadanie 2.
Rozwiąż quiz dostepny na classmarker.com o nazwie Zajęcia 4,5 - AJAX.
Źródła
- Duckett Jon, JavaScript and JQuery: Interactive Front-End Web Development, przeł. Robert Górczyński, Helion, 2015, ISBN 978-83-283-0126-9.