Steven Olson ajax on java full scan.pdf

7. Znaczniki Ajax .............................................................................................................. 111

Tworzenie biblioteki znaczników

111

Biblioteki znaczników oferowane przez innych dostawców

121

Ajax i Struts ................................................................................................................. 145

Biblioteka Struts-Layout

145

Implementowanie funkcji Ajax w Struts z użyciem biblioteki DWR

157

Ajax i Struts — czego dowiedzieliśmy się w tym rozdziale?

170

Ajax i JavaServer Faces ................................................................................................ 171

Cykl życia JSF

172

Pisanie własnego komponentu JSF

172

Tworzenie własnego znacznika JSF

177

Obsługiwanie danych JSF poprzez rozszerzanie klasy HtmlInputText

185

Kod JSF wspomagający mechanizm Ajax

186

Podsumowanie

189

10.

Zestaw narzędziowy Google Web Toolkit .................................................................191

Zaczynamy pracę z GWT

191

Wyszukiwanie błędów w kodzie aplikacji

196

Rozbudowujemy aplikację — kod klienta

200

Udostępnianie usług klientowi

204

Testowanie współdziałania aplikacji ZipCodes z usługą

209

Kontrolki oferowane przez GWT

212

Skorowidz .............................................................................................................................. 217

Spis treści

ROZDZIAŁ 2.

JavaScript i Ajax

Tajemnica technologii Ajax polega na sprytnym wykorzystaniu języka JavaScript. Ajax nie jest

szkieletem programowania dla stron WWW tak jak Struts czy Tapestry i pod tym akronimem

tak naprawdę nie ukrywa się żadna nowa cudowna technologia. Sekret Ajax polega na bez-

pośrednim komunikowaniu się za pomocą języka JavaScript z serwerem stron WWW, dzięki

czemu unika się cyklu zatwierdzenie danych – odpowiedź, tak dobrze znanego wszystkim

użytkownikom stron WWW.

Programiści języka Java zazwyczaj unikają języka JavaScript. Z różnych powodów, lepszych

i gorszych. Oczywiście dodanie kolejnej warstwy skryptowej do strony JSP zwiększa tylko

zamieszanie. Niemniej kod JavaScript wykonywany jest bezpośrednio przez przeglądarkę

internetową i dlatego jest bardzo szybki. Nie ma potrzeby oczekiwania, aż serwer wygene-

ruje odpowiedź: kod JavaScript jest w stanie prawie natychmiast wygenerować wynik i od-

powiednio aktualizować stronę.

Technologia Ajax dodaje tu interakcję z serwerem, jednak bez konieczności zatwierdzania (i wy-

syłania) danych przyciskiem Submit . Kiedy potrzebne są nowe dane od serwera, strona WWW

z kodem JavaScript po prostu wysyła żądanie, a serwer odsyła z powrotem odpowiednie dane

— tym razem nie jest to jednak nowa strona w kodzie HTML. Serwer zwraca dane, które kod

JavaScript będzie mógł wyświetlić na bieżącej, już załadowanej stronie. Efekt jest taki, że na-

sza aplikacja WWW zaczyna bardziej przypominać zwykłą aplikację instalowaną na komputerze.

Mówiąc w skrócie, korzystając z technologii Ajax, możemy osiągnąć na naszych stronach

WWW poziom interaktywności zbliżony do tego znanego z profesjonalnych aplikacji insta-

lowanych na komputerze.

Celem tej książki nie jest nauczenie Czytelnika programowania w języku JavaScript ani nawet

omawianie jego wad i zalet. Zakładam tutaj, że każdy z Czytelników ma już jakieś doświad-

czenie z językiem JavaScript. Ci, dla których jest on nowością, powinni zajrzeć do książki

JavaScript. Przewodnik programisty autorstwa Davida Flanagana (wydawnictwo RM). Jest to

najlepszy obecnie dostępny przewodnik po języku JavaScript. Mimo iż język JavaScript różni

się od Javy, niemniej programiści języka Java nie powinni mieć większych problemów ze

zrozumieniem kodu JavaScript. Jak łatwo się będzie przekonać, kod JavaScript zaprezentowany

w tym rozdziale jest dość prosty. Dopóki składnia języka jest dla Czytelnika zrozumiała, nie

ma potrzeby dokładnego studiowania języka JavaScript.

Tworzenie aplikacji

Zaczniemy od przygotowania kompletnego kodu HTML i JavaScript naszej pierwszej aplikacji.

Będzie to prosta strona WWW wyświetlająca liczbę dziesiętną odpowiadającą każdemu zna-

kowi. Następnie oddzielimy kod JavaScript od kodu HTML i przyjrzymy się mu dokładnie.

Kod HTML ukazany został na listingu 2.1.

Listing 2.1. index.html

<html>

<head>

<title>Ajax on Java, Rozdział 2 przykład</title>

</head>

<h1> AJAXOWY DEKODER ZNAKÓW </h1>

<h2> Wciśnij klawisz, by poznać jego kod liczbowy. </h2>

<table>

<tr>

<td>

Tu podaj klawisz ->

<input type="text" id="key" name="key"

onkeyup="convertToDecimal( );">

</td>

</tr>

</table>

<br />

<table>

<tr>

Wciśnięty klawisz:

</td>

</tr>

<tr>

<td> Kod dziesiętnie </td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

W większości jest to standardowy kod HTML. Zawiera on tylko dwa odwołania do kodu Java-

Script: do funkcji focusIn() i convertToDecimal() . Funkcja focusIn() po prostu umieszcza

kursor od razu w odpowiednim polu służącym do wprowadzania danych, dzięki czemu

użytkownik nie musi go tam sam przesuwać myszą.

Funkcja convertToDecimal() będzie natomiast naszą bramą do świata technologii Ajax. Listing 2.2

prezentuje kod JavaScript obsługujący naszą stronę WWW, przechowywany w pliku ajax.js .

Listing 2.2. ajax.js

var req;

function convertToDecimal( ) {

var key = document.getElementById("key");

Rozdział 2. JavaScript i Ajax

var keypressed = document.getElementById("keypressed");

keypressed.value = key.value;

var url = "/ajaxdecimalcodeconverter/response?key=" + escape(key.value);

if (window.XMLHttpRequest) {

req = new XMLHttpRequest( );

}

else if (window.ActiveXObject) {

req = new ActiveXObject("Microsoft.XMLHTTP");

}

req.open("Get",url,true);

req.onreadystatechange = callback;

req.send(null);

}

function callback( ) {

if (req.readyState==4) {

if (req.status == 200) {

var decimal = document.getElementById('decimal');

decimal.value = req.responseText;

}

clear( );

}

function clear( ) {

var key = document.getElementById("key");

key.value="";

}

function focusIn( ) {

document.getElementById("key").focus( );

}

Przyjrzyjmy się funkcji convertToDecimal() , która w kodzie HTML jest naszym punktem

wejścia do tego pliku z kodem JavaScript. Najważniejszym obiektem JavaScript, którego bę-

dziemy używać, jest obiekt XMLHttpRequest . Niestety podstawowy problem z językiem Java-

Script polega na tym, że kod tego języka skryptowego nie będzie taki sam dla wszystkich

przeglądarek. W przeglądarkach Mozilla, Firefox i Safari nowy obiekt XMLHttpRequest two-

rzymy w następujący sposób:

new XMLHttpRequest();

W przeglądarce Internet Explorer natomiast musimy użyć obiektu Active X:

new ActiveXObject("Microsoft.XMLHTTP");

Ponieważ nie jesteśmy w stanie z góry przewidzieć, z jakiej przeglądarki internetowej będą

korzystać użytkownicy odwiedzający naszą stronę WWW, musimy przygotować kod, który

będzie współpracował z wszystkimi najważniejszymi przeglądarkami. Po pierwsze, musimy

ustalić, czy użytkownik korzysta z przeglądarki Internet Explorer, czy może jakiejś innej, takiej

jak na przykład Firefox czy Mozilla. Zajmuje się tym następujący fragment kodu:

if (window.XMLHttpRequest) {

req = new XMLHttpRequest( );

}

else if (window.ActiveXObject) {

req = new ActiveXObject("Microsoft.XMLHTTP");

}

Kod ten po prostu tworzy (w zależności od przeglądarki) odpowiedni obiekt req , który wy-

korzystamy do zbudowania naszej strony Ajax.

Tworzenie aplikacji

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: