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