30/12/01
Programowanie Java 6
Copyright Marek A.
Chmielowski
1
Programowanie Java
9
Technologia AJAX
Tradycyjny przepływ danych przeglądarka –
serwer
Przepływ danych w technologi AJAX
Zalety i wady
Obiekt XMLHttpRequest
Elementy JavaScript
Aktualizacja DOM
Współpraca skrypt servlet
Przykład podpowiedzi
30/12/01
Programowanie Java 6
Copyright Marek A.
Chmielowski
2
Tradycyjny przepływ
informacji
przeglądarka - serwer
Wymiana informacji następuje w
formie całych stron www
Duża ilość informacji do przesłania
Powtarzanie sie informacji na każdej
stronie
Konieczność wysłania całej formy aby
wykryć błędne dane
wolny czas działania – model
synchroniczny
“nie-interakcyjny” model działania
użytkownik – komputer
Zalety - prostota
30/12/01
Programowanie Java 6
Copyright Marek A.
Chmielowski
3
Przeglądarka WWW -
Serwer
Sekwencja wymiany informacji
30/12/01
Programowanie Java 6
Copyright Marek A.
Chmielowski
4
Przepływ danych AJAX
Wymiana informacji w formie
wiadomości
Nie jest ładowana nowa strona
Przesyłanie małych ilości informacji
Szybkie wykrywanie błędów
Duża szybkość – zwykle model
asynchroniczny
użytkownik ma odczucie interakcyjnego
działania systemu
Wady – wymaga połączenia kilku
technik
30/12/01
Programowanie Java 6
Copyright Marek A.
Chmielowski
5
AJAX - przepływ
AJAX - asynchroniczny
30/12/01
Programowanie Java 6
Copyright Marek A.
Chmielowski
6
Obiekt XMLHttpRequest
W przeglądarce
Zadanie
Wysłać wiadomość do serwera bez
przeładowywania strony
Zapewnić zawołanie funcji “callback” w
celu przetworzenia odpowiedzi
Umożliwić przetworzenie odpowiedzi
zakodowanej w XML (Opcjonalne)
30/12/01
Programowanie Java 6
Copyright Marek A.
Chmielowski
7
Elementy JavaScript do
aktywacji połączenia AJAX
Skrypt wstawiany w dokument HTML
<script type="text/javascript">
// tworzymy obiekt komunikacyjny
var req = new XMLHttpRequest();
// ustalamy “Callback”
req.onreadystatechange = processReqChange;
// otwiermy połączenie i wysyłamy wiadomość (w url)
req.open("GET", url, true);
req.send(null);
</script>
30/12/01
Programowanie Java 6
Copyright Marek A.
Chmielowski
8
Funkcja Callback
Callback
<script type="text/javascript">
function processReqChange() {
// tylko jeśli req jest w stanie "complete"
if (req.readyState == 4) { // tylko gdy "OK"
if (req.status == 200) {
// ...Tutaj jest kod zmieniający wygląd AKTUALNEJ
strony...
} else { alert("Problem z połączeniem AJAX:\n" +
req.statusText);
}
}
}
30/12/01
Programowanie Java 6
Copyright Marek A.
Chmielowski
9
Wysyłanie wiadomości
W formie URL
JavaScript “odczytuje” wpisaną
wartość w element z
identyfikatorem "complete-field" i
“dopisuje” do adresu
var target =
document.getElementById("complete-
field");
var input = target.value;
var url = "autocomplete?
action=complete&id=" + input;
30/12/01
Programowanie Java 6
Copyright Marek A.
Chmielowski
10
Strona Serwera
URL zawiera nazwę servletu
informacja z pola formy (tego
właśnie edytowanego) jest
“dopisana do adresu”
“http://localhost/xml/checkUserName.
php?q=to+co+wpisalem”
Uwaga znak + zastępuje spacje
Wartość “q” jest zwracana przez
metodę request.getParameter(“q”);
30/12/01
Programowanie Java 6
Copyright Marek A.
Chmielowski
11
Serwer side
Po stronie serwera przetwarzamy
wiadomość AJAX tak jakby to była
zwykła forma
Wygodnie jest wysłać odpowiedź w
formacie XML
sb.append("<employee>");
sb.append("<id>" + e.getId() + "</id>");
sb.append("<firstName>" + e.getFirstName() + "</firstName>");
sb.append("<lastName>" + e.getLastName() + "</lastName>");
sb.append("</employee>");
30/12/01
Programowanie Java 6
Copyright Marek A.
Chmielowski
12
Zmienianie aktualnej
strony
DOM – Document Object Model
JavaScript może
znajdować elementy
names = document.getElementById("names");
dodawać elementy
var linkElement = document.createElement("a");
wstawiać elementy
nameCell.appendChild(linkElement);
zmieniać zawartość (zwykle tekst)
30/12/01
Programowanie Java 6
Copyright Marek A.
Chmielowski
13
Przykład – jak Google
Suggest
Sugeruje co wpisać w formę
Nie wyszukuje w sieci ale wsród
kilku imion
Nie jest zoptymalizowany na
szybkość (wolne) połączeń
internetowych
Krótki kod i można łatwo zrozumieć
30/12/01
Programowanie Java 6
Copyright Marek A.
Chmielowski
14
AJAX a Java
Technologia Ajax nie jest powiązana
tylko Java i serwerem aplikacji
Popularne są aplikacje AJAX
współpracujące z serwerem PHP
Java, servlety i rozbudowany serwer
aplikacji dają najwięcej możliwości
Ale kosztem sporej komplikacji