Ćwiczenie 12 - Ajax
AJAX (Asynchronous JavaScript and XML) nie jest odrębną technologią, lecz zbiorem technik programistycznych do tworzenia stron internetowych, umożliwiających interakcję użytkownika z serwerem bez przeładowywania całego dokumentu, w sposób asynchroniczny. W tradycyjnym modelu programowania, każde żądanie nowych danych wiązało się z ponownym przesłaniem całej strony HTML.
Technologiami, które są wykorzystywane przez AJAX są:
XHTML oraz CSS,
DOM,
JavaScript,
XML oraz XSLT,
klasa XMLHttpRequest.
Obiekt XMLHttpRequest
Podstawowym zadaniem obiektu XMLHttpRequest jest umożliwienie wykorzystywania samego HTML oraz skryptu JavaScript do bezpośredniego połączenia się z warstwą danych przechowywaną na serwerze. Dzięki asynchroniczności w trakcie pobierania danych użytkownik może wykonywać inne czynności, można także pobierać dane jednocześnie z wielu miejsc.
http://xml.wjednymmiejscu.pl/Artykul/149382000000,kurs_-_tutorial_-_ajax__asynchronous_javascript_and_xml
Biblioteka jQuery zawiera przyjazny interfejs wykorzystywania mechanizmów ajaksowych do tworzenia dynamicznych stron www.
http://www.bt4.pl/kursy/jquery/podstawy-jquery/r7-ajax/
Przykładowe zastosowania technik AJAX
Dynamiczne menu - przydatne, gdy drzewo nawigacji posiada dużą liczbę liści. Elementy żądanej gałęzi można pobrać w momencie, gdy zachodzi faktyczna potrzeba ze strony użytkownika.
Autouzupełnianie pól formularza - przewidywanie fraz tekstu w polach tekstowych mające na celu przyspieszenie procesu wpisywania tekstu. Funkcjonalność autouzupełniania zaimplementowana została m. in. w wyszukiwarkach Wikipedii oraz Google.
Autozapisywanie - automatyczne zapisywanie zawartości pola tekstowego, bez pytania o to użytkownika.
Podział na strony lub organizowanie dużej ilości wyników - gdy przez zapytanie zwracane są duże ilości danych, aplikacja wykorzystująca techniki AJAX może pomóc w ich sortowaniu, stronicowaniu oraz wyświetlaniu.
Komunikacja między użytkownikami - natychmiastowa komunikacja z innymi użytkownikami tej samej aplikacji internetowej.
Przeciąganie i upuszczanie - może być wykorzystywane w dokonywaniu zmian, które następnie zostaną przesłane do serwera w tle. Można na przykład przeciągnąć kilka elementów z obszaru aplikacji na nowe pozycje, a następnie wylogować się. Kiedy powróci się później do aplikacji, elementy te będą znajdować się w tych samych miejscach.
Walidacja formularzy rejestracyjnych - użytkownik podaje np. nowy login i przechodzi do pola z hasłem. W tym czasie skrypt łączy się z bazą, która zwraca komunikat o tym, czy dany login jest już zajęty. Ramka z loginem zostaje podświetlona, a obok pojawia się stosowny komunikat. Załóżmy teraz, że przeszukanie bazy trochę trwało - w tym czasie użytkownik wpisał swoje hasło. Działający w czasie przesyłania danych z serwera skrypt sprawdził (po stronie klienta) czy nie jest ono zbyt krótkie. To wszystko bez przeładowywania strony.
Rejestrowanie zachowań gości odwiedzających witrynę np. liczenie klikalności każdego z linków na stronie czy śledzenie kursora w celu poprawienia użyteczności witryny lub w celach marketingowych, takich jak rozmieszczenie reklam.
Zaprojektowanie wirtualnego spaceru - na zdjęciu, zaznacza się obszary, które będą hiperłączami do innych zdjęć np. przejście do drugiego pomieszczenia, do środka obiektu lub do zbliżenia jakiegoś przedmiotu - przydatne do opisywania rożnych towarów/produktów prezentowanych w sklepach internetowych.
Wyświetlanie galerii obrazków - kiedy użytkownik ogląda jeden obraz ładowany jest kolejny bez odświeżania całej strony.
Wykorzystanie komputerów odwiedzających jako botnetu wykonującego obliczenia rozproszone np. skrypt wykorzystywany do łamania haseł - maszyna każdego z użytkowników w trakcie trwania wizyty sprawdza część haseł i co jakiś czas zapisuje wyniki na serwerze - czytelnicy strony nie muszą o tym wiedzieć.
Literatura: B.W. Perry „80 sposobów na AJAX”, HELION, 2007.
Zalety stosowania technik AJAX:
Częściowe uaktualnianie strony,
Niewidoczne pobieranie danych,
Ciągłe uaktualnianie,
Jednolite interfejsy,
Prostota i bogactwo możliwości uatrakcyjnienia strony.
Wady używania technik AJAX
Przeniesienie procesu prezentacji danych na klienta częściowo uzależnia działanie aplikacji od zasobów komputera użytkownika oraz jego przeglądarki.
Zmniejszanie użyteczności aplikacji np. sprawdzanie poprawności formularza, które przerywa proces wprowadzania danych przez użytkownika, zanim ten skończy je wpisywać.
Spowolnienie strony - jeśli serwer zwraca do klienta duże zbiory danych, może się okazać, że przeglądarka będzie miała problem z ich obsługą na czas.
Zakłócenie działania przycisku wstecz w przeglądarce.
Zakłócenie działania zakładek - jeśli doda się do zakładek ekran aplikacji opartej na technikach AJAX, to może się okazać, że na liście tej znajduje się inna strona. JavaScript tworzy określony widok strony, który nie ma wiele wspólnego z oryginalnym adresem URL. Jeśli w aplikacji znajduje się na przykład dynamiczny system menu, to może się wydawać, że wystarczy usunąć część strony z menu, by była ona niedostępna, jednak w rzeczywistości wiele osób nadal może ją oglądać. Wiele stron otrzymuje w ten sposób tysiące wywołań ich starych wersji, które powodują błędy na serwerze.
Na zaliczenie zajęć:
Do swojej strony internetowej, wykorzystując Ajax, dodać 2 nowe możliwości:
a) asynchronicznego pobierania danych z bazy MySQL i prezentowania ich na stronie
b) dopisania danych do tabel istniejących w bazie MySQL lub inne zastosowanie Ajax wymienione w ćwiczeniu.
2014-05-19 T. Wiśniewska
TECHNIKI INTERNETOWE - laboratorium
INFORMATYKA III rok
studia stacjonarne I stopnia
sem. letni r. a. 2013/2014