Ajax. Wzorce projektowe [PDF]

Zitiervorschau

---

Tytuł oryginału: Ajax Design Patterns Tłumaczenie: Tomasz Walczak ISBN: 978-83-246-5947-0 © Helion S.A. 2007 Authorized translation of the English edition of Ajax Design Patterns © 2006 Michael Mahemoff. This translation is published and sold by permission of O’Reilly Media, Inc., the owner of all rights to publish and sell the same. Polish language edition published by Helion S.A. Copyright © 2007 All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 032 231 22 19, 032 230 98 63 e-mail: [email protected] WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie?ajaxwp_ebook Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/ajaxwp.zip Printed in Poland. • Poleć książkę na Facebook.com

• Księgarnia internetowa

• Kup w wersji papierowej

• Lubię to! » Nasza społeczność

• Oceń książkę

Spis treści

Przedmowa ..................................................................................................................... 7

Część I Wprowadzenie

13

1. Wprowadzenie do Ajaksa . .......................................................................................... 15 Ajax i użyteczny internet Narodziny Ajaksa Ajaksyfikacja internetu — historia portali Programy stacjonarne w sieci — historia aplikacji biurowych Cechy aplikacji Ajax Technologie związane z Ajaksem Budowa wywołań kierowanych do serwera Trendy w technologiach związanych z Ajaksem Wnioski

15 17 18 20 22 26 27 29 33

2. Wzorcowy samouczek ..................................................................................................35 Technologie Ajaksa w okamgnieniu Ajaksyfikacja aplikacji sieciowej — jeden wzorzec naraz Projekty i kata Wnioski

35 41 54 55

3. Projektowanie w Ajaksie — zasady i wzorce .............................................................57 Pożądane cechy aplikacji Ajax Projektowanie w Ajaksie Przegląd wzorców Ajax Budowa wzorca Programy demonstracyjne wykorzystujące wzorce Ajax Wnioski

57 58 61 66 69 70

3

Część II Wzorce dla podstawowych technologii

71

4. Aplikacja Ajax . ..............................................................................................................73 Aplikacja Ajax

73

5. Manipulowanie wyglądem ..........................................................................................83 Zmiana wyglądu Zmiana układu strony

83 92

6. Zdalne wywoływanie poleceń .....................................................................................99 Usługi sieciowe Wywołania XMLHttpRequest Wywołania IFrame Strumieniowanie HTTP JavaScript na żądanie

100 105 122 127 137

7. Działania dynamiczne . .............................................................................................. 147 Działania użytkownika Planowanie

147 157

8. Technologie rozszerzone . ......................................................................................... 165 Wzbogacone wtyczki

Część III Wzorce programistyczne

165

175

9. Usługi sieciowe ............................................................................................................177 Usługi REST Usługi RPC Procedury pośredniczące Ajax Komunikaty HTML Komunikaty ze zwykłym tekstem Komunikaty XML Komunikaty JSON

177 193 198 204 209 213 219

10. Komunikacja przeglądarka-serwer ...........................................................................227 Śledzenie wywołań 227 Okresowe odświeżanie 232 Blokowanie przesyłania 239 Jawne przesyłanie 246 Zdarzenia rozproszone

Pośrednik między domenami

4

|

Spis treści

251 262

11. Zapełnianie modelu DOM . .........................................................................................271 Wyspy danych XML XSLT po stronie przeglądarki Szablony po stronie przeglądarki

271 277 283

12. Generowanie i powtórne wykorzystanie kodu . ......................................................293 Generowanie kodu po stronie serwera Komponenty działające w różnych przeglądarkach

293 300

13. Optymalizacja wydajności .........................................................................................307 Pamięć podręczna po stronie przeglądarki Pobieranie na podstawie przewidywania Wstępne szacowanie Wieloetapowe pobieranie Złożony klient

307 315 321 328 335

Część IV Wzorce funkcjonalności i użyteczności

345

14. Kontrolki . ....................................................................................................................347 Suwaki Wskaźnik postępu Drążenie danych Tabele danych Bogaty edytor tekstu Podpowiedzi Wyszukiwanie na żywo Wiersz poleceń na żywo Formularze na żywo

348 354 361 368 374 380 387 394 402

15. Architektura strony ....................................................................................................409 Przeciąganie Sprajty Okna wyskakujące Zmienna zawartość Mikroodnośniki Portlety Obszar statusu Kontrolki do aktualizacji Wirtualny obszar roboczy

409 414 420 427 436 442 448 452 457

Spis treści

|

5

16. Efekty graficzne . .........................................................................................................467 Jednosekundowe wyróżnienie Jednosekundowa zmiana Jednosekundowy ruch Wyróżnianie

467 477 484 490

17. Funkcjonalność ...........................................................................................................495 Leniwa rejestracja Bezpośrednie logowanie Przechowywanie bezpieczne ze względu na serwer Limit czasu Sygnały kontrolne Niepowtarzalne adresy URL

Część V Wzorce rozwojowe

496 509 515 521 531 538

555

18. Diagnostyka . ...............................................................................................................557 Rejestrowanie 557 Diagnozowanie 561 Sprawdzanie zawartości modelu DOM

Śledzenie przepływu danych

564 569

19. Testowanie . ................................................................................................................573 Symulowanie usług 573 Testy po stronie przeglądarki 577 Testy usług 581 Testy systemu 584

Dodatki

589

A Platformy i biblioteki Ajaksa . .................................................................................... 591 B Instalowanie przykładowego kodu ...........................................................................629 C Wzorce i języki wzorców . ......................................................................................... 631 D Literatura cytowana ...................................................................................................633 Skorowidz . ..................................................................................................................635

6

|

Spis treści

Przedmowa

Ajax. Wzorce projektowe to źródło odniesienia dla programistów, projektantów i menedżerów, którzy chcą wiedzieć, jak w praktyce używa się aplikacji Ajax. Ajax to nowa nazwa opisująca złożone aplikacje sieciowe, które przypominają programy stacjonarne, działają w standardowych przeglądarkach internetowych i nie wymagają żadnych specjalnych wtyczek. Powszechność tej technologii ma swe źródło w popularnych aplikacjach Ajax takich jak Gmail, Google Maps czy Basecamp autorstwa 37signals, a technologia ta coraz częściej wykorzystywana jest także w przedsiębiorstwach. Wzorce przedstawione w niniejszej publikacji należą do czterech kategorii. Wzorce dla podstawowych technologii przedstawiają pojedyncze technologie potrzebne do tworzenia aplikacji Ajax, takie jak obiekty XMLHttpRequest. Wzorce programistyczne pokazują techniki, które programiści wymyślają w celu ułatwienia pielęgnacji i poprawy wydajności aplikacji Ajax. Wzorce funkcjonalności i użyteczności dotyczą rodzajów interfejsu użytkownika, jakie pojawiają się w aplikacjach Ajax, a także nowych możliwości, jakie oferuje ta technologia. Wreszcie wzorce rozwojowe wyjaśniają procesy służące do monitorowania, diagnozowania i testowania aplikacji Ajax.

Kto powinien przeczytać tę książkę? Powinieneś przeczytać tę książkę, jeśli chcesz: • Dowiedzieć się, co można osiągnąć przy użyciu Ajaksa, a czego nie, a także zobaczyć, jak

używa się tej techniki w praktyce. • Szybko poznać podstawowe technologie Ajax, takie jak XMLHttpRequest, DOM i JSON. • Poznać wzorce, których programiści używają do tworzenia wysokiej jakości architektur

bazujących na Ajaksie, zwiększania wydajności oraz poprawiania użyteczności. Z powodu encyklopedycznej natury wzorców niniejsza książka powinna być zrozumiała dla osób mających różne umiejętności. Programiści, którzy chcą poznać Ajax, będą mogli zacząć od rozdziału wprowadzającego oraz podstawowych technologii. Osoby mające już pewne doświadczenie z Ajaksem prawdopodobnie najwięcej skorzystają ze wzorców programistycznych i rozwojowych. Ludzie pracujący na mniej technicznych stanowiskach mogą uzyskać szerszą perspektywę, zwracając szczególną uwagę na wzorce funkcjonalności i użyteczności oraz na praktyczne przykłady, aby zobaczyć, jakie możliwości daje Ajax.

7

Aby zrozumieć techniczne analizy oraz przykładowy kod, programiści powinni mieć pewne doświadczenie z podstawami tworzenia aplikacji sieciowych — językiem HTML, przesyłaniem formularzy, skryptami wykonywanymi po stronie serwera i tak dalej. Warto, aby Czytelnik znał także język JavaScript, ponieważ niniejsza książka nie ma uczyć tego języka, choć napisana jest z uwzględnieniem faktu, że wielu Czytelników ma tylko podstawową wiedzę na jego temat. Ajax związany jest głównie z operacjami wykonywanymi po stronie przeglądarki, dlatego materiał przedstawiany w książce nie wymaga wiedzy na temat żadnego konkretnego środowiska przetwarzania po stronie serwera. W miejscach, gdzie pojawia się kod wykonywany po stronie serwera, przykłady bazują na języku PHP i zawsze są wyjaśnione przy użyciu pojęć niezależnych od języka programowania.

Dla kogo nie jest przeznaczona ta książka? Jeśli nigdy nie tworzyłeś aplikacji sieciowych, prawdopodobnie powinieneś zapoznać się z wprowadzeniem do podstawowych zagadnień przed zagłębieniem się w zakamarki technologii Ajax i wzorce przedstawione w niniejszej książce. Tworzenie aplikacji Ajax wymaga używania szerokiego zestawu technologii, włączając w to HTML, XML, CSS, JavaScript i przetwarzanie po stronie serwera. Niniejsza książka ma pomóc zrozumieć, jak Ajax wiąże się z tymi technologiami i w jaki sposób często się je łączy, jednak jeśli chcesz szczegółowo poznać którąś z tych technologii lub szukasz źródła informacji dotyczącego specyficznych właściwości konkretnej przeglądarki, zachęcam do zapoznania się z bardziej specjalistyczną pozycją.

Przykłady Wszystkie przykłady przedstawione w tej książce — kod ćwiczeń z samouczka i przykładowy kod wzorców Ajax — można pobrać ze strony ftp://ftp.helion.pl/przyklady/ajaxwp.zip. Kod ten jest zgodny z najnowszymi wersjami przeglądarek Firefox i Internet Explorer (IE) i został przetestowany w przeglądarkach Firefox 1.5 i IE 6.01. Większość kodu wykonywanego po stronie serwera wymaga PHP 5 i była testowana w PHP 5.0.4. Kod PHP powinien działać na każdym standardowym serwerze internetowym obsługującym skrypty PHP. Do testów użyto serwera Apache 1.3.33. Program demonstracyjny Wiki wymaga bazy danych MySQL i został przetestowany na wersji 4.1.14-max. Informacje dotyczące instalacji tych platform znajdują się w dodatku B.

Specyfika przeglądarek Zgodnie z celem stosowania Ajaksa wszystkie przedstawione wzorce można zaimplementować dla każdej współczesnej, standardowej przeglądarki, a opisy dotyczą w większym stopniu ogólnej architektury i użyteczności niż specyfiki konkretnych przeglądarek. Jednak w niektórych 1

8

Warto zapewniać pełną zgodność z wszystkimi głównymi przeglądarkami (takimi jak Safari czy Opera) i oczywiście jest to zalecane w przypadku systemów produkcyjnych, jednak w przypadku poszczególnych przykładów przenośność została uznana za nieistotną, ponieważ każdy z nich ma przedstawiać konkretny element Ajaksa.

|

Przedmowa

przypadkach istotne są zagadnienia związane z przenośnością, które opisuję tam, gdzie mają kluczowe znaczenie dla implementacji wzorca (na przykład w niektórych rozdziałach części II, „Wzorce dla podstawowych technologii”). Aby możliwe było przyjęcie ogólnej perspektywy, większość analiz ogranicza się do przeglądarek IE i Firefox. Wyjaśnianie różnic między przeglądarkami i ich wersjami wychodzi poza zakres opisu wzorców, a zainteresowanym Czytelnikom polecam specjalistyczne źródła informacji.

Układ książki Część I, „Wprowadzenie” Kilka pierwszych rozdziałów stanowi wprowadzenie do wzorców. Rozdział 1., „Podstawy Ajaksa”, opisuje zjawisko o nazwie Ajax i przedstawia bieżące trendy. Rozdział 2., „Wzorcowy samouczek”, to samouczek pozwalający na szybkie rozpoczęcie pracy, a dotyczący Ajaksa i wzorców Ajax. Zagadnienia projektowe wychodzące poza wzorce Ajax omówiono w rozdziale 3., „Projektowanie w Ajaksie — zasady i wzorce”, gdzie znajduje się także wprowadzenie do samych wzorców. Część II, „Wzorce dla podstawowych technologii” Wzorce dla podstawowych technologii stanowią „cegiełki” fundamentów każdej aplikacji Ajax. Sam Ajax to wzorzec wywodzący się z pierwszego wzorca, Aplikacja Ajax (rozdział 4.), który jest podstawą wszystkich innych wzorców Ajax. Kilka następnych rozdziałów przedstawia trzy główne technologie związane z tworzeniem aplikacji Ajax. Wzorce manipulowania wyglądem (rozdział 5.) dotyczą wyświetlania interfejsu użytkownika, wzorce zdalnego wywoływania poleceń (rozdział 6.) przedstawiają kilka alternatywnych sposobów komunikowania się z serwerem. Wzorce dynamicznego działania (rozdział 7.) dotyczą zdarzeń, zarówno tych wywoływanych przez użytkownika, jak i tych bazujących na upływie czasu. W końcu rozszerzone technologie (rozdział 8.) pokazują, jak można rozbudować aplikację Ajax przy użyciu niestandardowych technologii. Część III, „Wzorce programistyczne” Wzorce programistyczne dotyczą głównie technicznej jakości oprogramowania, a zwłaszcza pielęgnacji, stabilności i wydajności. Pierwszy rozdział w tej części, rozdział 9., przedstawia kilka alternatywnych strategii projektowania usług sieciowych. Wzorce komunikacji przeglądarka-serwer (rozdział 10.), także związane ze zdalnym wywoływaniem poleceń, dotyczą przepływu informacji między przeglądarką a serwerem. Są to na przykład techniki synchronizacji. Wzorce zapełniania modelu DOM (rozdział 11.) obejmują szereg strategii służących do obsługi zapełniania modelu DOM po odebraniu odpowiedzi serwera. Generowanie i powtórne wykorzystanie kodu (rozdział 12.) obejmuje kilka ogólnych wzorców programistycznych związanych z pielęgnacją i przenośnością aplikacji. W końcu wzorce optymalizacji wydajności (rozdział 13.) dotyczą nie tylko zwiększania szybkości aktualizacji i komunikacji, ale także poprawy komfortu pracy użytkownika w obliczu nieuniknionych opóźnień. Część IV, „Wzorce funkcjonalności i użyteczności” Wzorce funkcjonalności i użyteczności dotyczą głównie użyteczności aplikacji Ajax. Rozdział 14. to wprowadzenie do szeregu kontrolek, które można dodawać do wielu interfejsów aplikacji Ajax. Wzorce architektury strony (rozdział 15.) przedstawiają szerszą perspektywę i koncentrują się na układzie strony, podziale treści i technikach udostępniania

Układ książki

|

9

danych znajdujących się po stronie serwera. Wraz ze wzrastającą popularnością Ajaksa efekty graficzne w internecie rozwijają się z szybkością niemal niespotykaną w przypadku standardowych systemów stacjonarnych, a większość popularnych efektów opisują wzorce efektów graficznych (rozdział 16.). Wzorce przedstawione w ostatnim rozdziale tej części, wzorce funkcjonalności (rozdział 17.), dotyczą nowych możliwości, jakie otwiera Ajax. Część V, „Wzorce rozwojowe” Wzorce rozwojowe nie są „rzeczami” takimi jak wzorce przedstawione w poprzednich częściach, ale „procesami”, które można stosować do ułatwiania rozwoju aplikacji. Wzorce diagnostyczne (rozdział 18.) pomagają w rozwiązywaniu błędów oraz monitorowaniu poprawności działania aplikacji Ajax. Wzorce testowania (rozdział 19.) pomagają w testowaniu aplikacji na różnych poziomach i bazują na elastycznym testowaniu aplikacji wraz z jej rozwojem. „Dodatki” W tej części znajdują się cztery dodatki. Największy z nich, dodatek A, zawiera listę platform i bibliotek związanych z Ajaksem, a wiele z nich bardzo przydaje się przy implementowaniu niektórych wzorców opisanych w niniejszej książce. Dodatek B to zbiór informacji o instalowaniu związanych z przykładowym kodem. Dodatek C przedstawia materiał książki w kontekście ogólnej teorii wzorców projektowych. W końcu dodatek D zawiera listę pozycji cytowanych w książce.

Konwencje użyte w książce Kursywa Używana w nazwach wzorców. Czcionka o stałej szerokości

Używana w przykładowym kodzie oraz fragmentach kodu. Pogrubiona czcionka o stałej szerokości

Używana w ważnych lub znaczących wierszach kodu. Pojęcie „przeglądarka” to skrót reprezentujący cały system działający po stronie przeglądarki — nie tylko program służący do przeglądania stron (na przykład Firefox), ale także działającą w nim aplikację sieciową (na przykład Google Maps). Kiedy mam na myśli program służący do przeglądania stron, zwykle używam pojęcia „przeglądarka internetowa”, zresztą przeważnie w oczywisty sposób wynika to z kontekstu. Podobnie pojęcia „serwer” lub „po stronie serwera” dotyczą wszystkich elementów działających na serwerze — systemu operacyjnego (na przykład Linux), serwera sieciowego (na przykład Apache), a także działających tam skryptów specyficznych dla aplikacji. W książce nie pojawiają się pojęcia „ECMAScript” ani „JScript” — obejmuje je termin „JavaScript”. Pojęcia „klasa” służy do opisu funkcji języka JavaScript używanych w sposób podobny do stosowania klas w systemach obiektowych. Pierwszy rysunek pojawiający się w każdym punkcie opisującym wzorzec to ilustrowany przegląd danego wzorca.

10

|

Przedmowa

Poniżej znajduje się lista akronimów często używanych w niniejszej książce: • CSS — kaskadowe arkusze stylów (ang. Cascading Style Sheets), • DHTML — dynamiczny HTML (ang. Dynamic HTML), • DOM — obiektowy model dokumentu (ang. Document Object Model), • HTML — hipertekstowy język znaczników (ang. Hypertext Markup Language), • IE — Microsoft Internet Explorer, • XML — rozszerzalny język znaczników (ang. eXtensible Markup Language).

Konwencje używane w przykładowym kodzie Diagramy projektowe bazują na notacji uniwersalnego języka modelowania (ang. Universal Modelling Language — UML), choć w większości przypadków są mniej sformalizowane. W przykładowym kodzie przyrostek .phtml reprezentuje pliki PHP, które generują kod HTML. Wszystkie pozostałe pliki PHP (na przykład moduły z logiką biznesową) mają rozszerzenie .php. Jak opisuje to rozdział 2., $() to alias dla funkcji document.getElementById(), którego stosowanie pozwala poprawić przejrzystość kodu (inspiracją była biblioteka prototypów — http://prototype.conio.net/). Ze względów przejrzystości niektóre przykłady zostały zmodyfikowane.

Podziękowania Ponieważ pisząc niniejszą książkę, udostępniałem jej pierwszą wersję w internecie, otrzymałem mnóstwo niezwykle wartościowych informacji zwrotnych i pragnę podziękować wielu osobom. W ten sposób chcę powiedzieć, że z dużym prawdopodobieństwem mogę o kimś zapomnieć! Jeśli tak się stało, proszę o przesłanie mi poprawek pocztą elektroniczną. Mój wydawca, Simon St. Laurent, zawsze szybko odpowiadał na moje pytania i uroczo radził sobie z pracą przy książce pisanej w dość niezwykły sposób. Dziękuje także korektorce, Mary Brady, za dokładną poprawę tekstu książki, a także grafikowi, Robowi Romano, dzięki któremu treść jest zrozumiała już na pierwszy rzut oka. Chcę także wyrazić uznanie dla wydawnictwa O’Reilly za podjęcie się wydania wzorców Ajax, a w szczególności za pozwolenie mi na pisanie książki w internecie oraz nieograniczone informowanie o jej treści w blogu oraz audycjach typu podcast. Książka powstała na bazie bloga dotyczącego wzorców Ajax (http://softwareas.com/ajax-pattern s), a do napisania pierwszych artykułów dotyczących wzorców zainspirowały mnie przemyślenia Thomasa Baekdala związane z zasadami użyteczności Ajaksa (http://www.baekdal.com/articles/ Usability/XMLHttpRequest-guideline s). Chcę także podziękować Brentowi Asheleyowi za analizę wzorców na pierwszej konferencji dotyczącej Ajaksa i w jego blogu, co najwyraźniej okazało się bodźcem początkującym zainteresowanie tą techniką w społeczności internetowej.

Podziękowania

|

11

Pomysły przedstawione w tej książce zawdzięczam także w dużym stopniu Jessemu-Jamesowi Garrettowi i jego przełomowemu artykułowi na temat Ajaksa, bez którego nie czytałbyś teraz niniejszej książki. Wszyscy recenzenci tej książki przesyłali mi wartościowe informacje zwrotne dotyczące wersji elektronicznej książki w czasie jej pisania, jak również przedstawili wiele szczegółowych komentarzy odnośnie szkicu niniejszej publikacji. Ci recenzenci to Cameron Shorter (ADI Limited, Mapbuilder) i Kevin Vinsen (ADI Limited), którym pracodawca, ADI Limited, zapewnił czas na dokonanie recenzji, Jep Castelein (Backbase), Daniel Czarnecki (Zoltek Consulting), Tony Hill (Thomson Corporation) i Alex Kirk (Blummy.com, WizLite.com). Ponadto chciałem gorąco podziękować członkom Software Architecture Group (SAG) z uniwersytetu Illinois w Urbana-Champaign za przeprowadzenie szeregu dyskusji na temat wzorców i publicznym udostępnieniu nagrań dźwiękowych (http://www.softwareas.com/sag-ajax-patterns-review-1). Te komentarze oczywiście miały znaczenie w czasie końcowych prac nad książką. Ralph Johnson, który kieruje tą grupą, przedstawił książkę do recenzji, a Brian Foote informował mnie o jej przebiegu. Jestem także wdzięczny wszystkim osobom, które przyczyniły się do rozwoju publicznie dostępnych części wikipedii AjaxPatterns.org i przesłały mi informacje zwrotne dotyczące dostępnego w internecie szkicu książki poprzez pocztę elektroniczną, komentarze w blogu i dyskusję w wiki. Ponieważ wzorce można wykryć w wielu istniejących aplikacjach, chcę podziękować autorom wszystkich przykładów przedstawionych przy opisie wzorców. Wielu z nich to prawdziwi pionierzy. Specjalne podziękowania należą się tym programistom, którzy wyjaśnili mi szczegóły swych projektów. Są to: Kevin Arthur (Stream), Richard Cowin i Bill Scott (OpenRico), Donovan Preston (LivePage), Jeremy Ruston (TiddlyWiki) i Tino „Crisp” Zijdel (DHTML Lemmings). Przedstawiane wzorce bazują także na wielu artykułach, analizach kodu, pomysłach, wstępnych realizacjach pomysłów i bezpośrednich wskazówkach. W szczególności, liczne wzorce pojawiły się w tej książce tylko dzięki wkładowi następujących autorów i programistów (wymienionych także w opisach poszczególnych wzorców): Juliena Couvreura, Jamesa Dama, Abe’a Fettiga (Twisted, Jotspot), Chrisa Justusa, Chrisophera Kruslicky’ego, Aleksa Russella (Dojo, Jotspot), Richarda Schwartza, Mike’a Stenhouse’a, Joela Webbera i Chrisa Were’a. Ponadto kilka serwisów informacyjnych ułatwiło mi wyszukiwanie materiałów, kiedy pojawiały się w internecie (serwisy te umożliwiły także znalezienie witryny AjaxPatterns.org innym osobom!). W tej kategorii podziękowania należą się: AjaxBlog.com Niner Niner, AjaxDeveloper.org Chrisa Cornutta (Chris obecnie współpracuje z Ajaxian.com), Dionowi Almaerowi, Benowi Galbraithowi i Robowi Sanheimowi z Ajaxian.com (uwaga: ja też dołączyłem do zespołu Ajaxian), AjaxMatters.com Shane’a Witbecka, FiftyFourEleven.com Mike’a Papageorge’a, SolutionWatch.com Briana Benzingera i Techcrunch.com Mike’a Arringtona. Na koniec, choć nie jako najmniej ważne, chciałbym wyrazić gorące podziękowania mojej rodzinie za wsparcie w czasie pisania tej książki.

12

|

Przedmowa

CZĘŚĆ I

Wprowadzenie

Kilka pierwszy rozdziałów stanowi wprowadzenie do wzorców. Rozdział 1. zawiera przegląd zjawiska o nazwie Ajax oraz opisuje bieżące trendy. Rozdział 2. to samouczek dotyczący Ajaksa oraz wzorców Ajax. Zagadnienia projektowe wykraczające poza wzorce Ajax przedstawia rozdział 3. Tam też znajduje się wprowadzenie do samych wzorców.

ROZDZIAŁ 1.

Wprowadzenie do Ajaksa

Prawdopodobnie używałeś już Ajaksa, korzystając z witryn takich jak Google Maps (http:// maps.google.com), silnika wyszukującego A9 Amazonu (http://a9.com) czy Flickr (http://flickr.com). Choć witryny te mają odmienne zadania, wszystkie w dużym stopniu bazują na Ajaksie. Ta technika umożliwia dokonanie wielkiego kroku w kierunku bogactwa zwykłych aplikacji stacjonarnych i to w sposób zgodny z ustalonymi standardami internetowymi.

Ajax i użyteczny internet Nie musisz już czekać kilku sekund na ponowne wczytanie strony internetowej po kliknięciu jakiegokolwiek jej elementu. Aplikacje Ajax działają w czasie rzeczywistym. Pozwalają przeciągać pola, zamiast zmuszać do klikania strzałek i wpisywania liczb. Przechowują aktualny stan strony, dzięki czemu nie trzeba nieustannie klikać przycisku Odśwież. Przedstawiają zrozumiałe animacje zamiast słownych komunikatów. Podstawą tych wszystkich zmian jest rosnący nacisk na użyteczność internetu1. Może znasz historię o tańczącym niedźwiedziu — wszyscy zachwycają się jego popisami, choć umiejętności niedźwiedzia raczej nie pozwolą mu dostać się do szkoły tańca2. Niedźwiedź robi duże wrażenie dlatego, że potrafi tańczyć, przy czym nie jest ważne, jak dobrze to robi. Internet na początku działał w podobny sposób. Nagle można było przeczytać informacje z drugiego końca świata, znaleźć wskazówki dotyczące skomplikowanej gry czy kupić trudno dostępną książkę. Same wartościowe możliwości, niezależnie od tego, jak łatwo lub trudno można z nich skorzystać. Użyteczność? Nie potrzebujemy żadnej zakichanej użyteczności! A oto co się wydarzyło potem: ludzie odkryli, że każdy programista wraz z psem potrafią udostępnić podstawową funkcjonalność (przy czym programista nie zawsze jest potrzebny). Z czasów gorączki rozkwitu firm typu B2B agresywnie promujących systemy aukcyjne wartości wielu milionów dolarów przypominam sobie pewnego starszego inżyniera chwalącego się, że uczestnicy jego letnich kursów utworzyli podobne mechanizmy kosztem kilku tysięcy dolarów. Dlatego, jeśli firmy na nasyconym rynku nie mogą współzawodniczyć samą funkcjonalnością, 1

Zobacz artykuł Thomasa Baekdala zatytułowany „The Usability Revolution is Over — We Won!” (http://www.baekdal.com/articles/Usability/usability-revolution/).

2

Historia o tańczącym niedźwiedziu pochodzi z książki The Inmates Are Running the Asylum (Cooper, 1999) opisującej obsesję związaną z wszystkim, co jest „fajne”, kosztem prawdziwej użyteczności. (Wydanie polskie: Wariaci rządzą domem wariatów, WNT, 2001.)

15

to czym mogą? Elementami, które są ważne dla użytkowników. Większość firm, które przetrwały i przynoszą zyski — na przykład Google, Amazon czy Yahoo! — uniknęło nadmiernego rozbudowywania funkcji i bazowało na interfejsach prostych, choć nie prymitywnych. Nieprzypadkowo wszystkie te firmy używały do tego właściwości Ajaksa. Każda z tych potężnych korporacji internetowych nie tylko używa Ajaksa, ale jako pierwszy wprowadziła niektóre z rozwiązań opisanych w tej książce. Do tej listy można dorzucić także Microsoft. Ponadto cała nowa generacji firm została zbudowana na sile prostych, intuicyjnych aplikacji. 37signals udostępnia zestaw ściśle wyspecjalizowanych aplikacji używanych codziennie przez grupę zaawansowanych użytkowników. Dzięki nowatorskiemu interfejsowi współdzielenia zdjęć Flickr w 18 miesięcy utworzył społeczność około miliona użytkowników publikujących fotografie3. Innym nowym graczem jest Odeo, menedżer audycji typu podcast, który działa jako łatwa w użyciu aplikacja internetowa, a nie jako stacjonarny program, jak większość innych aplikacji tego typu. Podobnie jak ich wielcy konkurenci, nowicjusze są wielkimi zwolennikami Ajaksa i współtworzyli techniki związane z wieloma wzorcami Ajax przedstawionymi w tej książce. Jest także wiele systemów, których ani ja, ani Ty nigdy nie zobaczymy na własne oczy — liczne aplikacje sieciowe działające w zamkniętych intranetach. Podobnie jak w przypadku firm internetowych, także i w tej kategorii pozostaje na rynku wiele tańczących niedźwiedzi. Firmy chętnie wdrażają wewnętrzne aplikacje sieciowe, ale głównie z przyczyn technicznych, takich jak łatwość instalacji, monitorowania i zdalny dostęp — a także dlatego, że „fajnie” mieć coś takiego. Użyteczność rzadko jest główną przyczyną. Wystarczy porozmawiać z użytkownikiem, który zastanawia się, gdzie podziały się wszystkie skróty klawiaturowe w „nowym, ulepszonym” interfejsie aplikacji sieciowej. Przypominam sobie pewną migrację systemu do sieci, która to zmiana zwiększyła średni czas transakcji klienta z 20 sekund do 2 minut! Reakcją było rzucenie ręcznika i powrót do aplikacji stacjonarnej. Jednak wiele firm zdecydowało się wytrwać przy internecie, akceptując jego specyfikę i używając wszelkich możliwych sztuczek, aby osiągnąć korzyści z platformy sieciowej bez związanych z nią zwykłych problemów. To właśnie ten duch doprowadził do ewolucji funkcji Ajaksa w biznesie, a popularność tej techniki wciąż napędza postęp. Choć wiele zastosowań pozostanie w ukryciu, jednym z dostępnych przykładów jest system wykonany wewnętrznie dla firmy przewozowej Sabre, który doprowadził do utworzenia biblioteki OpenRico o otwartym dostępie do kodu źródłowego (http://looksgoodworkswell.blogspot.com/2005/06/death-to-paging-rico-livegrid-released.html). Podsumowując, Ajax ma pozwalać czerpać korzyści związane z internetem bez konieczności poświęcania użyteczności. Większość użytkowników może teraz wygodnie pracować przy użyciu przeglądarki. Oznacza to, że w przypadku niektórych aplikacji dostępne są najlepsze cechy obu światów programowania: wyższa użyteczność i lepsza infrastruktura.

3

Szacunki dotyczące użytkowników witryny Flickr bazują na przewidywaniach z artykułu z czerwca 2005 roku (http://www.internetnews.com/ec-news/article.php/3512866), który szacuje grupę użytkowników witryny na 775 000 przy przyroście rzędu 30% na miesiąc, co daje ponad milion użytkowników w czerwcu lub lipcu. Firma powstała w lutym 2004 roku (http://www.asaptivepath.com/publications/essays/archives/000519.php) i szybko została przejęta przez Yahoo!.

16

|

Rozdział 1. Wprowadzenie do Ajaksa

W końcu aplikacje sieciowe przynoszą korzyści Zbyt częstym zjawiskiem ostatnich kilku lat jest branie solidnej aplikacji stacjonarnej i poświęcanie dużych ilości czasu i pieniędzy na „ulepszanie” jej do beznadziejnie bezużytecznej aplikacji sieciowej. W audycjach typu podcast Craig Shoemaker, konsultant z dziedziny oprogramowania, wspomina jedną z takich sytuacji (http://polymorphicpodcast.com/shows/architectajax/): Ajax ma dawać użytkownikom to, co mogło im zostać zabrane w wyniku przekształcenia aplikacji stacjonarnej na aplikację sieciową. Prowadziłem konsultacje dla pewnej firmy, która używała starej aplikacji Powerbuilder udostępniającej użytkownikom rozmaite usługi. Aplikacja zawierała kontrolki takie jak wielokolumnowe listy rozwijane i wszystkie elementy potrzebne do interakcji z użytkownikiem poprzez interfejs użytkownika. Co się stało? Firma przekształciła tę aplikację na aplikację sieciową, której użytkownicy nienawidzili. Wiele usług i sposobów interakcji, do których byli przyzwyczajeni, zostało usuniętych z powodu braku stanu oraz sposobu zaprojektowania aplikacji sieciowej. Dzięki zastosowaniu Ajaksa udało się przywrócić niektóre funkcje.

Narodziny Ajaksa 18 lutego 2005 roku Jesse-James Garrett opublikował w internecie artykuł „Ajax: A New Approach to Web Applications” (czyli „Ajax: nowe podejście do tworzenia aplikacji sieciowych”; http://www.adaptivepath.com/publications/essays/archives/000385.php). Aplikacje sieciowe stawały się coraz bogatsze i bardziej interaktywne, zmniejszając przepaść dzielącą je od aplikacji stacjonarnych. Garrett zaproponował nazwę „Ajax” do opisu architektury stojącej u podstaw nowej generacji złożonych aplikacji sieciowych, takich jak Google Maps czy Google Suggest. Ajax nie jest wtyczką ani technologią chronioną prawami autorskimi. Jest to styl architektoniczny — wysokopoziomowy wzorzec projektowy — składający się z wielu powiązanych technologii i pomysłów. Technologie i aplikacje Ajax były dostępne, jeszcze zanim zostały nazwane w ten sposób w artykule Garretta, ale to właśnie ten tekst okazał się punktem zwrotnym. Podobnie jak wtedy, gdy zaczęto używać pojęć „obiektowe”, „programowanie elastyczne” czy „postmodernizm”, spójnemu trendowi nadano znaczącą nazwę, wokół której mogła zacząć się kształtować społeczność. „Ajax” to nazwa systemu, który łączy szereg wydajnych technologii. Dzięki ustanowieniu tej nazwy społeczność programistów mogła nagle zacząć dzielić się pomysłami łączenia tych technologii, dyskutować w blogach o różnych podejściach projektowych, tworzyć biblioteki służące do obsługi systemów tego typu i katalogować powtarzające się wzorce. Mówiąc ściśle, samo pojęcie jest akronimem — „Ajax” pochodzi od „Asynchronous JavaScript + XML” — choć Garrett wspomina, że także inne technologie, takie jak CSS czy DOM, są równie istotne w równaniu Ajaksa. Nazwa „Ajax” jest po prostu dużo łatwiejsza do wymówienia niż „asynchroniczny JavaScript+CSS+DOM+XMLHttpRequest”. Zgodnie z oryginalnym artykułem Ajax zwykle pisze się jako „Ajax”, a nie „AJAX”. Jest to sposób myślenia, a nie kosmetyczny szczegół, ponieważ Ajax to raczej styl programowania i podejście niż precyzyjnie określony zbiór technologii. Używać można dowolnych technologii, jakie pozwolą utworzyć potrzebne rozwiązania. W książce używam pojęcia Ajax w kategoriach tego, co oferuje użytkownikom i ich firmom. Poniżej znajduje się robocza definicja: Aplikacje Ajax to bogate, reaktywne aplikacje sieciowe bazujące na standardowych technologiach internetowych. Narodziny Ajaksa

|

17

Jeśli przyjrzysz się pokazowym aplikacjom Ajax, takim jak Google Maps i Gmail, powinno stać się oczywiste, jak pasują do powyższej definicji. Programy te bazują jedynie na standardowych przeglądarkach internetowych, takich jak Internet Explorer (IE), Firefox, Safari, Opera czy kilka innych. Interfejsy są bogate, ponieważ obejmują kontrolki pobierające dane wejściowe oraz efekty graficzne, które znacznie wykraczają poza znany paradygmat przesyłania formularzy. Są także reaktywne, ponieważ zmiany zachodzą szybko i przyrostowo. Definicję trzeba tu stosować pragmatycznie — ostatnią rzeczą, jaką możesz ode mnie usłyszeć, są spory na temat tego, czy aplikacja X jest zgodna z Ajax czy nie. W dalszej części książki prześledzimy typowe cechy aplikacji Ajax, na razie jednak przyjrzyjmy się, w jaki sposób technika ta zmienia internet.

Ajaksyfikacja internetu — historia portali Jeśli wpiszesz w wyszukiwarce Google hasło „year of the portal”, znajdziesz niepodważalne dowody na to, że każdy rok po 1996 był rokiem portali. Sukces czai się tuż za rogiem, naprawdę. Ten pomysł obiecuje tak wiele — pierwszą rzeczą, jaką widzisz po otworzeniu się przeglądarki, jest spersonalizowana strona główna z napisami „Moje wiadomości”, „Moja poczta” i wieloma innymi polami dotyczącymi „Mnie”. Krótko mówiąc, strona utworzona przeze „Mnie” i dla „Mnie”. Dlaczego więc dana firma nigdy się nie rozwinęła? Jedną z podstawowych przyczyn jest to, że interfejsy większości portali są, szczerze mówiąc, nieużyteczne4. Zastanówmy się nad problemami związanymi z używaniem portali starego typu, wykorzystując jako przykład witrynę Excite.com5. Wiele innych konwencjonalnych portali działa w podobny sposób (rysunek 1.1).

Rysunek 1.1. Excite 4

Jest kilka problemów związanych z portalami, których sam Ajax nie może rozwiązać. Co najważniejsze, fakt, że serwery portali przez większość czasu nie wiedzą, co robią użytkownicy przeglądarek, sugeruje, iż konieczna jest jakiegoś rodzaju wtyczka dla przeglądarki. Mimo to Ajax pozostaje najbardziej oczywistym sposobem tworzenia interfejsów sieciowych dla tego typu systemów.

5

Nie chcę tu wytykać palcem witryny Excite, która zyskała spore zainteresowanie i zawierała wiele ciekawych rozwiązań utworzonych przy użyciu dostępnych wówczas technologii. Jej obecność w tym miejscu to hołd oddany jej jako idealnego przykładu portalu pierwszej generacji.

18

|

Rozdział 1. Wprowadzenie do Ajaksa

1. Dostosowywanie strony do własnych potrzeb jest najbardziej istotnym zadaniem, ale

najpierw trzeba się zarejestrować. Każda z kontrolek służących do dostosowania strony zamyka portal i przenosi użytkownika do zupełnie innej strony rejestracyjnej.

2. Dodawanie nowych „portletów” — bloków zawartości — jest dość żmudne. Trzeba kliknąć przycisk Add/Delete Content, który przenosi użytkownika do interfejsu konfiguracyjnego z zakładkami. Tu można dodawać i usuwać portlety, aktualizując ich bieżącą listę.

3. Dostosowywanie poszczególnych portletów — na przykład wybór firm, których ceny akcji są widoczne — powoduje zamknięcie portalu i przeniesienie użytkownika do specjalnej strony konfiguracyjnej. Kontekst zostaje utracony.

4. Zmiana układu nie zachodzi bezpośrednio na stronie, ale w przestrzeni konfiguracyjnej. Zarządzanie układem odbywa się przy użyciu miniaturowego modelu prawdziwego portalu, w którym to modelu widoczne są tylko nagłówki. (Niektóre portale wymagają wielokrotnego klikania przycisków ze strzałką w celu określenia układu. Na szczęście Excite umożliwia przeciąganie elementów modelu.)

5. Zmienna zawartość, na przykład wiadomości i informacje rynkowe, są prezentowane na

stronie, ale odświeżanie odbywa się tylko okresowo. Minimalny odstęp to pięć minut. Odświeżanie wymaga ponownego wczytania całej strony, co nie tylko rozprasza, ale także utrudnia użytkownikom stwierdzenia, co, jeśli w ogóle, zmieniło się na stronie.

6. Nie można wchodzić w interakcję z poszczególnymi portletami, na przykład w celu wyszukania informacji. Każda operacja wykonana na portlecie, na przykład wysłanie formularza, powoduje aktualizację całej strony lub przeniesienie użytkownika do nowej lokalizacji.

Portale tak dobrze pasują do ajaksyfikacji, że prawdopodobnie są obecnie najbardziej rozpowszechnionym rodzajem aplikacji Ajax. W czasie tworzenia blogu Ajaxian.com pod koniec 2005 roku doszliśmy do momentu, gdy tygodniowo otrzymywaliśmy informacje o dwóch lub trzech nowych portalach bazujących na Ajaksie! Niektóre z nich, na przykład popularne produkty NetVibes (http://netvibes.com) czy Protopage (http://protopage.com), to początkujące portale. Wśród bardziej dojrzałych producentów portali są nie kto inny jak Google (http://www.google.com/ig/) i Microsoft (http://live.com). Na przykładzie portalu NetVibes (rysunek 1.2) przedstawiam, jak przy użyciu Ajaksa można rozwiązać wymienione wcześniej problemy.

Rysunek 1.2. NetVibes

Ajaksyfikacja internetu — historia portali

|

19

1. Kiedy nowy użytkownik wejdzie na portal NetVibes, może dodawać zawartość i mani-

pulować nią, a zawartość ta będzie w tym samym miejscu w czasie następnego logowania przy użyciu tej samej przeglądarki (dzięki ciasteczkom). Jak wyjaśnia to punkt „Leniwa rejestracja” (rozdział 17.), to rozwiązanie zawsze było możliwe, ale Ajax powoduje, że można w większym stopniu dostosować stronę do własnych potrzeb, a przejście do rejestrowania jest bardziej płynne.

2. Kliknięcie odnośnika Add Content w portalu NetVibes nie powoduje wyświetlenia prze-

szkadzającej nowej strony. Pojawia się jedynie nowa kolumna (przykład wzorca Mikroodnośniki). W tym miejscu można wybrać nowe portlety, a te natychmiast pojawią się na portalu. Dzięki technologiom zdalnego wywoływania poleceń i manipulowania wyglądem przeglądarka internetowa może komunikować się z serwerem i aktualizować elementy bez konieczności odświeżania strony.

3. Portlety można dostosowywać do własnych potrzeb bezpośrednio na stronie bez naruszania jej pozostałych elementów. Kliknięcie odnośnika Edit prowadzi do małego formularza konfiguracyjnego, który jest wciśnięty w portlet (przykład wzorca Plastyczna zawartość). Nie jest konieczne odświeżanie strony, a efekty zmian są widoczne natychmiast.

4. Zmiana układu jest niezwykle łatwa — a także ciekawa — i polega na przeciąganiu portletów na stronie, co opisuje wzorzec Przeciąganie (rozdział 15.).

5. Zawartość portletów jest aktualizowana bezpośrednio i bez odświeżania strony. Co wię-

cej, każdy portlet jest odświeżany zgodnie z odrębnym harmonogramem. Teoretycznie portlet odpowiedzialny za pogodę można odświeżać raz dziennie, portlet z wiadomościami co pięć minut, a portlet z cenami akcji co sekundę, jak opisują to wzorce Okresowe odświeżanie (rozdział 10.) i Portlety (rozdział 15.). Po aktualizacji portletu można wyświetlić efekt podobny do tego opisanego we wzorcu Jednosekundowe wyróżnianie (rozdział 16.), aby poinformować użytkownika o zmianie.

6. Można komunikować się z poszczególnymi portletami, klikając kontrolki i obserwując postęp aktualizacji. Portlet działa tak, jakby był miniaturową stroną. Nie jest potrzebna aktualizacja całej strony, a pozostała zawartość się nie zmienia.

Historia portali pokazuje, jak radykalnie Ajax pozwala poprawić użyteczność dojrzałego gatunku aplikacji sieciowych. W rzeczywistości Ajax tchnął nowe życie w wiele rodzajów aplikacji, które, podobnie jak portale, znalazły się w zastoju. Flickr to nowoczesna, bazująca na Ajaksie wersja starej kategorii witryn przeznaczonych do prezentacji zdjęć. Gmail (http://gmail.com) to poczta elektroniczna wynaleziona na nowo, Google Maps (http://www.googlemaps.com) to wymyślone od nowa mapy, a Google Suggest (http://www.google.com/webhp?complete=1&hl=en) otwiera nowe możliwości w zakresie wyszukiwania i wpisywania danych. Nowe rodzaje aplikacji, takie jak czytniki RSS, oprogramowanie typu wiki, grupy towarzyskie czy grupowe kategoryzowanie internetu także korzystają z technologii Ajax.

Programy stacjonarne w sieci — historia aplikacji biurowych Próby przystosowania do sieci aplikacji biurowych są niemal równie stare co sam internet. Obecnie do komputerowego folkloru należy wypowiedź Marca Andreesena z Netscape udzielona w połowie lat dziewięćdziesiątych, w której Marc stwierdził, że MS-Windows 20

|

Rozdział 1. Wprowadzenie do Ajaksa

zostanie zredukowany do „pełnego błędów zestawu sterowników służącego do uruchamiania przeglądarki Netscape Navigator”. Słowa te miały stanowić zapowiedź nowej ery aplikacji w stylu programów stacjonarnych, działających jednak w przeglądarkach. Zalety aplikacji sieciowych w porównaniu ze stacjonarnymi są oczywiste i mnogie — na przykład możliwość dostępu do danych przy użyciu dowolnej przeglądarki internetowej, łatwość aktualizacji, brak konieczności manipulowania lokalnymi maszynami i lepsza współpraca. Jednak występują też poważne problemy, a największym z nich jest interfejs. W przeszłości utworzenie przenośnego interfejsu, który byłby wystarczająco dobry, aby usprawiedliwić porzucenie aplikacji stacjonarnych, było po prostu niemożliwe. Jednak dzięki Ajaksowi sytuacja szybko się zmienia6. Powstaje nowa generacja aplikacji biurowych bazujących na Ajaksie (http://innerphaze.homelinux.com/blog/?p=28), które będą poważną alternatywą dla programów MS-Word, Excel i ich stacjonarnych odpowiedników. Jedną z takich aplikacji jest Writely, nabytek korporacji Google nazywany „sieciowym edytorem tekstu” (rysunek 1.3). Autorzy Writely słusznie unikają bezmyślnego powielania elementów stacjonarnych edytorów tekstu, a w zamian starają się utworzyć zestaw funkcji oraz interfejs przystosowane do pracy w sieci. W efekcie powstało coś, co jest w równym stopniu wersją wikipedii z turbodoładowaniem, jak przystosowanym do sieci edytorem tekstu. Lista znajdująca się pod rysunkiem opisuje niektóre funkcje tej aplikacji.

Rysunek 1.3. Writely • Zawartość można edytować w trybie WYSIWYG. Edytowanie tekstu powoduje wyświe-

tlenie ostatecznej zawartości — kolorów, czcionek, układu i tak dalej. Te pomysł jest opisany we wzorcu Złożony edytor tekstu (rozdział 14.). • Writely umożliwia kilku osobom jednoczesną pracę nad tym samym dokumentem. Dzięki

zastosowaniu technologii opisanej we wzorcu Okresowe odświeżanie (rozdział 10.) można aktualizować dokument, a także status innych autorów. • Zarządzanie dokumentami jest łatwe — można „oznaczyć” (dodać słowo kluczowe) lub

„wyróżnić” (oznaczyć w celu wyróżnienia) element z natychmiastowym skutkiem. Także to jest przykładem dostosowania aplikacji to standardów sieciowych. Wzorce z grupy Zdalne wywoływanie poleceń (rozdział 6.) opisują dokonywanie stałych zmian bez konieczności odświeżania strony. 6

Podobnie jak w przypadku portali sam Ajax nie jest magicznym rozwiązaniem dla aplikacji biurowych bazujących na sieci. Są także inne problemy, takie jak współpraca między systemami czy zabezpieczanie przechowywanej zawartości, jednak Ajax usuwa jedną z wielkich barier, sprawiając, że takie aplikacje są przynajmniej użyteczne.

Programy stacjonarne w sieci — historia aplikacji biurowych

|

21

Historia aplikacji biurowych pokazuje, że Ajax oferuje wystarczająco wiele nowych możliwości, aby umożliwić tworzenie wartościowych sieciowych wersji aplikacji, które wydawały się na zawsze przywiązane do użytku stacjonarnego. Oprócz edytora Writely dostępne są arkusze kalkulacyjne, takie jak NumSum (http://numsum.com), czy też programy do tworzenia prezentacji, na przykład S5 (http://www.meyerweb.com/eric/tools/s5/). Oprócz aplikacji biurowych dostępne są wersje Ajax komunikatorów (zobacz Meebo na stronie http://meebo.com), emulatory terminali (zobacz Anyterm na stronie http://anyterm.org), a nawet środowiska programistyczne (zobacz Try Ruby autorstwa Why the Lucky Stiffa dostępny na stronie http://tryruby.hobix.com/). Aplikacje sieciowe zawsze będą bardziej ograniczone od ich stacjonarnych odpowiedników, ale Ajax zmniejsza przepaść między nimi do sytuacji, w której wiele aplikacji sieciowych jest „wystarczająco dobrych”. „Wystarczająco dobre” aplikacje pokonają wiele stacjonarnych odpowiedników dzięki nieodłącznym zaletom pracy przy użyciu przeglądarki.

Cechy aplikacji Ajax Wcześniej zdefiniowałem aplikacje Ajax jako „złożone, reaktywne aplikacje sieciowe bazujące na standardowych technologiach internetowych”. Nie należy traktować tego jako dwóch odrębnych rzeczy, ponieważ warto myśleć o Ajaksie jako o kontinuum — aplikację przypadkowo zawierającą kontrolkę Flash lub pozbawioną jakiejkolwiek technologii zdalnego wywoływania poleceń wciąż można traktować jako „częściowo” zgodną z Ajaksem. Warto myśleć w ten sposób, jeśli projektuje się system, ponieważ można wykorzystać doświadczenie innych programistów stosujących Ajax, które to doświadczenie jest uchwycone jako wzorce Ajax. Z kolei dokumentując takie wzorce, na pewno warto korzystać z aplikacji, które nie są „czystymi aplikacjami Ajax”. Z tego punktu widzenia elementy przedstawione w tym punkcie mają służyć jako ogólne wskazówki, a nie jako sztywne reguły dotyczące tego, co składa się na aplikacje Ajax.

Aplikacje, a nie same witryny internetowe Obecnie dużo więcej słyszy się na temat „aplikacji sieciowych” niż „witryn internetowych”. Wiele współczesnych projektów sieciowych powstaje z myślą o przeglądarce jako platformie i internecie jako systemie operacyjnym. Ludzie nie tylko kupują książki lub przeglądają podręczniki, ale też wykonują codzienne czynności i nawiązują kontakty towarzyskie poprzez platformę w postaci przeglądarki, często pracując nad ważniejszymi, bardziej złożonymi zadaniami niż kiedyś. Choć Ajax można zastosować do niemal wszystkiego, co działa w przeglądarce, pełnię jego możliwości można wykorzystać dopiero w tego typu systemach, gdzie pozwala podtrzymać zaangażowanie i produktywność użytkowników.

Płynna, ciągła interakcja Tradycyjne witryny internetowe zmuszają do przesłania formularza, odczekania kilku sekund, obserwacji ponownego wyświetlania się strony, a następnie rozpoczynają cały proces od początku. Dzieje się tak, ponieważ najmniejsza interakcja z serwerem, nawet najdrobniejsza zmiana w wyświetlanych danych, wymaga przekazania wywołania na serwer, a następnie odświeżenia całej strony. Jest to frustrująco powolny i chaotyczny proces. Ajax modyfikuje ten model pod kilkoma względami. Po pierwsze, skrypty w języku JavaScript działające po

22

|

Rozdział 1. Wprowadzenie do Ajaksa

stronie przeglądarki pozwalają bezpośrednio manipulować wyglądem — nie trzeba pobierać całej nowej strony z serwera w celu ukrycia lub zmiany układu elementów. Po drugie, interakcję z serwerem można obsługiwać przy użyciu języka JavaScript, dlatego można zapisać polecenia użytkownika i pobrać nowe informacje bez odświeżania strony. Po trzecie, działania użytkownika, takie jak kliknięcie myszą i wpisywanie danych, można obsługiwać przy użyciu języka JavaScript, dzięki czemu możliwa jest dużo bogatsza interakcja niż samo wypełnianie formularza i wciskanie przycisku Wyślij. Wszystkie te usprawnienia powodują, że interakcja przy użyciu technologii Ajax sprawia wrażenie dużo szybszej i bardziej płynnej.

Na żywo Skoro już interakcja przeglądarki z serwerem nie jest skomplikowanym rytuałem, można w trybie ciągłym żądać informacji od serwera. Dlatego aplikacje Ajax można zaprogramować tak, aby zawsze pokazywały najświeższe informacje, szczegóły dotyczące tego, kto jest dostępny w sieci, lub przesyłały komunikaty do użytkownika. Zawartość można wyświetlać „na żywo”.

Pomoc Aplikacje Ajax mogą monitorować działania użytkownika i proaktywnie ułatwiać wykonywanie zadań, nad którymi pracuje użytkownik. Działania tak drobne jak pojedyncze wciśnięcie klawisza mogą prowadzić do przekazania wywołania na serwer, gdzie można użyć danych i mocy obliczeniowych serwera do wygenerowania w ułamku sekundy przydatnych informacji. Na przykład formularz może zmieniać się wraz z danymi wpisywanymi przez użytkownika, a komunikat o błędzie może pojawiać się bezpośrednio po wpisaniu niepoprawnej wartości.

Dlaczego aplikacje sieciowe? A więc, co tak atrakcyjnego jest w aplikacjach sieciowych? Dlaczego, jeśli aplikacje stacjonarne zdają się działać poprawnie, wielu producentów tworzy programy działające w przeglądarkach? Poniższe punkty opisują niektóre z powodów przechodzenia na platformę sieciową.

•

Ludzie używają różnych komputerów w domu, w pracy, w szkole, w kafejkach i w telefonach. Przechowywanie danych w internecie jest najbardziej naturalnym sposobem dostępu do danych i ustawień.

•

Dużo większym problemem niż posiadanie zbyt wielu komputerów jest nieposiadanie żadnego. Wiele osób na świecie nie ma komputera, na którym można zainstalować stacjonarne oprogramowanie lub przechowywać dane. Dla tych osób aplikacje sieciowe to jedyny praktyczny sposób używania danej aplikacji i bezpiecznego przechowywania danych.

•

Aplikacje stacjonarne cierpią na coś, co można nazwać sytuacją paragrafu 22. Użytkownik musi być przekonany, że aplikacja jest wystarczająco użyteczna, aby ją zainstalować, ale często nie może tego sprawdzić, dopóki nie zainstaluje programu. Z drugiej strony, większość aplikacji sieciowych pozwala użytkownikom od razu przystąpić do pracy i natychmiast rozpocząć używanie aplikacji, całkowicie unikając instalowania.

Cechy aplikacji Ajax

|

23

24

•

W wielu domach i biurach dostępne są obecnie łącza szerokopasmowe, a serwery są bardziej wydajne niż kiedykolwiek przedtem. Ta infrastruktura umożliwia udostępnianie bogatych, interaktywnych aplikacji, których nadejście przewidywano w latach dziewięćdziesiątych, ale które nie były wówczas praktyczne. Ponadto pamięć po stronie serwera jest wystarczająco tania, aby przechowywać w sieci olbrzymie ilości danych. Początkowa oferta Gmail zapewniająca 1 GB pamięci dla poczty elektronicznej z zaskoczenia zdobyła świat, a obecnie nowe firmy umożliwiają przechowywanie w sieci całych kolekcji utworów muzycznych (na przykład witryna mp3tunes.com).

•

Technologie, na których bazuje Ajax — JavaScript, DOM i zdalne wywoływanie poleceń — dojrzały i zostały dla nich określone standardy. Oznacza to, że aplikacje sieciowe mogą być teraz bardziej przenośne i użyteczne. Ponadto ze współczesnymi aplikacjami sieciowymi wiąże się ukryta zaleta — wydajność. W porównaniu z dawnymi czasami odświeżania całych stron inteligentni programiści mogą zdecydować się na minimalizację przesyłu danych przy użyciu zestawu technik optymalizacji wydajności. W ten sposób wydajność została poprawiona nie tylko dzięki zwiększeniu przepustowości łączy, ale także dzięki nowej architekturze aplikacji sieciowych.

•

Dla programistów współczesne aplikacje sieciowe są często bardziej produktywne niż ich tradycyjne alternatywy z interfejsem GUI, szczególnie kiedy trzeba często udostępniać wersje programu dla różnych platform. Programiści jedynie muszą napisać kod pojedynczego produktu dla wszystkich platform i mogą ulepszać aplikację przyrostowo, zamiast w stylu „wielkiego wybuchu”. A po stronie serwera, gdzie znajduje się większość logiki, mogą używać dowolnego języka programowania i bibliotek.

•

Tworzenie bogatych aplikacji sieciowych postrzegano wcześniej jako coś niezwykle skomplikowanego. Jednak obecnie dużo łatwiej jest tworzyć programy sieciowe — zdaniem niektórych łatwiej niż w przypadku wielu środowisk z interfejsem GUI. Na prostsze pisanie aplikacji sieciowych wpływa kilka czynników: (a) programiści lepiej znają architekturę sieci i różne dostępne biblioteki oraz platformy, (b) te biblioteki i platformy zostały w znacznym stopniu ulepszone, szczególnie od czasu powstania technologii Ajax, (c) przeglądarki działają obecnie w bardziej spójny sposób i zgodnie ze standardami, a także oferują lepszą obsługę dla programistów, na przykład zestawy narzędzi programistycznych.

•

Wraz ze wzrostem wiedzy o zagrożeniach firmy częściej blokują komputery stacjonarne i zabraniają instalowania wtyczek dla przeglądarek. Aplikacje sieciowe przechowywane w intranecie firmy często postrzega się jako bezpieczniejsze i umożliwiające ściślejsze monitorowanie oraz kontrolę dostępu.

•

Twórcy aplikacji chcą zwykle zapewnić obsługę jak najszerszej grupy użytkowników. Osoby, dla których jedyną platformą docelową jest MS-Windows, zapominają nie tylko o innych możliwościach, takich jak Apple czy Linux, ale też o mniej standardowych platformach, na przykład „inteligentnych” telefonach, domowych systemach rozrywki czy konsolach do gier. Aplikacje sieciowe często umożliwiają bardziej elastyczny sposób dostępu do tych nowych platform.

•

Jedną z wielkich zalet internetu jest możliwość komunikowania się i współpracy ze zdalnymi użytkownikami, jednak takie działania bazują na wspólnym lub umożliwiającym współpracę oprogramowaniu. Ponieważ przeglądarki są niemal wszechobecne na komputerach podłączonych do internetu, aplikacje sieciowe są bardzo atrakcyjną możliwością komunikowania się i współpracy.

|

Rozdział 1. Wprowadzenie do Ajaksa

Efekty graficzne Aplikacje Ajax wyglądają podobnie do standardowych aplikacji sieciowych, ale zwykle zawierają nieco więcej animacji. Nie są to efektowne animacje, które znajdują się na stronie „na siłę”, ale animacje przekazujące informacje na temat tego, co się dzieje i co użytkownik może zrobić. Na przykład ikona związana z usuwaniem może powoli maleć i znikać.

Nowe kontrolki Kontrolki Ajax wykraczają poza standardowe kontrolki HTML — pola tekstowe, listy rozwijane, przyciski i tak dalej. Coraz większą popularność zyskują kontrolki takie jak suwaki czy wskaźniki postępu, zbudowane przy użyciu standardowych elementów HTML. Można także spotkać rozbudowane wersje tradycyjnych kontrolek. Zamiast nudnych starych tabel, można zobaczyć tabelki umożliwiające wyszukiwanie i edytowanie danych. Zamiast elementu textarea można spotkać złożony edytor tekstu z funkcjami WYSIWYG podobnymi do tych spotykanych w większości edytorów tekstu.

Nowe sposoby interakcji Ulepszone zostały nie tylko kontrolki, ale także sposoby interakcji. Także w tym przypadku programiści używający Ajaksa korzystają z pomysłów stosowanych w tradycyjnych, stacjonarnych środowiskach. Na przykład przeciąganie było charakterystyczną cechą środowisk okienkowych przez ponad dwie dekady, ale w jakiś sposób przez długi, długi czas nie mogło trafić do internetu. Obecnie coraz częściej można zobaczyć zastosowanie tej techniki w internecie, co jest bardzo korzystne, jak ilustruje to wcześniejszy przykład opisujący portal. Także inne sposoby interakcji stają się coraz bardziej popularne. Skróty klawiaturowe pozwalają przyspieszyć wykonywanie operacji, a niektórzy programiści wkraczają w świat przycisków myszy, eksperymentując z dwukrotnym kliknięciem czy prawym i środkowym przyciskiem. Nie widziałem jeszcze gestów myszą, takich jak te dostępne w przeglądarce Opera, ale wszystko jest możliwe.

Bazowanie na standardach Aplikacje Ajax nie wymagają niczego więcej oprócz standardowej przeglądarki internetowej z kilku ostatnich lat, takiej jak Internet Explorer 6.0 czy Firefox 1.0. Choć współpraca z wszystkimi przeglądarkami zależy od celów projektu, idea polega na tym, że programiści używający Ajaksa starają się uzyskać jak najwięcej przy użyciu standardowych właściwości przeglądarek i unikają wtyczek oraz cech specyficznych dla przeglądarek wszędzie tam, gdzie to możliwe. Oznacza to coś więcej niż standardowe technologie. Takie rozwiązanie wiąże się również z respektowaniem standardowych zwyczajów tworzenia interfejsu użytkownika w internecie.

Cechy aplikacji Ajax

|

25

Technologie związane z Ajaksem Poniżej znajduje się krótki opis różnych technologii związanych z Ajaksem. Na początku opisanych jest kilka technologii, począwszy od tych zawsze popularnych w internecie, które są stosunkowo dobrze znane w społeczności programistów. Wciąż używa się ich w aplikacjach Ajax, choć często inaczej niż wcześniej. HTML/XHTML Jak zawsze to HTML służy do tworzenia struktury strony internetowej. Aplikacje Ajax używają dokumentów HTML do tworzenia początkowej strony, a dokument ten podlega ciągłym modyfikacjom, co umożliwia zmianę wyglądu i dodawanie nowych zdarzeń. Tam, gdzie to możliwe, należy używać odmiany zgodnej z XML, XHTML, aby manipulowanie stroną było bardziej niezawodne. CSS Technologia CSS wzbogaca sposób wyświetlania i, dzięki arkuszom stylów, pomaga oddzielić strukturę dokumentu od szczegółów związanych ze stylem. Na szczęście współczesne przeglądarki zapewniają dość spójną obsługę technologii CSS2, dlatego w ostatnich kilku latach na wielu witrynach internetowych można było zauważyć odejście od układu bazującego na tabelach, która to technika nigdy nie była w pełni akceptowana na rzecz bardziej przejrzystego i elastycznego układu bazującego na CSS. Z perspektywy użytkowników Ajaksa bardzo korzystne jest to, że stylami CSS można łatwo manipulować przy użyciu języka JavaScript. Jeden wiersz kodu może spowodować zniknięcie obiektu, przeniesienie go w inne miejsce strony lub zmianę jego wyglądu. HTTP, CGI, przesyłanie formularzy Podobnie jak konwencjonalne aplikacje sieciowe, aplikacje bazujące na Ajaksie komunikują się przy użyciu protokołu HTTP. Różnica polega na tym, że zamiast zwracać całe strony, serwer zwraca zwięzłą odpowiedź, która jest następnie przetwarzana w skrypcie przeglądarki. Przesyłanie formularzy — często przy użyciu adresów URL w stylu CGI — także jest wykorzystywane, ale tę operację inicjuje się programowo, co oznacza, że nie jest konieczne odświeżanie strony. Skrypty wykonywane po stronie serwera Serwer wciąż jest potrzebny do wykonywania operacji takich jak przechowywanie danych i sprawdzanie poprawności danych wejściowych, jednak w niektórych architekturach Ajaksa serwer nie odpowiada już za wyświetlanie danych ani za logikę aplikacji, pozostawiając obsługę tych operacji skryptom wykonywanym po stronie przeglądarki. Ajax korzysta także z zestawu nowszych technologii. Mówię „nowsze” z pewną rezerwą, ponieważ każda z nich jest dostępna od wielu lat. Jednak dopiero teraz stają się lepiej znane, można używać ich jako standardu we wszystkich najważniejszych przeglądarkach i zostały połączone, umożliwiając zapewnienie nowego stylu aplikacjom. JavaScript Jedna rzecz jest pewna w przypadku aplikacji Ajax — operacje są wykonywane po stronie przeglądarki. JavaScript to język programowania wykonywany po stronie klienta pozwalający koordynować działania przeglądarki. Przed rozwojem Ajaksa programiści aplikacji sieciowych mogli umieszczać na stronach małe fragmenty kodu JavaScript, ale niewielu mogło pochwalić się dogłębną znajomością tego języka. Teraz się to zmienia, a programiści podejmują wysiłek zgłębienia języka JavaScript na podobnym poziomie jak w przypadku dowolnego języka przetwarzanego po stronie serwera. 26

|

Rozdział 1. Wprowadzenie do Ajaksa

XML i DOM (Document Object Model) Model DOM to hierarchiczna struktura danych reprezentująca dokument XML, a przy użyciu języka JavaScript można odczytywać te struktury i manipulować nimi. Szczególnie ważnym dokumentem XML jest bieżąca strona internetowa, ponieważ język HTML jest, mówiąc ogólnie, dialektem języka XML (dla wielu celów przeglądarki traktują HTML w taki sposób, choć jedynie wtedy, kiedy kod napisany jest w języku XHTML — wersji języka HTML przekształconej na XML — naprawdę wykorzystywany jest język XML). Ponieważ bieżąca strona internetowa jest rodzajem dokumentu XML, można udostępnić model DOM przeglądarce, a manipulując nim, można wpłynąć na zawartość strony (zobacz wzorce Manipulowanie wyglądem i Zmiana układu strony w rozdziale 5.). Ponadto można używać innych modeli DOM, jeśli programista zdecyduje się komunikować z serwerem przy użyciu Komunikatów XML. Model zdarzeń („DHTML”) Model zdarzeń powala na reagowanie na zdarzenia, takie jak kliknięcie myszą przy użyciu języka JavaScript. Jest to klucz do interaktywnej komunikacji z serwerem — komunikacji między użytkownikiem a stroną internetową (zobacz wzorce Działania użytkownika i Planowanie w rozdziale 7.). Zdalne wywoływanie poleceń Zdalne wywoływanie poleceń umożliwia pośrednią komunikację z serwerem przy użyciu języka JavaScript — nie jest konieczne odświeżanie strony. Obiekty XMLHttpRequest to zdecydowanie najczęściej używana technologia, ale dostępnych jest też kilka innych użytecznych technologii zdalnego wywoływania poleceń (zobacz wzorce Wywołania XMLHttpRequest, Wywołania IFrame, Strumieniowanie HTTP i JavaScript na żądanie w rozdziale 6.).

Budowa wywołań kierowanych do serwera Jak na niższym poziomie wygląda interakcja technologii związanych z Ajaksem? Poniżej przedstawiona jest typowa sekwencja zdarzeń. Zacznijmy od sekwencji uruchamiania aplikacji (rysunek 1.4).

Rysunek 1.4. Typowa sekwencja uruchamiania aplikacji

Budowa wywołań kierowanych do serwera

|

27

1. Użytkownik kieruje przeglądarkę do aplikacji Ajax, a następnie rozpoczyna interakcję z tą aplikacją, wchodząc na stronę w zwykły sposób, na przykład klikając odnośnik lub wybierając zakładkę.

2. Przeglądarka wczytuje początkową zawartość i zapełnia okno danymi przesłanymi przez

aplikację Ajax. Obejmuje to początkowy kod HTML przeznaczony do wyświetlenia, arkusze CSS określające styl i kod JavaScript służący do zarządzania dalszą interakcją. Kod HTML często jest bardzo prosty i opisuje jedynie ogólną strukturę strony. W takim przypadku początkowa zawartość zostanie pobrana później, w drugim wywołaniu. Początkowy kod zwykle zawiera metody obsługi zdarzeń określające, w jaki sposób system powinien reagować na działania użytkownika.

Po wczytaniu aplikacji następne operacje są wyzwalane przez zdarzenia. Poniżej znajduje się opis typowej sekwencji obsługi każdego zdarzenia (rysunek 1.5).

Rysunek 1.5. Typowa sekwencja obsługi każdego zdarzenia

1. Użytkownik wykonuje jakieś działanie. Większość zdarzeń jest wyzwalanych przez działa-

nia użytkownika, takie jak kliknięcie myszą. Jak opisują to wzorce dynamicznej obsługi działań, funkcje JavaScript można powiązać z konkretnymi zdarzeniami określonych elementów strony. Na przykład można spowodować, że funkcja purchase() będzie wywoływana zawsze wtedy, kiedy produkt w sklepie internetowym (element strony) zostanie dwukrotnie kliknięty (typ zdarzenia). Dlatego działania użytkownika zwykle powodują wywołanie metody obsługi zdarzenia.

2. Metoda obsługi zdarzenia przesyła żądanie na serwer. Niektóre zdarzenia wymagają in-

terakcji z serwerem — na przykład jeśli użytkownik wpisał pewne informacje, których poprawność musi zostać sprawdzona przez serwer. Klasa XMLHttpRequest — kluczowy element technologii Ajax — jest zaprojektowana specjalnie do obsługi tego zadania. Przy jej użyciu kod JavaScript może bezpośrednio przekazać wywołanie na serwer wskazując jednocześnie na wywoływaną zwrotnie funkcję, która zostanie powiadomiona o nadejściu odpowiedzi. Interakcje między przeglądarką a serwerem opisują wzorce zdalnego wywoływania poleceń (rozdział 6.).

28

|

Rozdział 1. Wprowadzenie do Ajaksa

3. Serwer przetwarza żądanie. Po stronie serwera usługa sieciowe (zobacz wzorzec Usługi sieciowe w rozdziale 6.) przyjmuje żądanie.

4. Serwer odpowiada. Usługa sieciowa przyjmuje żądanie i zwraca odpowiedź, używając standardowych technik bazujących na HTTP, które są znane wszystkim programistom tworzącym tradycyjne aplikacje sieciowe.

5. Po stronie przeglądarki wywoływana zwrotnie funkcja otrzymuje odpowiedź. Funkcja ta otrzymuje informację o zakończeniu przetwarzania wywołania i może odczytać odpowiedź serwera. Wywoływana zwrotnie funkcja może wykonywać dowolne operacje, jednak najczęstszym działaniem jest zmiana wyglądu strony. To rozwiązanie bazuje na manipulowaniu modelem DOM, który jest reprezentacją strony internetowej pozwalającą na modyfikowanie stron przy użyciu języka JavaScript. Więcej informacji znajdziesz w opisie wzorców manipulowania wyglądem strony (rozdział 5.). Ta sekwencja daje krótki przegląd technologii — w następnym rozdziale znajduje się praktyczne wprowadzenie do każdej z nich, a pierwsza część książki opisująca wzorce, „Wzorce dla podstawowych technologii” (część II), opisuje je bardziej szczegółowo.

Trendy w technologiach związanych z Ajaksem Niniejsza książka w oczywisty sposób dotyczy zmieniającego się zagadnienia. W momencie utworzenia pojęcia „Ajax” istniało już całkiem sporo aplikacji Ajax, a od tego czasu ich liczba znacznie się zwiększyła na fali gorączkowej działalności ruchu związanego „Web 2.0”. Każdego dnia pojawiają się nowe pomysły, a także powstaje więcej i więcej aplikacji Ajax. Nie da się stwierdzić, do czego to doprowadzi, ale w tym podrozdziale przedstawiam kilka możliwych trendów i otwartych pytań.

Standardy i fragmentacja Większa zgodność między przeglądarkami znacznie ułatwia tworzenie złożonych aplikacji sieciowych. Jednak obecnie znajdujemy się na rozdrożu, ponieważ ta sama ekonomiczna koniunktura, który napędza tworzenie aplikacji Ajax, jednocześnie prowadzi do innowacji w samych przeglądarkach, co grozi rozproszeniem technologii. Jedną z grup dążących do zmian jest grupa WHAT-WG (od ang. Web Hypertext Application Technology Working Group, czyli grupa robocza do spraw technologii aplikacji sieciowych). Kluczowym pojęciem w nazwie tej grupy jest aplikacja, ponieważ grupa dąży do uznania internetu jako prawdziwej platformy służącej do uruchamiania aplikacji, który to pomysł dobrze wpasowuje się w idee stojące u podstaw Ajaksa. Zgodnie z obecnymi propozycjami obsługa złożonych kontrolek i technik interakcji, na przykład przeciągania, ma zostać wbudowana w przeglądarki. Jest to korzystne z punktu widzenia programistów używających Ajaksa, ale dodanie takiej obsługi może się odbyć kosztem zgodności. Nie jest oczywiste, które przeglądarki będą obsługiwały poszczególne standardy, a prawdopodobne są duże rozbieżności w harmonogramach implementacji. Co więcej, podejrzana jest nieobecność Microsoftu w WHAT-WG i całkiem możliwe, że przeglądarka IE będzie miała zupełnie odmienny interfejs API do obsługi udostępnianych funkcji. Obok standardów proponowanych przez WHAT-WG i W3C prawdopodobnie dostępne będą właściwości specyficzne dla przeglądarek, o których trzeba

Trendy w technologiach związanych z Ajaksem

|

29

będzie pamiętać. Microsoft rozwija platformę Atlas i oczywiście możliwe jest, że przeglądarka IE będzie udostępniała funkcjonalność tej platformy — na przykład lokalne przechowywanie danych — niedostępną w innych przeglądarkach. Jeśli autorzy przeglądarek wrócą do sytuacji odmiennych interfejsów API z połowy lat dziewięćdziesiątych, programiści będą musieli zdecydować się na przyjęcie odpowiedniej strategii. Możliwe rozwiązania to: koncentracja na poszczególnych przeglądarkach (niestety, czasem może to być najbardziej pragmatyczne podejście), ignorowanie właściwości specyficznych dla przeglądarek lub bazowanie na zgodnych wtyczkach służących do obsługi operacji nieobsługiwanych bezpośrednio przez poszczególne przeglądarki.

Przystosowanie przeglądarek Producenci mogą planować wiele rozszerzeń przeglądarek, ale czy użytkownicy zaktualizują aplikacje, aby wykorzystać nowe właściwości? Większość użytkowników internetu nie słyszała o Ajaksie i prawdopodobnie nie będzie się nim interesować, kiedy go pozna. Użytkowników trzeba długo namawiać, aby zaktualizowali wersję przeglądarki, a potrzebna jest jeszcze szerzej zakrojona perswazja, aby zmienili jej markę. Z drugiej strony duża grupa osób obcuje z internetem od dzieciństwa i jest przyzwyczajona do stosunkowo częstych aktualizacji oraz zmian używanych przeglądarek. Co więcej, przeglądarki — podobnie jak duża część stacjonarnego oprogramowania — działają coraz bardziej inteligentnie pod względem automatycznej aktualizacji, dlatego użytkownicy używający nowych wersji przeglądarek udostępniających to rozwiązanie zawsze będą mieć dostęp do najnowszych właściwości.

Akceptacja użytkowników Pierwsze wrażenia użytkowników odnośnie większości właściwości Ajaksa są pozytywne, ale wciąż nie wiadomo, czy elementy takie jak przeciąganie czy w pełni rozbudowane aplikacje, na przykład edytory tekstu, działające w przeglądarce będą wygodne dla typowego użytkownika. Kolejne zagadnienie wiąże się z obsługą adresów URL i przycisku Wstecz. Ten problem nie jest tak poważny, jak twierdzą niektórzy krytycy, co wyjaśnia wzorzec Niepowtarzalne adresy URL (rozdział 17.), ale prawdą jest, że właściwości takie jak odświeżanie strony czy przycisk Wstecz nie działają dokładnie tak samo jak w standardowych aplikacjach. Jak użytkownicy poradzą sobie z tymi zmianami i jakich sztuczek użyją programiści, aby rozwiązać podobne problemy?

Aplikacje stacjonarne Ponieważ Ajax ma w pewien sposób umożliwić zastąpienie aplikacji stacjonarnych, jego przyszłość w dużym stopniu zależy od ich rozwoju. Niektórzy przewidują zanik tradycyjnych rodzajów aplikacji stacjonarnych, takich jak edytory tekstu czy systemy zarządzania spersonalizowanymi informacjami. Oczywiście Ajax umożliwia wypełnienie tej luki, a pytanie brzmi, czy w wyniku innowacji w aplikacjach stacjonarnych ta luka będzie się zmniejszać czy zwiększać. Szczególnie warto śledzić strategię rozwoju Live przez Microsoft, jak również zapowiadanej wersji Ajax produktu Star Office przygotowywanej przez Sun i Google, które to aplikacje tworzone są jako hybrydy: bogate aplikacje stacjonarne przeznaczone do skomplikowanych, długich operacji połączone z klientami zgodnymi z Ajaksem oferującymi wszystkie opisane wcześniej zalety interfejsu sieciowego. 30

|

Rozdział 1. Wprowadzenie do Ajaksa

Technologia Flash Flash odgrywa ciekawą rolę w świecie technologii Ajaksa. Oczywiste jest, że Ajax ma przewagę ze względu na zgodność ze standardami — można użyć zwykłego formularza i dodać do niego kilka elementów Ajaksa w postaci efektów graficznych i dynamicznego sprawdzania poprawności. Co jeszcze lepsze, formularz może działać zarówno wtedy, kiedy technologie Ajaksa są dostępne, jak i bez nich. Z drugiej strony Flash umożliwia wiele rzeczy, których nie da się zrobić przy użyciu Ajaksa, na przykład pozwala na dostęp do sprzętu, używanie złożonych efektów graficznych czy przechowywanie danych w plikach lokalnych. Obie te technologie podlegają ciągłym zmianom. Czy firma Adobe zdecyduje się na rozwój technologii Flash tak, aby mogła bezpośrednio zastąpić Ajaksa, czy raczej będzie chciała utworzyć uzupełniającą technologię? A może nadchodzące nowości w przeglądarkach spowodują zwiększenie znaczenia najważniejszych elementów technologii Flash?

Złożona grafika Obecnie możliwe jest stosowanie bogatej grafiki wektorowej. Przeglądarka IE obsługuje język VML (od ang. Vector Markup Language), a Firefox i Safari obsługują SVG. Prawdopodobnie zobaczymy ewolucję złożonych interfejsów API, a w przyszłości grafikę trójwymiarową, co otworzy jeszcze więcej możliwości. Pomijając kwestie związane ze zgodnością, trzeba będzie rozważyć wiele problemów projektowych. Teoretycznie można wygenerować dowolne efekty graficzne, dlatego potencjalnie można całkowicie zignorować standardy języka HTML i od podstaw utworzyć nowy zestaw kontrolek. Jest to krańcowe rozwiązanie, jednak programiści będą musieli codziennie podejmować decyzje pomiędzy dostosowaniem się do standardów, a wyborem bogatszych, niestandardowych kontrolek lub bibliotek, które prawdopodobnie będą udostępniały takie kontrolki.

Dwustronny internet W internecie to zawsze przeglądarka inicjuje połączenie. Nie ma możliwości, aby serwer zajrzał do przeglądarki użytkownika i stwierdził: „Hej, Twój znajomy właśnie się zalogował!”. A przynajmniej nie ma standardowej możliwości wykonania tego zadania. Już od długiego czasu ludzie próbują różnych sztuczek, aby umożliwić coś, co nazywane jest na różne sposoby: „wypychaniem”, „strumieniowaniem”, „dwustronnym internetem”, a ostatnio określane jako „Comet” (http://alex.dojotoolkit.org/?p=545). Te pomysły nie są kluczowe dla Ajaksa, ale widoczne jest duże zainteresowanie nimi oraz duża synergia z podstawowymi technologiami Ajaksa. Kilka wzorców przedstawionych w tej książce bazuje na tym pomyśle (Strumieniowanie HTML, Okresowe odświeżanie i Zdarzenia rozproszone), ale wciąż trudno dobrze obsługiwać tę technikę z powodu problemów związanymi ze zgodnością i oczywiście skalowalnością. Powstają jednak nowe rozwiązania — serwery takie jak Twisted (http://twistedmatrix.com) obsługujące wiele długotrwałych połączeń, a także nowinki w przeglądarkach, które powodują, że działania serwera są mniej natrętne.

Trendy w technologiach związanych z Ajaksem

|

31

Pamięć lokalna Wraz z rozwojem popularności Ajaksa coraz bardziej potrzebna jest pamięć lokalna. Obecnie jedynym standardowym sposobem przechowywania danych w przeglądarce są ciasteczka. Jednak ludzie chcą przechowywać dużo większe zbiory danych — wiele megabajtów — a także zapobiegać przesyłaniu tych danych na serwer. Ponadto możliwość lokalnego przechowywania danych pozwala użytkownikom kontynuować pracę bez połączenia z siecią, rozwiązując w ten sposób główny argument przeciw rozbudowanym aplikacjom sieciowym. Niektóre biblioteki Ajaksa, na przykład Dojo, próbują korzystać z możliwości lokalnego przechowywania danych technologii Flash. Ponadto planowane jest dodanie możliwości obsługi tej techniki w przeglądarce Firefox, a platforma Atlas Microsoftu także ma umożliwiać lokalne przechowywanie informacji (nie jest pewne, czy ta obsługa nie będzie specyficzna dla przeglądarki IE). Czy pamięć lokalna naprawdę jest potrzebna, jeśli Ajax pozwala na niezwykle łatwą synchronizację z serwerem? Czy użytkownicy zrozumieją, które dane są lokalne, a które nie i będą mogli zarządzać własnymi danymi? Pojawią się także problemy projektowe, na przykład obsługa synchronizacji po zakończeniu pracy w trybie bez połączenia.

Formularze XForms Formularze XForms to nowy standard definiowany przez konsorcjum W3C, będący istotną aktualizacją standardowych formularzy internetowych. Formularze XForms umożliwiają oddzielenie danych od warstwy prezentacji, oferując złożone kontrolki służące do manipulowania danymi i pozwalając na reagowanie pól na zmiany wprowadzone w innych polach. Wszystkie te możliwości są już dostępne przy użyciu Ajaksa, ale formularze XForms to podejście bardziej standardowe. Ciekawym pytaniem jest to, czy formularze XForms rzeczywiście zostaną wprowadzone, skoro Ajax zyskuje na popularności, a jeśli już tak się stanie, czy będą współistniały z technologiami Ajaksa takimi jak zdalne wywoływanie poleceń.

JavaScript Dzięki wprowadzeniu technologii Ajax programiści zaczęli poważnie traktować język JavaScript, a on sam zaczął ewoluować. W przyszłości możemy oczekiwać ulepszonej obsługi wielowątkowości, klasycznego rozdzielenia interfejsu od implementacji i różnych ulepszeń składni (zobacz http://weblogs.mozillazine.org/roadmap/archives/008325.html). Ponadto na popularności mogą zyskać skrypty JavaScript wykonywane po stronie serwera, ponieważ pomagają w obsłudze aplikacji Ajax, które często potrzebują tej samej logiki i identycznych struktur danych po obu stronach połączenia. Na przykład logika służąca do sprawdzania poprawności jest często uruchamiana po stronie przeglądarki, aby polepszyć wydajność, ale ze względów bezpieczeństwa dane trzeba ponownie sprawdzać po stronie serwera. Wraz z ewolucją języka zmieniają się też wzorce projektowe, ponieważ programiści starają się jak najlepiej wykorzystać możliwości języka JavaScript i tworzą coraz bardziej złożone skrypty.

32

|

Rozdział 1. Wprowadzenie do Ajaksa

Ułatwianie programowania Dostępnych jest już bardzo dużo bibliotek i platform związanych z technologią Ajax (zobacz dodatek A), ale prawdopodobnie będzie ich jeszcze więcej, kiedy Ajax będzie powszechnie używany, a technologie, na których bazuje, będą ewoluowały. Środowiska IDE i związane z nimi narzędzie także się zmieniają — miejmy nadzieję, że język JavaScript będzie miał podobne wsparcie, jakie programy Eclipse i InteliJ Idea zapewniają dziś językowi Java. Wsparcie to obejmuje refaktoryzację kodu, sprawdzanie błędów w trakcie pisania i propozycje poprawek kodu. Są także bardziej specjalistyczne zapotrzebowania związane z internetem, takie jak wizualizacja obciążenia i zautomatyzowane testowanie sieci. Choć narzędzia do obsługi tych zadań są już od pewnego czasu dostępne, muszą stać się dużo bardziej złożone, aby obsługiwać złożone aplikacje Ajax.

Usprawnienia związane ze sprzętem i przepustowością łączy Pojawiły się już pewne niespodzianki związane z technologią Ajax, takie jak witryna Google Suggest (http://www.google.com/webhp?complete=1&hl=en), pokazujące, że możliwe jest przesyłanie na serwer i z powrotem danych dotyczących każdego wciśnięcia klawisza. Dzięki lepszemu sprzętowi i większej przepustowości łączy możliwe będzie wykonywanie jeszcze większej liczby operacji, które wcześniej uważane były za niepraktyczne. Czy Ajax może być praktycznym rozwiązaniem problemu wyświetlania plików multimedialnych w czasie rzeczywistym? Gier sieciowych? Interaktywnej wizualizacji danych? Odpowiedzi na te pytania zależą od rozwoju sprzętu i łączy, jak również od możliwości wykorzystania ich przez przeglądarki i oprogramowanie serwerowe.

Wnioski Niniejszy rozdział stanowi wprowadzenie do podstawowych technologii Ajaksa, zawiera przegląd charakterystycznych przykładów oraz pokazuje, w jakim kierunku zmierza Ajax, choć bez wątpienia czeka nas wiele niespodzianek. Choć nazwa „Ajax” jest stosunkowo nowa, Ajax czaił się w różnych zakątkach internetu już od pewnego czasu, a pozostałe rozdziały książki wyjaśniają, co obecnie wiadomo na temat stosowania tej techniki. W następnym rozdziale rzucimy się na głębokie wody technologii Ajaksa we „wzorcowym samouczku” — praktycznym wprowadzeniu do podstawowych technologii Ajaksa, jak również wzorców Ajax, które wyznaczają sposoby korzystania z tych technologii.

Wnioski

|

33

34

|

Rozdział 1. Wprowadzenie do Ajaksa

ROZDZIAŁ 2.

Wzorcowy samouczek

Niniejszy rozdział przedstawia technologię Ajax i wzorce Ajax w trzyczęściowym samouczku. Pierwszy podrozdział to szybki przegląd kluczowych technologii, zalecany, jeśli nigdy jeszcze nie używałeś Ajaksa. Drugi pokazuje, jak wysokopoziomowe wzorce pozwalają rozbudować system. Jeśli już stosowałeś technologię Ajax, możesz zacząć od tego miejsca. Ostatni podrozdział zawiera propozycje kilku ćwiczeń, z którymi możesz się zmierzyć. W internecie angielska wersja tego samouczka znajduje się pod adresem http://ajaxify.com/tutorial/, a działające wersje demonstracyjne wszystkich przykładów znajdziesz na stronie http:// przyklady.helion.pl/ajaxwp/. Aby uruchomić kod lokalnie, potrzebna jest standardowa instalacja PHP (wersja 5 lub nowsza) z serwerem Apache lub podobnym serwerem internetowym (nie jest potrzebna żadna baza danych). Jeśli chcesz pobrać pełny kod, gotowy pakiet znajdziesz na stronie ftp://ftp.helion.pl/przyklady/ajaxwp.zip. Więcej szczegółów dotyczących instalacji znajdziesz w dodatku B. Każdy punkt samouczka rozpoczyna się od skrótowego opisu odpowiedniego programu demonstracyjnego dostępnego w internecie, jak również wskazania katalogu w pakiecie z kodem, gdzie znajduje się pełny kod przykładu.

Technologie Ajaksa w okamgnieniu Niniejszy podrozdział zawiera kilka ćwiczeń, które pozwalają szybko zapoznać się z podstawowymi technologiami Ajaksa. Każdy punkt jest niezależny i odpowiada grupie wzorców dotyczących technologii podstawowych (część II), na których bazują wszystkie aplikacje Ajax.

Przygotowywanie programów demonstracyjnych Każdy program demonstracyjny powinien znajdować się w odrębnym katalogu, dlatego powinieneś utworzyć katalog w nadrzędnym katalogu serwera, a następnie umieścić w nim trzy nowe katalogi: cd /apache/docroot (podaj własny katalog nadrzędny) mkdir tutorial cd tutorial mkdir display remoting dynamic

35

W przypadku systemów uniksowych upewnij się, że uprawnienia odpowiadają ustawieniom serwera (między innymi katalogi powinny być publicznie dostępne do odczytu i umożliwiać wykonywanie programów). Każdy katalog powinien zawierać taki sam plik HTML będący „białą kartą” — index.html. Otwórz ulubiony edytor i zapisz poniższy plik jako display/index.html, remoting/index.html i dynamic/index.html:

AjaxPatterns.org - Samouczek

Samouczek AjaxPatterns



Pamiętaj, aby ustawić uprawnienia pliku zgodnie z wymaganiami serwera. Teraz skieruj przeglądarkę do jednego z nowych plików i sprawdź, czy widoczna jest jego zawartość. Użyj adresu URL http://localhost/tutorial/display/, a jeśli to nie zadziała, spróbuj wpisać http://localhost/ tutorial/display/index.html. Plik HTML próbuje wczytać niedostępny jeszcze plik tutorial.js z kodem JavaScript. Następne trzy programy demonstracyjne nie wymagają wprowadzania zmian w pliku HTML i ilustrują zagadnienia związane z technologią Ajax przy użyciu odpowiednich plików tutorial.js.

Manipulowanie wyglądem oraz model DOM w okamgnieniu Witaj świecie! Na początek przejdź do katalogu roboczego (tutorial/display/). W internecie, pod adresem http:// przyklady.helion.pl/ajaxwp/tutorial/display, znajduje się wersja demonstracyjna aplikacji utworzonej w tym punkcie. Pierwszym zadaniem, jakie ma wykonać Ajax, jest aktualizacja wyświetlanych elementów — modyfikacja kontrolek, uruchomienie animacji i tak dalej. Można to zrobić, manipulując modelem DOM, dlatego ten program demonstracyjny modyfikuje model DOM bezpośrednio po wczytaniu strony. Wszystkie operacje należy wykonywać w katalogu roboczym, tutorial/display. Kiedy już do niego przejdziesz, zapisz poniższy plik jako tutorial.js: window.onload = function() { var greeting = document.createElement("span"); greeting.style.backgroundColor = "yellow"; greeting.innerHTML = "Witaj świecie!"; document.getElementById("sandbox").appendChild(greeting); }

Teraz skieruj przeglądarkę do programu demonstracyjnego display (http://localhost/tutorial/ display/index.html). Powinieneś zobaczyć komunikat „Witaj świecie!” widoczny na żółtym tle. Jak wyjaśnia to wzorzec Zmiana wyglądu (rozdział 5.), DOM to struktura drzewiasta reprezentująca bieżącą stronę, a przeglądarka zapewnia synchronizację wyświetlanych danych 36

|

Rozdział 2. Wzorcowy samouczek

z programowymi zmianami wprowadzanymi w model DOM. Można zatwierdzić zmiany, wyświetlając model DOM po uruchomieniu powyższego skryptu. Dostępnych jest wiele narzędzi służących do wizualizacji modelu DOM, które opisane są we wzorcu Sprawdzanie zawartości modelu DOM (rozdział 18.). W powyższym kodzie greeting to nowy węzeł modelu DOM dodawany do istniejącego węzła sandbox. Po utworzeniu węzła greeting skrypt ustawia kolor tła jako właściwość stylu CSS i używa funkcji innerHTML jako prostego środka służącego do określenia zawartości tego węzła. Wynikowy model DOM jest taki sam jak model utworzony w wyniku wczytania strony zawierającej poniższy kod HTML:

Witaj świecie!

Udogadniająca funkcja $() Teraz pora na szybką refaktoryzację. Ponieważ funkcję document.getElementById() trzeba wywoływać dość często, we wszystkich programach demonstracyjnych używam wygodnego aliasu, dlatego do kodu należy dołączyć poniższą funkcję: function $(id) { return document.getElementById(id); }

Teraz można zapisać ostatni wiersz powyższego kodu bardziej zwięźle: $("sandbox").appendChild(greeting);

Sprawdź, czy strona działa tak samo jak poprzednio. Zapisu $()1 używam w całej książce. Czasem funkcja ta jest używana wielokrotnie do określania tego samego elementu modelu DOM, co powoduje pewne pogorszenie wydajności, ponieważ każde wywołanie wymaga sprawdzenia zawartości tego modelu. W systemach produkcyjnych możesz użyć funkcji $() tylko raz, przypisując element modelu DOM do zmiennej tymczasowej, a następnie używać tej zmiennej. W ten sposób można poprawić nieco wydajność kosztem zmniejszenia przejrzystości kodu.

Dodawanie odnośników Możemy zakończyć ten punkt, dynamicznie tworząc odnośnik. Dodaj fragment kodu do funkcji onload(): window.onload = function() { var greeting = document.createElement("span"); greeting.style.backgroundColor = "yellow"; greeting.innerHTML = "Witaj świecie!"; $("sandbox").appendChild(greeting); $("sandbox").appendChild(document.createElement("hr")); var link = document.createElement("a"); link.href = "http://ajaxpatterns.org"; link.appendChild(document.createTextNode("Inne elementy Ajaksa...")); $("sandbox").appendChild(link); } function $(id) { return document.getElementById(id); } 1

Alias $() dla funkcji document.getDocumentById() bazuje na bibliotece prototypów (http://prototype.conio.net/). Ponieważ wiele popularnych bibliotek technologii Ajax bazuje na prototypach, staje się to czymś na kształt standardowego idiomu w skryptach Ajaksa. Technologie Ajaksa w okamgnieniu

|

37

Ponownie wczytaj stronę i upewnij się, czy wygląda tak jak strona widoczna na rysunku 2.1.

Rysunek 2.1. Wyświetlanie

Dodaliśmy dwa nowe węzły potomne do węzła sandbox. Pierwszy węzeł potomny to element hr dodany ze względów estetycznych. Następnie znajduje się odnośnik, znacznik kotwicy z odpowiednią wartością właściwości href (podobnie jak w deklaracji HTML). Aby określić tekst odnośnika, dodaliśmy nowy węzeł potomny z tekstem. Warto porównać to z poprzednim przykładem, gdzie użyliśmy funkcji innerHTML do ustawienia zawartości elementu. Użycie tej funkcji powoduje, że przeglądarka przetworzy kod HTML strony i spróbuje na tej podstawie zaktualizować model DOM. Jest to wygodne, ale nieco bardziej narażone na błędy niż bezpośrednie manipulowanie modelem DOM zastosowane w przypadku określania tekstu odnośnika.

Zdalne wywoływanie poleceń w okamgnieniu Na początek przejdź do katalogu roboczego (tutorial/remoting/). W internecie, pod adresem http:// przyklady.helion.pl/ajaxwp/tutorial/remoting/, znajduje się wersja demonstracyjna aplikacji tworzonej w tym punkcie. Użyjemy techniki zdalnego wywoływania poleceń do wykonania pewnej bardzo prostej operacji — dynamicznego wstawienia na stronę fragmentu kodu HTML z serwera. Najpierw utwórz stronę HTML, message.html, którą program ma wstawić: To plik message.html a teraz jakiś znacznik w tym miejscu
jak również odnośnik do strony AjaxPatterns.

Następnie w pliku tutorial.js trzeba zapisać kod służący do pobierania komunikatu i umieszczania go w kontenerze "sandbox". Do obsługi zdalnego wywołania użyjemy obiektu XMLHttpRequest, opisanego szczegółowo we wzorcu Wywołania XMLHttpRequest (rozdział 6.). Ponieważ sposób tworzenia tego wywołania jest zależny od przeglądarki, na początku pliku tutorial.js należy umieścić funkcję fabryczną createXMLHttpRequest(): function createXMLHttpRequest() { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {} try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} try { return new XMLHttpRequest(); } catch (e) {} alert("Brak obsługi XMLHttpRequest"); return null; }

Podobnie jak w poprzednim programie demonstracyjnym należy utworzyć wygodną funkcję $(): function $(id) { return document.getElementById(id); }

38

|

Rozdział 2. Wzorcowy samouczek

Po utworzeniu funkcji bibliotecznych jedynym zadaniem jest pobranie danych przez obiekt XMLHttpRequest i wyświetlenia ich po wczytaniu: window.onload = function() { var xhr = createXMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState==4) { // Żądanie zostało przetworzone if (xhr.status==200) { $("sandbox").innerHTML = "Pobrano z serwera..."; $("sandbox").innerHTML += xhr.responseText; } else { alert("Komunikat został zwrócony z kodem błędu."); } } } xhr.open("GET", "message.html", true); xhr.send(null); }

W elemencie sandbox pojawi się zawartość pliku message.html, jak przedstawia to rysunek 2.2.

Rysunek 2.2. Komunikat w elemencie sandbox

Powyższy kod demonstruje zastosowanie obiektów XMLHttpRequest w pigułce. Dzieją się trzy rzeczy:

1. Definiowana jest funkcja XMLHttpRequest.onreadystatechange. Jest to funkcja wywo-

ływana zwrotnie, która otrzymuje powiadomienie kilkakrotnie w czasie życia wywołania, włączając w to moment zakończenia przetwarzania wywołania. Dla wygody właściwość została przypisana do „domknięcia” — anonimowej funkcji w bloku function() {...} — aby nie trzeba było tworzyć odrębnej metody. Zawartość domknięcia jest opisana poniżej.

2. Następnie funkcja XMLHttpRequest.open() otwiera nowe połączenie. Jego parametry informują, że funkcja przesyła żądanie typu GET, a adres URL to message.html. Szczegółowe informacje dotyczące trzeciego parametru znajdziesz w rozdziale 6. we wzorcu Wywołania XMLHttpRequest.

3. Funkcja XMLHttpRequest.send() kończy przetwarzanie żądania. Argument tej funkcji to null, ponieważ żądanie ma jedynie nagłówek, a nie ma ciała.

W jaki sposób wykorzystano tu mechanizm wywołań zwrotnych obiektu XMLHttpRequest? W czasie wywołania obiekt XMLHttpRequest przechodzi przez kilka stanów, od 0 przed nawiązaniem połączenia, do 4 po otrzymaniu odpowiedzi. W tym przypadku ważny jest jedynie stan końcowy, dlatego funkcja onreadystatechange ignoruje wszystkie wcześniejsze stany. Na tym etapie dostępna jest już pełna odpowiedź, ale czy jest ona poprawna? Trzeba sprawdzić, Technologie Ajaksa w okamgnieniu

|

39

czy nagłówek ma poprawny kod odpowiedzi, czyli 200. Jeśli wszystkie operacje zakończyły się powodzeniem, właściwość XMLHttpRequest.responseText będzie zawierała dane pobrane z serwera. Po sprawdzeniu odpowiedzi wiadomo, że właściwość responseText to łańcuch znaków dokładnie odzwierciedlający zawartość pliku message.html: „To plik message.html...odnośnik do strony AjaxPatterns.”. Następnie można wyświetlić ten łańcuch, dołączając go do właściwości innerHTML elementu sandbox. Odpowiedź nie musi być kodem HTML. Mogą to być także dane, na przykład „5”, „OK” lub „1,1,2,3,5”. Ponadto metoda przetwarzająca odpowiedź może użyć jej do dowolnych operacji. Nie trzeba bezpośrednio umieszczać odpowiedzi na stronie, a nawet w ogóle nie trzeba zmieniać wyświetlanych danych — można po prostu zapisać wartość w celu jej późniejszego wykorzystania. Docelowy adres URL może prowadzić do dowolnej lokalizacji na serwerze. Zazwyczaj jest to dynamiczny skrypt, a nie statyczny plik HTML, taki jak plik z komunikatem użyty w przykładzie. Adres URL często zawiera zmienne przekazywane w stylu CGI służące jako dane wejściowe w skrypcie wykonywanym po stronie serwera.

Dynamiczne operacje w okamgnieniu Na początek przejdź do katalogu roboczego (/tutorial/dynamic/). Wersja demonstracyjna aplikacji jest dostępna w internecie na stronie http://przyklady.helion.pl/ajaxwp/tutorial/dynamic/. Ten program demonstracyjny pokazuje, jak obsługiwać zdarzenia przy użyciu języka JavaScript. Na początek utwórz plik tutorial.js zawierający zwykłą definicję funkcji $(): function $(id) { return document.getElementById(id); }

Po wczytaniu strony można poprosić użytkownika o kliknięcie kontrolki sandbox: window.onload = function() { $("sandbox").innerHTML = "Kliknij w tym miejscu!
"; }; }

Chcemy, aby aplikacja przechwytywała zdarzenie kliknięcia kontrolki sandbox przez użytkownika. Kiedy się to stanie, należy dołączyć komunikat do tej kontrolki: window.onload = function() { $("sandbox").innerHTML = "Kliknij w tym miejscu!
"; $("sandbox").onclick = function(ev) { ev = ev || window.event; $("sandbox").innerHTML = "Kliknięcie o " + new Date() + ". Zdarzenie: " + ev + "."; for (property in ev) { var message = " Właściwość " + property + ": " + ev[property] + "
"; $("sandbox").innerHTML += message; } }; }

Kliknięcie kontrolki sandbox wyzwala metodę obsługi zdarzenia, która wyświetla tekst powiązany ze zdarzeniem, widoczny na rysunku 2.3.

40

|

Rozdział 2. Wzorcowy samouczek

Rysunek 2.3. Tekst powiązany ze zdarzeniem

Przypisaliśmy zdarzenie $("sandbox").onclick do anonimowej funkcji odpowiedzialnej za jego obsługę. Jest to jeden z popularnych sposobów rejestrowania metod obsługi zdarzeń. Równie łatwo można zarejestrować metodę obsługi zdarzenia $("sandbox").onmouseover, jeśli potrzebne jest uchwycenie ruchu myszy, a nie kliknięcie. Przeglądarki zwykle generują obiekty zdarzeń z informacjami o tym, co się właśnie zdarzyło, na przykład z czasem czy lokalizacją kursora myszy. W zależności od przeglądarki informacje te są albo przekazywane do wywoływanej zwrotnie funkcji, albo przypisywane do globalnego zdarzenia window.event. Pierwszy wiersz wywoływanej zwrotnie funkcji sprawdza, czy obiekt ev ma poprawną wartość, dlatego można założyć, że w pozostałym kodzie tej funkcji ev poprawnie reprezentuje zgłoszone zdarzenie. Następnie metoda obsługi tego zdarzenia generuje szczegółowy raport dotyczący jego zajścia, wyświetlając w pętli wszystkie właściwości zdarzenia.

Ajaksyfikacja aplikacji sieciowej — jeden wzorzec naraz Wzorce nie zawsze związane są z ogólnym, całościowym projektem. Częściej służą do refaktoryzacji i rozszerzania istniejących systemów. Podstawowe technologie opisane w poprzednim punkcie można postrzegać także jako techniki służące do ajaksyfikacji standardowych aplikacji sieciowych, a nie tylko do tworzenia nowych programów bazujących na Ajaksie. Także wiele następnych wzorców można traktować jako techniki pozwalające usprawnić istniejące aplikacje Ajax. W podrozdziale przyjrzymy się, jak można stopniowo zastosować zestaw wzorców w celu rozbudowania aplikacji sieciowej. Na początku dla porównania opisana jest standardowa aplikacja, a tworzenie nowego programu rozpoczyna się w pierwszym kroku, w którym powstaje podstawowa wersja aplikacji Ajax. Łącznie potrzebne są cztery kroki. W dostępnych plikach znajdziesz pełny kod każdego kroku. Dlatego, jeśli zgubisz się w połowie drugiego kroku, możesz rozpocząć trzeci krok od nowa, używając kopii kodu z katalogu zawierającego kod ukończonego drugiego kroku. Zauważ, że wszystkie pliki aplikacji znajdują się w pojedynczym katalogu.

Ajaksyfikacja aplikacji sieciowej — jeden wzorzec naraz

|

41

Wprowadzenie — Ajaksagram w starym stylu W tym punkcie nie ma katalogu roboczego (pisanie kodu nie jest konieczne). Pełny kod przykładu znajduje się w pakiecie instalacyjnym w katalogu /tutorial/ajaxagram/. Wersja demonstracyjna aplikacji znajduje się w internecie pod adresem http://przyklady.helion.pl/ajaxwp/tutorial/ajaxagram/. Zaczniemy od znanego gruntu. Wersja wyjściowa aplikacji to zwykła aplikacja sieciowa — nie zawiera żadnych elementów technologii Ajax. Program pobiera słowo i wyświetla wszystkie jego anagramy, czyli wszystkie możliwe kombinacje liter (rysunek 2.4). Dla uproszczenia aplikacja nie sprawdza wyrazów względem słownika, aby znaleźć prawdziwe słowa, a w celu poprawy wydajności pole na dane wejściowe przyjmuje tylko pięć znaków. Nie będziemy tworzyć standardowej wersji aplikacji, ale możesz chcieć przejrzeć jej kod (znajdujący się w katalogu tutorial/ajaxagram/) i porównać go z wersją programu napisaną w technologii Ajax. Dostępne są dwa pliki z kodem źródłowym: anagram.php Ten plik zawiera logikę biznesową służącą do wyszukiwania anagramów, działającą po stronie serwera. Opis tej logiki znajduje się w punkcie „Logika biznesowa — usługa sieciowa zwracająca anagramy”. index.phtml Wygląd aplikacji, formularz przyjmujący dane i lista anagramów. Strona wysyła informacje do siebie samej. Obszar z wynikami zawsze pokazuje wszystkie anagramy utworzone w wyniku przesłania poprzedniego formularza (jeśli taka operacja miała miejsce).

Rysunek 2.4. Zwykły Ajaksagram

Krok 1. — Ajaksagram w stylu technologii Ajax Upewnij się, że znajdujesz się w katalogu roboczym aplikacji demonstracyjnej (/tutorial/ajaxagram/; ten sam katalog jest wykorzystywany we wszystkich krokach). W katalogu /tutorial/ajaxagram/ajaxified/ znajduje się pełny kod tego etapu wraz z pakietem instalacyjnym. Wersja demonstracyjna tego etapu znajduje się w internecie pod adresem http://przyklady.helion.pl/ajaxwp/tutorial/ajaxagram/ajaxified. Początkowa wersja w stylu Ajax przypomina nieco standardową wersję aplikacji. Jedyna różnica polega na tym, że strona nie wymaga odświeżania, kiedy słowo jest przekazywane przy użyciu technologii zdalnego wywoływania poleceń (zobacz wzorce zdalnego wywoływania poleceń w rozdziale 6.), a wyniki są aktualizowane przy użyciu manipulowania wyglądem (zobacz wzorce manipulowania wyglądem w rozdziale 5.). Tytułem wprowadzenia — w jednym katalogu utworzymy cztery pliki: 42

|

Rozdział 2. Wzorcowy samouczek

anagram.php Ten plik zawiera logikę biznesową służącą do wyszukiwania anagramów, która opisana jest w następnym punkcie. anagram.phtml Usługa sieciowa działająca po stronie serwera. Przyjmuje słowa i zwraca listę anagramów rozdzielonych przecinkami. index.html Wygląd aplikacji określany po stronie przeglądarki. Jest to zwykły plik HTML zawierający formularz i listę anagramów. ajaxagram.js Logika aplikacji działająca po stronie przeglądarki. Oczekuje na przesłanie formularza, przekazuje podane słowo do pliku anagram.phtml i odpowiednio zmienia wyświetlane dane. Rozpocznij tworzenie aplikacji od utworzenia nowego katalogu, na przykład tutorial/ajaxagram/ (jeśli jeszcze nie utworzyłeś katalogu tutorial/, powinieneś to zrobić). mkdir tutorial cd tutorial mkdir ajaxagram

W przypadku systemów uniksowych upewnij się, że uprawnienia odpowiadają wymaganiom serwera (na przykład utwórz wszystkie katalogi jako globalnie dostępne do odczytu i wykonywalne). Wszystkie pliki w opisanych niżej czterech etapach powinny znaleźć się w tym katalogu.

Logika biznesowa — usługa sieciowa zwracająca anagramy Rozpoczniemy od utworzenia usługi sieciowej, tworząc działający na zapleczu moduł służący jedynie do obsługi logiki biznesowej związanej z tworzeniem anagramów i niemający nic wspólnego z kodem HTML. Ponieważ jest to wyłącznie logika biznesowa, przedstawię jedynie cały plik i pominę szczegóły. Zapisz poniższy kod w pliku anagram.php (lub skopiuj plik z pakietu z kodem):

Dostępny jest także test, AnagramTest.php. Do dobrych praktyk należy testowanie w izolacji logiki biznesowej używanej na zapleczu. Jeśli chcesz uruchomić ten test, zainstaluj najpierw pakiet PHPUnit2 (http://www.phpunit.de/pocket_guide/3.0/en/index.html) i sprawdź w dokumentacji szczegóły dotyczące uruchamiania testów. Kiedy na serwerze znajduje się już logika biznesowa, potrzebna jest prosta nakładka udostępniająca tę logikę jako wygodną Usługę sieciową. Umieszczenie nakładki w odrębnym pliku pozwala oddzielić logikę biznesową od zagadnień związanych z wywoływaniem jej z poziomu przeglądarki. Utwórz więc plik anagrams.phtml zawierający poniższy kod:

Możesz przetestować usługę sieciową. Skieruj przeglądarkę pod adres http://localhost/tutorial/ ajaxagram/anagrams.phtml?word=ajax. Powinieneś zobaczyć listę oddzielonych przecinkami anagramów słowa „ajax”. Zauważ, że jest to surowa odpowiedź przystosowana do łatwego przetwarzania przy użyciu skryptów, a nie dane wyświetlane użytkownikowi. Skrypt musi jedynie przetworzyć otrzymane dane w celu przedstawienia wyników użytkownikowi.

44

|

Rozdział 2. Wzorcowy samouczek

Warstwa prezentacji — początkowy kod HTML Początkowy plik HTML zawiera podstawowe elementy wyświetlanych danych — formularz i listę anagramów — oraz dołącza wymagany kod JavaScript. Utwórz plik index.html zawierający poniższy kod:

AjaxPatterns.org — Ajaksagram (podstawowa wersja Ajax)

Ajaksagram (podstawowa wersja Ajax)

Znajdź anagramy!



Skieruj przeglądarkę do powyższej strony HTML. Powinieneś zobaczyć nagłówek oraz formularz, ale prawdopodobnie nie zobaczysz obszaru z wynikami, ponieważ początkowo jest on pusty. W powyższym kodzie HTML warto zwrócić uwagę na kilka elementów i porównać je z kodem pliku index.phtml ze standardowej wersji aplikacji. Po pierwsze, „formularz” nie jest prawdziwym elementem języka HTML, ponieważ przeglądarka nie musi przesyłać go na serwer. Za przesyłanie danych odpowiada skrypt. Po drugie, ponieważ plik nie zawiera formularza HTML, zamiast elementu submit należy użyć elementu button. Po trzecie, obszar results div jest pusty. Aplikacja zapełnia go za każdym razem, kiedy skrypt otrzyma listę anagramów z serwera. Ponadto warto zauważyć brak jakiegokolwiek kodu JavaScript w powyższym pliku. Cała logika aplikacji znajduje się w odrębnym pliku, ajaxagram.js.

Logika aplikacji — kod JavaScript Ostatnim zadaniem jest napisanie kodu logiki aplikacji działającego jako łącznik między uruchamianą po stronie serwera usługą sieciową a stroną internetową przetwarzaną po stronie przeglądarki. Utwórz plik ajaxagram.js zawierający poniższe ogólne metody, opisane wcześniej w punktach „w okamgnieniu”. Po dodaniu pozostałego kodu JavaScript poniższe metody powinny znaleźć się na końcu pliku. // -- Funkcje ogólne ---------------------------------------------------------function createXMLHttpRequest() { try { return new ActiveXObject("Msxml2.XMLHTTP"); catch (e) {} try { return new ActiveXObject("Microsoft.XMLHTTP"); catch (e) {} try { return new XMLHttpRequest(); } catch (e) {} alert("Brak obsługi XMLHttpRequest"); return null; } function $(id) { return document.getElementById(id); }

Ajaksyfikacja aplikacji sieciowej — jeden wzorzec naraz

|

45

Kod JavaScript musi jedynie obsługiwać cykl życia żądania, który składa się z trzech etapów:

1. Użytkownik klika przycisk findAnagrams. 2. Żądanie XMLHttpRequest przesyła słowo wejściowe word do usługi sieciowej anagrams.phtml. 3. Po przesłaniu przez serwer listy anagramów aplikacja aktualizuje jest anagrams. Utworzymy teraz trzy funkcje JavaScript, a każda z nich mniej więcej odpowiada jednemu z powyższych etapów. Pierwsza funkcja gwarantuje, że przycisk findAnagrams zgłosi poniższe żądanie: window.onload = function() { $("findAnagrams").onclick = function() { submitWord(); } }

Jeśli chcesz, możesz teraz przetestować działanie aplikacji. Po przesłaniu formularza powinieneś ujrzeć komunikat o błędzie, ponieważ metoda submitWord() nie jest jeszcze dostępna. Utworzymy teraz tę metodę, używając niemal tego samego szablonowego kodu co w punkcie „Zdalne wywoływanie poleceń w okamgnieniu”. function submitWord() { var xhr = createXMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState==4) { // Żądanie zostało przetworzone if (xhr.status==200) { var anagramsCSV = xhr.responseText; updateAnagramsDisplay(anagramsCSV); } else { alert("Wystąpił błąd."); } } } var word = $("word").value; xhr.open("GET", "anagrams.phtml?word="+word, true); xhr.send(null); }

Po dodaniu metody submitWord() przeglądarka może przesłać podane słowo do pliku anagrams.phtml. Można to sprawdzić, klikając przycisk Znajdź anagramy! i szukając w dziennikach serwera wywołań skierowanych do pliku anagrams.phtml. Można także kontrolować ruch pomiędzy przeglądarką a serwerem, używając narzędzia wspomnianego w punkcie „Śledzenie przepływu danych” w rozdziale 18. Po udanym zwróceniu sterowania przez skrypt aplikacja wywołuje metodę updateAnagramDisplay(). Metoda updateAnagramDisplay() przyjmuje listę anagramów rozdzielonych przecinkami, rozbija ją w celu utworzenia tablicy i wyświetla każdy anagram w odrębnym wierszu: function updateAnagramsDisplay(anagramsCSV) { $("results").innerHTML = ""; var anagrams = anagramsCSV.split(","); for (var i=0; i

Zestaw powiązanych usług tego typu tworzy interfejs API bazujący na HTTP i udostępniający funkcjonalność, która znajduje się na serwerze. Większość aplikacji Ajax ma dostęp do interfejsów API z poziomu przeglądarki poprzez Wywołania XMLHttpRequest i inne techniki zdalnego wywoływania poleceń. Ponadto niezależni producenci mogą uzyskać dostęp do usług sieciowych i używać ich we własnych aplikacjach — sieciowych lub nie.

Usługi sieciowe

|

101

Niniejszy punkt przedstawia jedynie zagadnienia związane z usługami sieciowymi. Trzeba podjąć wiele decyzji, projektując takie usługi do użytku we własnych aplikacjach. Czy usługa ma zwracać kod XML służący do przetwarzania w przeglądarce czy bezpośrednio wyświetlany kod HTML, a może dane w jeszcze innym formacie? Jak będzie wyglądał adres URL? Jakiego rodzaju dane wejściowe ma przyjmować usługa? Wszystkie te zagadnienia opisuje rozdział 9.

Decyzje Jak dana usługa sieciowa będzie używana? Najważniejszą decyzją dotyczącą usługi sieciowej, podobnie jak w przypadku każdego interfejsu API, jest określenie sposobu jej używania. W szczególności trzeba zdecydować, czy dana usługa będzie dostępna dla niezależnych producentów jako ogólny interfejs tworzonego systemu czy tez ma być dostępna jedynie dla aplikacji Ajax działających w przeglądarkach. Jeśli wybierzesz to drugie rozwiązanie, możesz zastosować podejście bazujące na funkcjach i utworzyć projekt usługi sieciowej pod kątem aplikacji uruchamianej w przeglądarce. Taką sytuację opisuje punkt Symulowanie usługi w rozdziale 19. Jeśli niezależni użytkownicy mają mieć dostęp do usługi, jej tworzenie staje się balansowaniem między potrzebami użytkowników a wymaganiami aplikacji uruchamianej w przeglądarce. Ponieważ użytkownicy prawdopodobnie będą komunikować się z serwerem z poziomu bardziej wydajnych środowisk niż standardowa przeglądarka internetowa, możesz musieć dodać pewną nadmiarowość do obsługi klientów każdego typu. Interfejs API przeznaczony dla niezależnych użytkowników może być bardziej ogólny, podczas gdy przeglądarki czasem potrzebują interfejsu mającego pewne dane o aplikacji. W ekstremalnych sytuacjach usługa może śledzić stan aplikacji i wyświetlać kod HTML generujący elementy widoczne dla użytkownika.

Jak można zablokować używanie usługi przez niezależnych użytkowników? Usługi sieciowe działają w synergii z technologią Ajax, ponieważ aplikacje Ajax mogą komunikować się z tym samym interfejsem, który dostępny jest dla niezależnych klientów. Jednak czasem usługa sieciowa ma być niedostępna dla niezależnych użytkowników. Może to być trudne w przypadku publicznego internetu, ponieważ w zasadzie wszystkie zasoby, do jakich mają dostęp przeglądarki, są także dostępne dla innych klientów. Dlatego możesz spędzić wieki, projektując elegancką, przejrzystą usługę sieciową, dzięki której działanie skryptów po stronie przeglądarki jest możliwie bezbolesne, tylko po to, aby odkryć, że niezależni użytkownicy zbierają owoce Twojej pracy. Nie ma uniwersalnego rozwiązania tego problemu, ale poniżej przedstawiam kilka wskazówek: • Żądaj, aby użytkownicy zalogowali się przy użyciu uwierzytelnionego adresu poczty

elektronicznej, zanim ich aplikacje będą mogły połączyć się z usługą sieciową. Możesz następnie użyć ciasteczek lub nadać niepowtarzalny identyfikator sesji w celu uwierzytelnienia użytkownika. • Zastanów się nad użyciem systemu takiego jak Captcha (http://www.captcha.net/), w którym

użytkownik musi wykonać operację niemożliwą do przeprowadzenia przez zautomatyzowany skrypt. Możesz wymagać wykonania takiej operacji na przykład raz na godzinę. 102

|

Rozdział 6. Zdalne wywoływanie poleceń

• Możesz użyć standardowych technik filtrowania, na przykład blokowania określonych

adresów IP i odmowy obsługi żądań, jeśli nadchodzą zbyt często.

• Używaj zaciemniania kodu i szyfrowania. Ten pomysł bazuje na sprytnej przeciwdziałającej

spamowi wtyczce agencji Wordpress, HashCash (http://wp-plugins.net/plugin/wp-hashcash/). Zwracając specjalnie przystosowany fragment zaciemnionego kodu JavaScript służący do odszyfrowywania zawartości usługi sieciowej, możesz zmusić programistów aplikacji klienckich do zrobienia dwóch rzeczy. Po pierwsze, „włamania” się do silnika języka JavaScript w celu wykonania kodu, a po drugie, skonsumowania zasobów utworzonych w wyniku odszyfrowania danych. Żadna z tych operacji nie jest niewykonalna, ale powodują one, że korzystanie z usługi staje się mniej atrakcyjne. Niestety, to rozwiązanie narusza przejrzystą naturę usług sieciowych, choć ukrycie skomplikowanych szczegółów powinno być możliwe dzięki odpowiedniemu interfejsowi API w języku JavaScript.

Przykłady praktyczne Prawie każda aplikacja Ajax korzysta z pewnego rodzaju usługi sieciowej. W poniższych przykładach przyjrzymy się publicznym interfejsom API przeznaczonym do użytku przez niezależnych klientów, a następnie kilku usługom dostępnym jedynie dla odpowiadających im skryptów technologii Ajax wykonywanych w przeglądarce.

Interfejs API Technorati Autorzy witryny Technorati (http://technorati.com) udostępniają wyszukiwarkę niezależnym klientom. Aby przesłać zapytanie, prześlij polecenie typu HTTP GET w poniższym adresie URL: http://api.technorati.com/search?key=1234&query=serendipity, gdzie „1234” to Twój osobisty klucz do witryny Technorati, a „serendipity” to zapytanie. Usługa zwraca dokument XML z listą wyników.

NetVibes NetVibes (http://netvibes.com) to portal napisany w technologii Ajax, który pobiera informacje z kilku usług sieciowych. Aby pobrać dane dotyczące pogody, przeglądarka wywołuje usługę w poniższy sposób: http://netvibes.com/xmlProxy.php?url=http%3A//xoap.weather.com/weather/local/ USNY0996%3Fcc%3D*%26unit%3D*26dayf%3d4

Usługa jest tak naprawdę pośrednikiem, ponieważ przekazuje dane do rzeczywistej usługi informującej o pogodzie, dostępnej na stronie weather.com. Jak widać w powyższym adresie URL, można określić parametry takie jak lokalizacja (USDNYC0996), jednostki (d) i liczbę dni naprzód (4). Dane wyjściowe to dokument XML bez żadnych znaczników HTML:

en_US MEDIUM ...

... N/A 46 7:18 AM

Usługi sieciowe

|

103

4:34 PM ...

...

Wish-O-Matic Witryna Wish-O-Matic autorstwa Alexandra Kirka (http://wish-o-matic.com) informuje o pozycjach rekomendowanych przez Amazon. Przeglądarka przekazuje poniższe informacje do usługi dostępnej pod adresem http://alexander.kirk.at/wish-o-matic/search=grand&catalog=Books&page=1&locale=US&_=. Następnie usługa zwraca listę książek. W przeciwieństwie do poprzedniej usługi ta zwraca dane jako czysty kod HTML, gotowy do natychmiastowego wyświetlenia w przeglądarce. search=grand&catalog=Books&page=1&locale=US&_=

...

Author: Kevin Roderic Title: Wilshire Boulevard: The Grand Concourse of Los Angeles ISBN: 1883318556 My friend likes this item!

< prev | next >

Przykładowy kod: testAjaxCaller według wzorców Ajax AjaxCaller to klient HTTP bazujący na kodzie JavaScript używany w przykładach pojawiających się w tej książce (klient ten opisany jest w dalszej części rozdziału w punkcie „Przykładowy kod: testAjaxCaller według wzorców Ajax” we wzorcu Wywołania XMLHttpRequest). Tu przyjrzymy się usłudze sieciowej używanej w aplikacji testAjaxCaller (http://przyklady.helion.pl/ajaxwp/ run/testAjaxCaller/). Jest to bardzo prosta usługa, która jedynie zwraca otrzymane dane. Funkcja httpLogger rozpoczyna się od wyświetlenia metody, przy użyciu której zostało przesłane żądanie (na przykład „GET” lub „POST”), adresu URL żądania oraz zmiennych CGI obecnych w adresie URL i ciele żądania: echo echo echo echo

"

Metoda przesyłania żądania: $requestMethod

"; "

Adres URL żądania: ".$_SERVER['REQUEST_URI']."

"; "

Zmienne w adresie URL: ".print_r($_GET, TRUE)."

"; "

Zmienne w ciele żądania: ".print_r($_POST, TRUE)."

";

Odrębna funkcja służy do przetwarzania ciała, które także można wyświetlić przy użyciu zwykłych instrukcji print lub echo: function readBody() { $body=""; $putdata = fopen("php://input", "r"); while ($block = fread($putdata, 1024)) { $body = $body.$block; } fclose($putdata); return $body; }

104

|

Rozdział 6. Zdalne wywoływanie poleceń

Wzorce powiązane Wzorce dla usług sieciowych Wszystkie wzorce dla usług sieciowych (rozdział 9.) wyjaśniają różne strategie projektowania usług o przejrzystych i łatwych w pielęgnacji interfejsach.

Wzorce zdalnego wywoływania poleceń Pozostałe wzorce zdalnego wywoływania poleceń wyjaśniają, w jaki sposób przeglądarka wywołuje usługi sieciowe przechowywane po stronie serwera.

Pośrednik między domenami Głównym celem bieżącego wzorca jest przedstawienie wskazówek dotyczących projektowania własnych wzorców dla usług sieciowych. Jednak czasem zdarza się, że skrypt działający po stronie serwera musi korzystać z zewnętrznej usługi sieciowej, jak opisuje to wzorzec Pośrednik między domenami (rozdział 10.).

Symulowanie usług Symulowanie usług (rozdział 19.) opisuje „sztuczne” usługi zwracające gotowe odpowiedzi. Jest to narzędzie przydatne w czasie tworzenia elementów aplikacji Ajax przetwarzanych po stronie przeglądarki.

Testowanie usług Wygodną rzeczą związaną z usługami sieciowymi, w porównaniu z większością innych aspektów tworzenia aplikacji sieciowych, jest łatwość pisania zautomatyzowanych testów, jak opisuje to wzorzec Testowanie usług (rozdział 19.).

Wywołania XMLHttpRequest Wywołania, Wywołania zwrotne, Wczytywanie, Pobieranie, Na żywo, Zapytanie, Zdalne wywołania, Zdalne skrypty, Synchronizowanie, Synchronizacja, Przesyłanie, XMLHttpRequest

Rysunek 6.2. Wywołania XMLHttpRequest Wywołania XMLHttpRequest

|

105

Historia zadania Barbara Superkiecka kupuje różne przedmioty w witrynie hurtowni internetowej. Za każdym razem, kiedy dodaje przedmiot do koszyka zakupów, witryna generuje obiekt XMLHttpRequest zapisujący najnowszą zawartość koszyka. Przesyłanie formularza nie jest konieczne, dzięki czemu przedmioty są dodawane natychmiast, co oszczędza czas Barbary, jak również pomaga jej zrozumieć, co się dzieje.

Problem Jak przeglądarka może komunikować się z serwerem?

Czynniki • Aplikacje Ajax wymagają obsługi komunikacji między przeglądarką i serwerem. Prze-

glądarka musi przesyłać na serwer informacje generowane przez użytkownika i pobierać nowe informacje zwracane przez serwer.

• Ponieważ aplikacje Ajax powinny działać w sposób płynny i ciągły, komunikacja między

przeglądarką i serwerem nie może być natrętna.

• Aplikacje Ajax powinny być wysoce reaktywne, dlatego wywołania powinny wymagać

przesyłania jak najmniejszej ilości danych.

• Ponieważ sieć jest często niestabilna, a jej wydajność się zmienia, wywołania powinny być

asynchroniczne, co pozwoli użytkownikowi pracować w czasie przetwarzania wywołań.

Rozwiązanie Użyj obiektów XMLHttpRequest do obsługi komunikacji między przeglądarką i serwerem. W języku JavaScript nie ma przenośnych mechanizmów służących do obsługi ogólnej komunikacji w sieci. To ograniczenie zawsze występowało (i prawdopodobnie będzie występować) ze względów bezpieczeństwa. Jednak dzięki obiektom XMLHttpRequest — dostępnym obecnie we wszystkich głównych przeglądarkach — w kodzie JavaScript można kierować wywołania HTTP z powrotem do serwera ich pochodzenia i pobierać zwracane wyniki. Ten mechanizm umożliwia tworzenie dobrze dopasowanych wywołań do serwera i odpowiednią obsługę odpowiedzi, co jest niemożliwe w przypadku tradycyjnego przesyłania stron, które powoduje całkowite odświeżenie strony. Wersja demonstracyjna programu (http://przyklady.helion.pl/ ajaxwp/run/xmlHttpRequestCall) ilustruje zagadnienia związane z kodem pojawiające się w tym rozwiązaniu, a przedstawione fragmenty kodu luźno nawiązują do tego programu. Ten wzorzec używa usługi sieciowej zwracającej sumę, opisanej wcześniej we wzorcu Usługa sieciowa. Adres URL tej usługi sieciowej to http://przyklady.helion.pl/ajaxwp/run/xmlHttpRequestCall/ sumGet.phtml?figure1=5&figure2=10. Usługa zwraca samą sumę. W tym przypadku jest to „15”. Możesz sprawdzić działanie usługi, wpisując pełny adres URL w przeglądarce, ale w tym przykładzie chcemy wywołać usługę z poziomu języka JavaScript i przechwycić wynik. Poniżej znajduje się bardzo podstawowa technika: var xhReq = new XMLHttpRequest(); xhReq.open("GET", "sumGet.phtml?figure1=5&figure2=10", false); xhreq.send(null); var serverResponse = xhReq.responseText; alert(serverResponse); // Wyświetla „15”

106

|

Rozdział 6. Zdalne wywoływanie poleceń

Sekwencja poleceń rozpoczyna się od utworzenia nowego obiektu XMLHttpRequest. Następnie instrukcja xsReq.open() przygotowuje wywołanie testowej usługi sieciowej, sumGet.phtml (kod działa w tym samym miejscu, dlatego nie trzeba podawać kwalifikatora domeny ani ścieżki). GET to używana metoda przesyłania żądania. Argument false informuje, że wywołanie jest synchroniczne, co oznacza, że wykonywanie kodu zostanie zablokowane do czasu otrzymania odpowiedzi. Polecenie send kończy żądanie. Ponieważ wywołanie jest synchroniczne, wynik jest dostępny bezpośrednio po wykonaniu ostatniego wiersza kodu. Obiekt XMLHttpRequest zapisuje odpowiedź serwera, a dostęp do niej można uzyskać poprzez pole responseText. Powyższy przykład pokazuje, że podstawowa technika jest dość prosta. Jednak trzeba pamiętać, że jej najprostsza postać nie jest odpowiednia dla kodu produkcyjnego. Trzeba zadać sobie kilka podstawowych pytań, na które odpowiedzi znajdziesz w tym rozwiązaniu: • Jak można uzyskać dostęp do obiektu XMLHttpRequest? • Jak działają asynchroniczne wywołania? • W jaki sposób można obsługiwać błędy? • Co się stanie, jeśli usługa wymaga żądań typu POST lub PUT, a nie GET? • Jakie ograniczenia związane są z zewnętrznymi domenami? • Jak można obsługiwać odpowiedzi XML? • Jak wygląda interfejs API?

Czytając o tych zagadnieniach, pamiętaj, że dostępnych jest wiele, wiele bibliotek do obsługi zdalnego wywoływania poleceń (zobacz dodatek A). Większość programistów nie powinna bezpośrednio używać obiektów XMLHttpRequest. Mimo dostępności tych bibliotek warto znać możliwości i ograniczenia Wywołań XMLHttpRequest, a także innych technik zdalnego wywoływania poleceń. Ta wiedza pomoże Ci wybrać najbardziej odpowiednią bibliotekę, a także poradzić sobie z błędami, na jakie możesz natrafić.

Tworzenie obiektów XMLHttpRequest W większości przeglądarek XMLHttpRequest to standardowa klasa języka JavaScript, dlatego wystarczy utworzyć jej egzemplarz. Jednak twórcą klasy XMLHttpRequest jest Microsoft, a do wersji IE 7 obiekty te były dostępne w przeglądarkach IE jedynie jako obiekty ActiveX. Aby było jeszcze ciekawiej, dostępne są różne wersje tych obiektów. Poniższy kod przedstawia funkcję fabryczną, która działa we wszystkich przeglądarkach obsługujących obiekty XMLHttpRequest: function createXMLHttpRequest() { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {} try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} alert("Brak obsługi XMLHttpRequest"); return null; } ... var xhReq = createXMLHttpRequest();

Jeśli chcesz zapewnić maksymalną przenośność, musisz używać powyższej funkcji. Po utworzenie obiektu jego podstawowa funkcjonalność i interfejs API są dość spójne w różnych przeglądarkach, jednak należy pamiętać o przeprowadzeniu dokładnych testów, ponieważ w przypadku niektórych przeglądarek występują drobne różnice w implementacji omawianej klasy.

Wywołania XMLHttpRequest

|

107

Jeśli jesteś zainteresowany tym zagadnieniem, punkt „Rozwiązanie” we wzorcu Strumieniowanie HTTP (przedstawiony w dalszej części tego rozdziału) zawiera opis jednej niespójności tego typu. Możesz także powtórnie wykorzystać obiekt XMLHttpRequest. Warto tak postępować w celu uniknięcia wyciekania pamięci. Aby zapewnić bezpieczeństwo, należy tworzyć nowe wywołanie tylko wtedy, kiedy żadne inne nie jest dostępne. Jak wyjaśnia to poniższy punkt, można sprawdzić status wywołania, a nowe wywołanie należy tworzyć tylko wtedy, kiedy wartość statusu to 0 lub 4. Dlatego, jeśli wszystkie inne środki zawiodą, najpierw należy wywołać metodę abort(), aby wyzerować status.

Wywołania asynchroniczne Wspomniałem wcześniej w punkcie „Rozwiązanie”, że w trybie synchronicznym „kod zostaje zablokowany do czasu nadejścia odpowiedzi”. Niektórzy uważni Czytelnicy prawdopodobnie skrzywili się na myśl o takiej możliwości. Wszyscy wiemy, że przetworzenie niektórych żądań zajmuje dużo czasu, a niektóre w ogóle nie zostają obsłużone. Biada użytkownikowi, jeśli skrypt działający po stronie serwera uruchomi nieskończoną pętlę. W praktyce Wywołania XMLHttpRequest prawie zawsze powinny być asynchroniczne. Oznacza to, że przeglądarka i użytkownik mogą kontynuować pracę w oczekiwaniu na nadejście odpowiedzi. Skąd wiadomo, że odpowiedź jest gotowa? Stan readyState obiektu XMLHttpRequest zawsze odzwierciedla, w jakim miejscu cyklu życia znajduje się wywołanie. Kiedy obiekt powstaje, jego stan to 0. Po wywołaniu metody open() stan równa się 1. Stan rośnie do czasu zwrócenia odpowiedzi przez serwer, kiedy to jego wartość jest równa 4. Dlatego, aby przechwycić odpowiedź, trzeba czekać dopóty, dopóki właściwość readyState nie przyjmie wartości 4. Jest to dość łatwe rozwiązanie, ponieważ obiekty XMLHttpRequest zgłaszają zdarzenia readystatechange. Można zadeklarować zwrotnie wywoływaną funkcję, używając pola onreadystatechange. Funkcja ta będzie otrzymywała informacje o każdej zmianie stanu. Stany poniżej 4 nie są zbyt użyteczne, a poza tym ich wartości są niespójne w poszczególnych przeglądarkach (http://www.quirksmode.org/blog/archives/2005/09/xmlhttp_ notes_r_2.html). Dlatego przeważnie istotne jest jedynie pytanie: „Czy jesteś w stanie 4 (czyli gotowy) czy nie?”. Poniżej znajduje się asynchroniczna wersja przedstawionego wcześniej kodu utworzona na podstawie wszystkich powyższych informacji: var xhReq = createMLHttpRequest(); xhReq.open("GET", "sumGet.phtml?figure1=5&figure2=10", true); xhReq.onreadystatechange = onSumResponse; xhReq.send(null); ... function onSumResponse() { if (xhReq.readyState != 4) { return; } var serverResponse = xhReq.responseText; ... }

Jak widać, zwrotnie wywoływana funkcja zadeklarowana jest we właściwości onreadystatechange obiektu XMLHttpRequest. Ponadto trzeci argument funkcji open() ma teraz wartość true. Ten argument jest nazywany „flagą asynchroniczności”, co wyjaśnia, dlaczego należy ustawić go na wartość true. Zwrotnie wywoływana funkcja, onSumResponse, jest rejestrowana

108

|

Rozdział 6. Zdalne wywoływanie poleceń

przy użyciu właściwości onreadystatechange i zawiera ochronną klauzulę, która przed dalszym przetwarzaniem pozwala się upewnić, że wartość pola readyState to 4. Na tym etapie w zmiennej responseText znajduje się cała odpowiedź. Język JavaScript obsługuje także „domknięcia” — rodzaj funkcji anonimowych — które pozwalają zastosować bardziej zwięzłą szablonową strukturę do obsługi wywołań asynchronicznych: var xhReq = createXMLHttpRequest(); xhReq.open("get", "sumget.phtml?figure1=10&figure2=20", true); xhReq.onreadystatechange = function() { if (xhReq.readyState != 4) { return; } var serverResponse = xhReq.responseText; ... }; xhReq.send(null);

Staraj się oszczędnie używać domknięć, ponieważ za każdym razem definiujesz nową funkcję. Jest to wolniejsze rozwiązanie niż korzystanie z istniejących funkcji, a ponadto może prowadzić do wyciekania pamięci. Asynchroniczne wywołania są kluczowe, jednak w większym stopniu narażone na błędy. Jeśli przyjrzysz się mechanizmowi wywołań zwrotnych, możesz zauważyć potencjalne zagrożenie drobnym, ale istotnym błędem. Problem występuje, kiedy ten sam egzemplarz obiektu XMLHttpRequest zostanie równolegle użyty do obsługi różnych wywołań. Jakie informacje otrzyma wywoływana zwrotnie funkcje, jeśli wywołanie drugie zostanie wykonane w czasie, kiedy obiekt wciąż oczekuje na odpowiedź z wywołania pierwszego? Możliwa jest nawet zmiana samej funkcji wywoływanej zwrotnie przed zwróceniem odpowiedzi przez pierwsze wywołanie. Na szczęście są sposoby rozwiązania tego problemu. Są one tematem wzorca Śledzenie wywołań opisanego w rozdziale 10.

Wykrywanie błędów Czasem żądanie nie zwraca odpowiedzi zgodnej z oczekiwaniami lub w ogóle jej nie zwraca. Skrypt służący do obsługi wywołania może być niepoprawny, a błąd może się znajdować także na serwerze. Zapewnienie asynchroniczności to pierwszy krok w kierunku rozwiązania takich problemów, ponieważ gwarantuje, że aplikacja nie zostanie zablokowana. Ale potrzeba czegoś więcej. Aby wykryć błąd występujący po stronie serwera, można sprawdzić status odpowiedzi, używając flagi status obiektu XMLHttpRequest. Status odpowiedzi to standardowy kod protokołu HTTP. Na przykład, jeśli zasób jest niedostępny, pole XMLHttpRequest.status przyjmie niesławną wartość „404”. W większości przypadków można założyć, że wartości powyżej 200 to błędy. Sugeruje to umieszczenie nowego testu w zwrotnie wywoływanej funkcji przedstawionej w poprzednim punkcie: xhReq.onreadystatechange = function() { if (xhReq.readyState != 4) { return; } if (xhReq.status != 200) { var serverResponse = xhReq.responseText; ... };

Wywołania XMLHttpRequest

|

109

To doskonałe rozwiązanie, jeśli przeglądarka wie, jaki błąd wystąpił, jednak czasem żądanie może zostać na zawsze utracone. Dlatego zwykle przydatna jest także pewna odmiana mechanizmu sprawdzania limitu czasu (http://ajaxblog.com/archives/2005/06/01/async-request-over-an-unreliable-network). Możesz użyć zegara do śledzenia przebiegu sesji, jak opisuje to wzorzec Planowanie. Jeśli obsługa żądania trwa zbyt długo, zegar o tym informuje i można obsłużyć błąd. Obiekt XMLHttpRequest udostępnia funkcję abort(), którą należy wywoływać w sytuacji przekroczenia limitu czasu. Poniżej znajduje się przykładowy kod: var xhReq = createXMLHttpRequest(); xhReq.open("get", "infiniteLoop.phtml", true); // Serwer utknął w pętli. var requestTimer = setTimeout(function() { xhReq.onreadystatechange = function() { if (xhReq.readyState != 4) { return; } clearTimeout(requestTimeout); if (xhReq.status != 200) { // Obsługa błędów, na przykład wyświetlanie na stronie komunikatu o błędzie return; } var serverResponse = xhReq.responseText; ... }; xhReq.send(null);

W porównaniu z poprzednim przykładem nowy kod zawiera zegar. Funkcja wywoływana zwrotnie przy wystąpieniu zdarzenia onreadystatechange() zeruje zegar po otrzymaniu pełnej odpowiedzi (nawet jeśli jest ona błędna). Jeśli aplikacja nie wyzeruje zegara, poinformuje on o przekroczeniu limitu, a wtedy sekwencja setTimeout wywoła funkcję abort() i będzie można podjąć działania naprawcze.

Obsługa żądań POST oraz żądań innych typów Do tej pory żądaniami były proste zapytania GET — wystarczało przekazać adres URL i pobrać odpowiedź. Jak opisuje to wzorzec Usługi REST w rozdziale 9., w projektach produkcyjnych trzeba obsługiwać także żądania innych typów. Na przykład żądania POST nadają się do obsługi wywołań, które wpływają na stan serwera lub powodują wczytywanie dużych ilości danych. Aby zilustrować tę technikę, utwórzmy nową usługę, sumPostGeneric.phtml, która wykonuje te same operacje co postGet.phtml, ale przy użyciu komunikatu POST. Usługa ta jest „uniwersalna”, ponieważ wczytuje cały tekst ciała komunikatu, inaczej niż w przypadku przesyłania formularzy w stylu CGI. W tym przypadku usługa oczekuje ciała zawierającego tekst typu „Oblicz sumę: 5+6” i zwraca wynik:

110

|

Rozdział 6. Zdalne wywoływanie poleceń

Aby przesłać dowolne ciało w komunikacie POST, należy nadać obiektowi XMLHttpRequest typ żądania POST i przekazać ciało jako argument funkcji send(). Warto zauważyć, że w przypadku komunikatów GET funkcja send() nie ma argumentów, ponieważ ciało nie ma treści. var xhreq = createxmlhttprequest(); xhreq.open("post", "sumPostGeneric.phtml", true); xhreq.onreadystatechange = function() { if (xhreq.readystate != 4) { return; } var serverResponse = xhreq.responsetext; ... }; xhreq.send("Oblicz sumę: 5+6");

Często przekazywane są pary klucz-wartość i komunikat powinien wyglądać tak, jakby został przesłany przy użyciu formularza bazującego na komunikatach POST. Warto tak postępować, ponieważ jest to bardziej standardowa technika, a biblioteki dostępne po stronie serwera ułatwiają pisanie usług sieciowych przyjmujących standardowe dane formularza. Usługa przedstawiona w poniższym fragmencie kodu, sumPost.php, pokazuje, jak PHP ułatwia przesyłanie takich danych, a zadanie to jest równie łatwe w przypadku większości języków:

Aby skrypt przeglądarki mógł przesłać dane w stylu CGI, potrzebne są dwa dodatkowe kroki. Po pierwsze, trzeba zadeklarować styl w nagłówku „Content-Type”. Jak pokazuje to poniższy kod, obiekt XMLHttpRequest umożliwia bezpośrednie ustawianie nagłówków żądania. Drugi etap polega na umieszczeniu w ciele par nazwa-wartość: var xhreq = createxmlhttprequest(); xhreq.open("post", "sumPostForm.phtml", true); xhReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhreq.onreadystatechange = function() { if (xhreq.readystate != 4) { return; } var serverresponse = xhreq.responsetext; ... }; xhreq.send("Oblicz sumę: 5+6");

Komunikaty GET i POST są wszechobecne, ale wzorzec Usługi REST pokazuje, że czasem potrzebne są inne metody przesyłania żądań, na przykład PUT lub DELETE. Nie trzeba wykonywać żadnych specjalnych operacji w celu obsługi tych metod. Wystarczy ustawić typ żądania w metodzie open() i przekazać w metodzie send() odpowiednie ciało (przekazywany element w przypadku żądań PUT i argument null w przypadku komunikatów DELETE).

Ograniczenia związane z zewnętrznymi domenami Częstą reakcją po odkryciu możliwości, jakie dają obiekty XMLHttpRequest, jest rozpoczęcie rozmyślań o interfejsie, który pobierałby zawartość z popularnych witryn internetowych i umieszczał ją w jednej wielkiej zupie a’la Web 2.0. Niestety, nie jest to takie proste z powodu kluczowej zasady bezpieczeństwa stosowanej we wszystkich najważniejszych przeglądarkach — obiekty XMLHttpRequest mają dostęp jedynie do treści pochodzącej z serwera pochodzenia. Jeśli aplikacja znajduje się pod adresem http://ajax.shop/admin, obiekty XMLHttpRequest mają dostęp do stron http://ajax.shop/admin/products.html czy http://ajax.shop/products/contents.html, ale nie powinna mieć dostępu do strony http://books.ajax.shop/contents.html, a już na pewno nie będzie miała dostępu do strony http://google.com.

Wywołania XMLHttpRequest

|

111

„Zasada tego samego pochodzenia” (lub „zasada tej samej domeny”) (http://www.mozilla.org/ projects/security/components/same-origin.html) powinna być znana twórcom apletów Java i aplikacji Flash, gdzie jest stosowana od zawsze. Służy ona zapobieganiu wszelkim nadużyciom, takim jak przechwytywanie poufnej zawartości serwera przez złośliwe skrypty i kopiowanie jej na inny serwer, kontrolowany przez te skrypty. Niektórzy twierdzili, że jest to zbyt poważne ograniczenie, ponieważ większość zagrożeń, którym ma zapobiegać, może powstać także w wyniku innych działań (http://spaces.msn.com/members/siteexperts/Blog/cns!1pNcL8JwTfkkjv4gg6LkVCpw!2085.entry). Jednak nie należy beztrosko lekceważyć ograniczeń tego typu. Te zasady prawdopodobnie będą obowiązywały przez długi czas, dlatego lepiej jest nauczyć się je respektować. Znając ograniczenia związane z pochodzeniem, zastanów się, jak działają witryny Ajax udostępniające treść innych stron (http://housingmaps.com). Transfer danych między domenami zwykle przechodzi przez serwer pochodzenia, który działa jako rodzaj pośrednika — lub tunel — pozwalając obiektom XMLHttpRequest komunikować się z zewnętrznymi domenami. Punkt Pośrednik między domenami (rozdział 10.) dokładnie opisuje ten wzorzec, a w punkcie „Alternatywy” znajduje się lista sprytnych sztuczek, które pozwalają pominąć ograniczenia związane z serwerem pochodzenia.

Odpowiedzi w formacie XML W dotychczasowych analizach pominąłem najważniejszego gracza — format XML. Obiekty XMLHttpRequest, jak sama nazwa wskazuje, zostały początkowo zaprojektowane z myślą właśnie o formacie XML. Jak już widziałeś, obiekty tego typu przyjmują odpowiedzi dowolnego rodzaju, co więc specjalnego jest w XML? Przy użyciu obiektów XMLHttpRequest dowolną odpowiedź można odczytać poprzez pole responseText, ale dostępny jest jeszcze jeden akcesor — responseXML. Jeśli nagłówek odpowiedzi informuje, że jej zawartość to dokument XML, a tekst odpowiedzi to poprawny łańcuch znaków XML, wtedy akcesor responseXML zwraca obiekt DOM powstały w wyniku przetworzenia dokumentu XML. Wzorce służące do Manipulowania wyglądem (rozdział 5.) ilustrują, jak przy użyciu języka JavaScript można manipulować modelem DOM. W tamtych wzorcach istotny był tylko jeden szczególny model DOM — dokument HTML (lub XHTML) reprezentujący bieżącą stronę internetową. Jednak równie łatwo można manipulować dowolnymi innymi modelami DOM. Dlatego czasem wygodnie jest pobierać z usługi sieciowej dane w formacie XML i manipulować odpowiadającym im modelem DOM. Wymaganiem wstępnym w tym przykładzie jest Usługa sieciowa (zobacz wcześniejszą część rozdziału) zwracająca poprawny dokument XML. Jest wiele bibliotek i platform służących do automatycznego generowania dokumentów XML na podstawie baz danych, obiektów tworzonych w kodzie, plików i innych elementów. Jednak nie myśl, że musisz poznać działanie wymyślnej biblioteki do obsługi XML, aby móc utworzyć usługę sieciową zwracająca dane w tym formacie, ponieważ przynajmniej w przypadku prostych danych całkiem łatwo jest samodzielnie napisać potrzebny kod. Usługa musi jedynie zwracać nagłówek Content-type informujący o tym, że zawartość komunikatu ma format XML, po czym należy podać treść dokumentu XML. Poniżej znajduje się przystosowana do formatu XML wersja usługi zwracającej sumę liczb. Ta wersja zwraca dokument XML zawierający dane wejściowe oraz wynik w postaci sumy:

112

|

Rozdział 6. Zdalne wywoływanie poleceń



Sekwencja wywoływanych poleceń jest taka sama jak poprzednio, ale wywoływana zwrotnie funkcja powinna teraz pobierać wyniki przy użyciu akcesora responseXML. Następnie funkcja ta uzyskuje dostęp do zwykłego modelu DOM i może sprawdzać jego zawartość przy użyciu standardowego interfejsu API: var xhReq = createXMLHttpRequest(); xhReq.open("GET", "sumXML.phtml?figure1=10&figure2=20", true); xhReq.onreadystatechange = function() { if (xhReq.readyState != 4) { return; } xml = xhReq.responseXML; var figure1 = xml.getElementsByTagName("figure")[0].firstChild.nodeValue; var figure2 = xml.getElementsByTagName("figure")[1].firstChild.nodeValue; var sum = xml.getElementsByTagName("outputs")[0].firstChild.nodeValue; ... }; xhReq.send(null); });

Nazwa „XMLHttpRequest” odzwierciedla dwie podstawowe funkcje obiektów tej klasy: obsługę żądań HTTP oraz przekształcanie odpowiedzi mających format XML. Ta pierwsza funkcja jest kluczowa, a drugą najlepiej jest traktować jako dodatkową. Oczywiście istnieją dobre aplikacje używające odpowiedzi w formacie XML — zobacz wzorzec Komunikaty XML w rozdziale 9. oraz wzorce Wyspy danych XML i XSLT po stronie przeglądarki w rozdziale 11. — ale należy pamiętać, że format XML nie jest kluczowy dla systemów Ajax. Można także przesyłać dane w formacie XML z przeglądarki na serwer. W tym przypadku obiekty XMLHttpRequest nie udostępniają żadnej specjalnej funkcjonalności w zakresie przetwarzania dokumentów XML. Trzeba po prostu przekazać komunikat XML tak samo jak każdy inny i nadać żądaniu odpowiedni typ (na przykład POST lub PUT). Aby usługa sieciowa mogła pobierać dane, w kodzie JavaScript należy zadeklarować w nagłówku żądania typ zawartości jako XML: xhReq.setRequestHeader('Content-Type', "text/xml");

Interfejs API obiektów XMLHttpRequest — podsumowanie Wiesz już, jak wykonać typowe zadania przy użyciu XMLHttpRequest. Ten punkt przedstawia krótkie podsumowanie właściwości i metod tych obiektów przygotowane na podstawie artykułu z witryny Apple Developer Connection (http://developer.apple.com/internet/webcontent/ xmlhttpreq.html). Opisany interfejs API jest obsługiwany przez przeglądarki IE5+, rodzinę przeglądarek Mozilla (włączając w to wszystkie wersje przeglądarki Firefox) oraz Safari 1.2+.

Wywołania XMLHttpRequest

|

113

Obiekty XMLHttpRequest udostępniają następujące właściwości: onreadystatechange

Funkcja wywoływana zwrotnie informowana o zmianie stanu. 0=NIEAZAINICJOWANY, 1=W TRAKCIE POBIERANIA, 2=POBRANO, 3=INTERAKCJA i 4=ZAKOŃCZONO. Jak wyjaśnia to wcześniejszy punkt „Wywołania asynchroniczne”, stany 1–3 są wieloznaczne, a ich interpretacja różni się w zależności od przeglądarki. readyState

Stan w cyklu życia żądania. responseText

Odpowiedź serwera w postaci łańcucha znaków. responseXML

Odpowiedź serwera w postaci modelu DOM pod warunkiem, że pole „Content-Type” nagłówka odpowiedzi ma wartość „text/html”, a właściwość responseText to poprawny łańcuch znaków XML. status

Kod odpowiedzi HTTP (http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html) zwrócony przez serwer. Zwykle ta właściwość powinna mieć wartość 200. Większość wartości informuje o błędzie. statusText

Opis kodu odpowiedzi HTTP zwróconej przez serwer, na przykład „Not Found”. Metody obiektów XMLHttpRequest wymienione są poniżej: abort()

Zatrzymuje przetwarzanie żądania i ustawia jego właściwość readyState na zero. Zobacz punkt „Wykrywanie błędów” we wcześniejszej części rozdziału. getAllResponseHeaders()

Zwraca łańcuch znaków składający się z wszystkich nagłówków odpowiedzi oddzielonych, tak jak w oryginalnym komunikacie, znakiem nowego wiersza. getResponseHeader(headerField)

Zwraca wartość konkretnego pola nagłówka. open(requestMethod, url, asynchronousFlag, username, password) Przygotowuje obiekt XMLHttpRequest (zobacz wcześniejszy punkt „Rozwiązanie”). Jedynie dwa pierwsze parametry są wymagane. Pól username i password można użyć do uwie-

rzytelniania. send(bodyContent)

Przesyła komunikat wraz z określonym ciałem (pustym, jeśli ciało komunikatu nie ma zawartości, na przykład tak jak w żądaniach GET). Zobacz wcześniejszy punkt „Rozwiązanie”. setRequestHeader(headerField, headerValue)

Ustawia nagłówek żądania. Zobacz wcześniejszy punkt „Obsługa komunikatów POST i żądań innych typów”.

114

|

Rozdział 6. Zdalne wywoływanie poleceń

Decyzje Jaki rodzaj zawartości będzie udostępniać usługa sieciowa? Jak wspomniałem w rozwiązaniu, dokumenty XML to nie jedyny format danych, jaki potrafią obsługiwać obiekty XMLHttpRequest. Dopóty, dopóki można przetwarzać komunikat przy użyciu języka JavaScript, można korzystać z odpowiedzi różnych rodzajów. Wzorce dotyczące usług sieciowych opisują wiele typów odpowiedzi, włączając w to formaty HTML, XML, JSON i zwykły tekst.

Jak można kontrolować pamięć podręczną? Odpowiedzi XMLHttpRequest można przechowywać w pamięci podręcznej przy użyciu przeglądarki. Czasem jest to rozwiązanie korzystne, czasem nie, dlatego potrzebna jest pewne kontrola nad sposobem przechowywania danych. Kontrola pamięci podręcznej wiąże się z żądaniami bazującymi na komunikatach GET. Komunikatów tego typu należy używać do przesyłania zapytań służących tylko do odczytu, a do wywoływania operacji, które wpływają na stan serwera, należy korzystać z żądań innych typów. Jeśli użyjesz komunikatu POST do pobrania informacji, dane prawdopodobnie nie zostaną zapisane. Podobnie, jeśli użyjesz komunikatu GET do zmiany stanu, ryzykujesz, że wywołanie nie zawsze trafi na serwer, ponieważ przeglądarka może zapisać wywołanie lokalnie. Są także inne przyczyny skłaniające do postępowania zgodnie z tą wskazówką. Znajdziesz je we wzorcu Usługi REST w rozdziale 9. Często potrzebne jest wyłączenie pamięci podręcznej w celu pobrania najnowszych informacji z serwera. W takim przypadku przydatnych jest kilka technik. Ponieważ dostępne są różne przeglądarki i serwery, standardowym zaleceniem jest próba obsłużenia jak największej ich liczby, na przykład przy użyciu kombinacji poniższych technik: • Możesz zapewnić niepowtarzalność adresu URL, dołączając znacznik czasu (http://www.

howtoadvice.com/StopCaching). Można użyć też losowego łańcucha znaków lub łańcucha znaków utworzonego na podstawie rosnącej sekwencji. Jest to proste rozwiązanie, ale zaskakująco niezawodne i przenośne: var url = "sum.phtml?figure1=5&figure2=1×tamp=" + new Date().getTime();

• Możesz dodać nagłówek do żądania: xhReq.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2005 00:00:00 GMT");

• W Usłudze sieciowej ustaw nagłówek odpowiedzi tak, aby uniemożliwić zapis danych

w pamięci podręcznej (http://www.stridebird.com/articles/?showarticle=1&id=33). header("Expires: Sat, 1 Jan 2005 00:00:00 GMT"); header("Last-Modified: ".gmdate( "D, d M Y H:i:s")."GMT"); header("Cache-Control: no-cache, must-revalidate"); header("Pragme: no-cache");

• Używaj komunikatów POST zamiast GET. Żądania typu POST czasem powodują wyłą-

czenie pamięci podręcznej. Jednak nie polecam tej techniki, ponieważ, jak wyjaśnia to wzorzec Usługi REST, komunikaty GET i POST mają konkretne znacznie i nie należy ich używać zamiennie. W każdym razie to rozwiązanie nie zawsze działa, ponieważ niektóre zasoby mogą zapisywać odpowiedzi POST w pamięci podręcznej.

Wywołania XMLHttpRequest

|

115

Z drugiej strony przechowywanie danych w pamięci podręcznej jest korzystne, jeśli działanie usługi jest długie, a informacje zmieniają się dość rzadko. Aby ułatwić przechowywanie danych, możesz postępować przeciwnie do powyższych wskazówek, na przykład ustawić wartość nagłówka Expires na odpowiedni czas w przyszłości. Ponadto w przypadku mniejszych ilości danych dobrym podejściem jest zapisywanie ich w samej aplikacji, używając struktur danych języka JavaScript. Wzorzec Pamięć podręczna po stronie przeglądarki przedstawiony w rozdziale 13. wyjaśnia, jak to zrobić.

Jak radzić sobie z błędami? Punkt dotyczący wykrywania błędów nie odpowiedział na pytanie, co zrobić, kiedy aplikacja wykryje się przekroczenie limitu czasu oczekiwania na serwer lub otrzyma niestandardowy kod błędu. Są trzy możliwe rozwiązania: Spróbować ponownie Spróbować kilka razy przed rezygnacją. Poinformować użytkownika Można poinformować użytkownika o tym, że operacja się nie powiodła, a także jakie są tego konsekwencje. Na przykład można przekazać użytkownikowi, że jego dane nie zostały przesłane i poprosić go o ponowienie próby za kilka minut. Nie wykonywać żadnych operacji Czasem masz komfort zignorowania odpowiedzi (lub jej braku). Może to wynikać z wysyłania mało istotnych wywołań typu „zgłoś i zapomnij” (http://www.ajaxian.com/archives/ 2005/09/ajaxian_fire_an.html), które służą do przekazywania danych na serwer bez oczekiwania na odpowiedź.

Przykłady praktyczne Serwer rozmów Lace Serwer Lace autorstwa Bretta Stimmermana (http://www.socket7.net/lace/) to aplikacja Ajax służąca do obsługi rozmów. Aplikacja ta używa obiektów XMLHttpRequest na dwa sposoby: do przekazywania wpisanych komunikatów i do pobierania najnowszych komunikatów z serwera (rysunek 6.3).

Backbase Demonstracyjny czytnik RSS Backbase (http://www.backbase.com/demos/RSS) używa obiektów XMLHttpRequest do pobierania tytułów najnowszych artykułów (rysunek 6.4). Kiedy klikniesz jeden z tych tytułów, nowy obiekt XMLHttpRequest wczyta całą jego zawartość.

Anyterm Anyterm autorstwa Phila Endecotta (http://anyterm.org/demos.html) to napisany w technologii Ajax emulator terminala pozwalający uruchomić w przeglądarce telnet lub SSH. Aplikacja używa Wywołań XMLHttpRequest do pobierania kodów wciśniętych klawiszy i do wczytywania najnowszego stanu ekranu. 116

|

Rozdział 6. Zdalne wywoływanie poleceń

Rysunek 6.3. Lace Chat

Rysunek 6.4. Czytnik RSS Backbase

Mint Mint (http://haveamint.com/) to pakiet do obsługi statystyk dotyczących witryn internetowych. Właściciele strony dołączają do każdej strony kod JavaScript pakietu Mint niejawnie sprawdzający ustawienia przeglądarki użytkownika i wczytujący je przy użyciu obiektów XMLHttpRequest.

Wywołania XMLHttpRequest

|

117

Przykładowy kod: TestAjaxCaller według wzorców Ajax Przedstawiony tu przykład (http://ajaxpatterns.org/xmlHttpRequestCall/), wspomniany wcześniej w punkcie „Rozwiązanie”, obejmuje najbardziej typowe zastosowania obiektów XMLHttpRequest. W praktyce wiele osób używa platform i bibliotek Ajaksa, zamiast bezpośrednio wywoływać żądania XMLHttpRequest. Takie podejście jest stosowane we wszystkich programach demonstracyjnych w tej książce i korzystają one z biblioteki ajaxCaller.js, która została utworzona specjalnie na potrzeby tych aplikacji. Biblioteka ta udostępnia podstawowe możliwości i oferuje prosty interfejs do obsługi funkcjonalności obiektów XMLHttpRequest. Niniejszy punkt przedstawia tę bibliotekę, pokazując kilka jej zastosowań na przykładzie programu demonstracyjnego TestAjaxCaller (http://przyklady.helion.pl/ajaxwp/run/testAjaxCaller). Najprostsze wywołanie pozwala pobrać zwykły tekst. Wystarczy określić adres URL i wywoływaną zwrotnie funkcję. ajaxCaller.getPlainText(url, onResponse);

W przypadku wszystkich żądań wywoływana zwrotnie funkcja przyjmuje trzy argumenty. Pierwszy argument to wynik albo w postaci łańcucha znaków, albo modelu DOM. Drugi argument to tablica asocjacyjna odwzorowująca pola nagłówka na ich wartości. Trzeci argument to „kontekst wywołania”. Można go sobie wyobrazić jako opcjonalną wartość przekazywaną wraz z żądaniem oraz odpowiadającą mu odpowiedzią. Ta wartość jest zwracana do wywoływanej zwrotnie funkcji w takiej samej postaci, w jakiej została podana w czasie zgłaszania wywołania. Zwykle wartość ta zawiera informacje dotyczące wywołania. Na przykład, jeśli wywołanie ma przekazać polecenie zakupu, kontekst wywołania może zawierać informacje o zamawianym elemencie. Następnie obiekt ajaxCaller prześle kontekst do wywoływanej zwrotnie funkcji, która może oznaczyć element jako zamówiony. W praktyce kontekst wywołania nie jest przekazywany na serwer i z powrotem. Obiekt ajaxCaller przechowuje go lokalnie i śledzi wszystkie bieżące żądania. Jeśli ta technika wydaje Ci się nieco skomplikowana, zapoznaj się ze wzorcem Śledzenie wywołań w rozdziale 10. Wywoływana zwrotnie funkcja wygląda następująco: function onResponse(text, headers, callingContext) { // Wykorzystanie argumentów text (łańcuch znaków), headers i callingContext }

A ponieważ zwykle używa się jedynie argumentu text, funkcję można także zadeklarować w prostszej postaci2. function onResponse(text) { // Używa argumentu text (łańcucha znaków)

} getPlainText() to jedna z czterech często stosowanych funkcji. Pozostałe to getXML(), postForPlainText() i postForXML(). Te cztery funkcje wspólnie obsługują najbardziej popu-

larne typy żądań (GET i POST) oraz dwa rodzaje odpowiedzi (tekstowe i w formacie XML). ajaxCaller.getXML(url, callbackFunction); ajaxCaller.postForXML(url, vars, callbackFunction); ajaxCaller.getPlainText(url, callbackFunction, callbackContext); ajaxCaller.postForPlainText(url, callbackFunction, callbackContext);

2

Z powodu sposobu obsługi wywołań funkcji przez język JavaScript, wywołania biblioteczne będą kierowane do funkcji mającej tę postać, nawet jeśli wywołanie będzie zawierało trzy argumenty.

118

|

Rozdział 6. Zdalne wywoływanie poleceń

Jest także wiele bardziej ogólnych metod. Na przykład metoda get() pozwala tworzyć bardziej elastyczne żądania GET. Oprócz adresu URL i wywoływanej zwrotnie funkcji metoda get() pozwala określić zmienne dodawane do adresu URL, flagę informującą, czy odpowiedź ma format XML, a także opisany powyżej kontekst callingContext. var vars = { flavour: "chocolate", topping: "nuts" }; ajaxCaller.get("httpLogger.php", vars, onResponse, false, "iceCreamRequest");

Dostępne są także ogólne operacje do obsługi żądań innych typów. Metoda postVars() tworzy komunikat POST w stylu CGI, a metoda postBody() tworzy komunikat POST z dowolnym ciałem. Podobne metody dostępne są także dla żądań innych typów, takich jak PUT, TRACE, OPTIONS, DELETE i HEAD.

Alternatywy Niniejszy punkt opisuje wszystkie alternatywne rozwiązania, jakie znam. Niektóre z nich mają sporo ograniczeń. Najbardziej niezrozumiałe techniki dołączyłem ze względu na kompletność, a także w nadziei, że mogą pomóc wpaść na kilka nowych pomysłów.

Odświeżanie stron Tradycyjny sposób komunikowania się z serwerem polega na wysłaniu przez przeglądarkę żądania całej nowej strony, co, jeśli się nad tym zastanowić, jest rozwiązaniem dość ekstremalnym. Może to być przydatne, jeśli użytkownik chce przejść do zupełnie innej części witryny, jednak jest nadmiarowe, jeśli trzeba jedynie zaktualizować wynik meczu piłkarskiego na dole strony lub pobrać dane wpisane przez użytkownika. Najbardziej znanym przypadkiem odświeżania całej strony jest kliknięcie odnośnika, które powoduje przesłanie żądania GET przez przeglądarkę, usunięcie bieżącej strony i wyświetlenie odpowiedzi. Innym typem pełnego odświeżania jest przesyłanie formularzy, które powodują przesłanie parametrów wraz z żądaniem — typu GET, POST lub jeszcze innego — i, podobnie jak w przypadku użycia odnośnika, zamienienie poprzedniej strony na nową odpowiedź. Przy zdalnym wywoływaniu poleceń wszystkie zmiany interfejsu użytkownika zależą od skryptu działającego na stronie. Tradycyjne techniki wciąż są dostępne, jednak większość komunikacji z serwerem bazuje na obiektach XMLHttpRequest i podobnych technologiach.

Wywołania IFrame Wywołania IFrame (zobacz opis w dalszej części rozdziału) to główna alternatywa dla wywołań XMLHttpRequest. Podobnie jak obiekty XMLHttpRequest, elementy IFrame umożliwiają zdalne wywoływanie poleceń przy użyciu metod GET, POST, a także żądań innych rodzajów. Jednak podczas gdy wywołania XMLHttpRequest zostały zaprojektowane specjalnie do zdalnego wywoływania poleceń, wywołania IFrame wykorzystują elementy IFrame w odmienny sposób niż zaplanowany, co zresztą widać w kodzie. Poniżej znajduje się podsumowanie zalet wywołań XMLHttpRequest w porównaniu z wywołaniami IFrame:

Wywołania XMLHttpRequest

|

119

• Ponieważ obiekty XMLHttpRequest zostały zaprojektowanie specjalnie do zdalnego wy-

woływania poleceń, ich interfejs API jest łatwiejszy w użyciu, szczególnie w przypadku żądań innych niż GET. Jednak nie jest to wielka zaleta, ponieważ zwykle zaleca się używanie bibliotek opakowujących i unikanie stosowania interfejsów API wywołań obu typów. Ponadto interfejs API XMLHttpRequest jest wprawdzie lepszy, ale nie jest doskonały! • Wywołania XMLHttpRequest oferują funkcjonalność niedostępną w wywołaniach IFrame,

na przykład umożliwiają anulowanie żądania czy śledzenie stanu wywołania. Może mieć to poważny wpływ na wydajność (http://ajaxian.com/archives/2005/09/ajaxian_fire_an.html). • Wywołania XMLHttpRequest są zazwyczaj szybsze, szczególnie w przypadku krótkich

odpowiedzi (http://me.eae.net/archive/2005/04/02/xml-http-performance-and-caching/). • Wywołania XMLHttpRequest przetwarzają dane XML w prosty i przenośny sposób. Interfejs

wywołań IFrame nie jest powiązany z formatem XML. • W przypadku przeglądarek obsługujących obiekty XMLHttpRequest interfejs API jest bardziej

spójny niż interfejs bazujący na elementach IFrame. • Obiekty XMLHttpRequest szybko zyskują powszechną popularność. Nie tylko pomaga to

innym programistom zrozumieć pisany przez Ciebie kod, ale także oznacza, że możesz korzystać z różnych narzędzi, służących na przykład do monitorowania przepływu żądań XMLHttpRequest (zobacz wzorzec Śledzenie przepływu danych w rozdziale 18.).

Z tych powodów domyślnie należy używać obiektów XMLHttpRequest, jednak w niektórych specjalnych przypadkach bardziej przydatne są Wywołania IFrame: • Wywołania IFrame działają poprawnie w wielu starszych przeglądarkach, które nie ob-

sługują wywołań XMLHttpRequest. • Wywołania IFrame, przynajmniej w przeglądarce IE, udostępniają (choć przez przypa-

dek) pewne wyspecjalizowane właściwości służące do obsługi historii i zakładek, jak opisuje to wzorzec Niepowtarzalne adresy URL w rozdziale 17. • Obiekty XMLHttpRequest w przeglądarce IE nie działają, jeśli zabezpieczenia wyłączą obsługę

ActiveX, co jest strategią stosowaną czasem w przedsiębiorstwach (http://verens.com/archives/ 2005/08/12/ajax-in-ie-without-activex/). • Wywołania IFrame mogą umożliwiać bardziej przenośne zastosowanie wzorca Strumie-

niowanie HTTP, co wyjaśnia punkt opisujący ten wzorzec.

Strumieniowanie HTTP Strumieniowanie HTTP (opis w dalszej części rozdziału) także umożliwia zdalne wywoływanie poleceń, a w przeciwieństwie do wywołań XMLHttpRequest, połączenie pozostaje w tym przypadku otwarte. Funkcjonalnie kluczową zaletą strumieniowania w porównaniu z wywołaniami XMLHttpRequest jest to, że serwer może nieustannie przekazywać nowe informacje do przeglądarki. Z punktu widzenia wykorzystania zasobów strumieniowanie jest korzystne, ponieważ nie trzeba wielokrotnie nawiązywać i zrywać połączenia, występują jednak poważne zagrożenia związane ze skalowalnością, ponieważ rzadko można zaakceptować utrzymywanie wielu otwartych połączeń i przechowywanie licznych skryptów wykonywanych po stronie serwera.

120

|

Rozdział 6. Zdalne wywoływanie poleceń

Wzbogacone wtyczki Wzorzec Wzbogacone wtyczki przedstawiony w rozdziale 8. opisuje technologie Java Script oraz inne wtyczki i rozszerzenia. Komponenty te często mają uprawnienia pozwalające programowo przesyłać żądania na serwer, a w niektórych przypadkach można użyć ich jako pośredników w kodzie JavaScript.

JavaScript na żądanie Wzorzec JavaScript na żądanie (opis w dalszej części rozdziału) opisuje kilka sposobów pobierania kodu JavaScript w locie. Jedna z tych technik obejmuje używanie obiektów XMLHttpRequest (dlatego sama nie jest podstawową technologią), jednak druga jest alternatywnym mechanizmem przesyłu danych, odmienną techniką zdalnego wywoływania poleceń. Jej działanie polega na dodawaniu elementu script do ciała dokumentu, co powoduje automatyczne pobrania określonego pliku z kodem JavaScript.

Wywołania przy użyciu rysunków i ciasteczek Biblioteka RSLite autorstwa Brenta Ashleya (http://www.ashleyit.com/rs/rslite/) to niezwykła alternatywa bazująca na rysunkach i ciasteczkach. Właściwość reprezentującą źródło rysunku należy ustawić na adres URL usługi, co oznacza po prostu jej wywołanie. Usługa zapisuje odpowiedź w ciasteczkach (jednym lub kilku), z których po zakończeniu wywołania może korzystać kod JavaScript.

Wywołania przy użyciu arkuszy stylów Inny sposób pobierania stanu serwera polega na dynamicznym zmienianiu arkuszy stylów CSS. Podobnie jak można ustawić nowy plik JavaScript lub źródło rysunku, można też ustawić właściwość href arkusza stylów, tak aby wskazywał na usługę sieciową. W wersji aplikacji demonstrującej tę technikę, autorstwa Juliena Lamarre’a (http://zingzoom.com/ajax/ajax_with_ stylesheet.php), usługa sieciowa zwraca arkusz stylów, a odpowiedź jest zagnieżdżana w adresie URL właściwości background-image!

Odpowiedź 204 Stara — i nieco przestarzała — sztuczka polega na zwracaniu przez serwer odpowiedzi 204 oznaczającej „brak zawartości”. Przeglądarki nie odświeżają strony, kiedy otrzymają taki kod, co oznacza, że skrypt może przekazać formularz do takiej usługi bez wpływu na działanie strony. Jednak sztuczki z odpowiedzią 204 można używać tylko w przypadku wywołań typu „zgłoś i zapomnij”. Jeśli odpowiedź może zawierać informacje zagnieżdżone w nagłówkach, nie ma sposobu, aby skrypt przeglądarki uzyskał do nich dostęp.

Importowanie dokumentów XML Istnieje technika zaprojektowana specjalnie do pobierania dokumentów XML, która używa technologii podobnej do XMLHttpRequest. Peter-Paul Koch opisał tę technikę w roku 2000 (http://www.quirksmode.org/dom/importxml.htm l), jednak ostatnio zasugerował, że można ją spisać na straty (http://www.quirksmode.org/blog/2005/01/with_httpmapsea.html).

Wywołania XMLHttpRequest

|

121

Metafora Wywołania XMLHttpRequest działają jak przeglądarka rozmawiająca na boku z serwerem, prowadząc główną konwersację z użytkownikiem.

Wywołania IFrame Wywołania, Wywołania zwrotne, Pobieranie, Ramki, IFrame, Na żywo, Zapytania, Zdalne wywoływanie, Zdalne skrypty, Wczytywanie

Rysunek 6.5. Wywołania IFrame

Historia zadania Jan Zwyczajny zamawia taksówkę przez internet, a aplikacja zawsze wyświetla cenę za kurs. Dzieje się tak dzięki ukrytej kontrolce IFrame. Za każdym razem, kiedy Jan zmieni jakąś wartość, przeglądarka zapełnia formularz kontrolki IFrame i przesyła go. W kontrolce IFrame szybko znajduje się nowa cena, którą przeglądarka kopiuje w widoczne miejsce. Podobną funkcjonalność można uzyskać także przy użyciu obiektów XMLHttpRequest, których jednak nie obsługuje przestarzała przeglądarka Jana.

Problem Jak przeglądarka może komunikować się z serwerem?

Czynniki Zobacz punkt „Czynniki” we wzorcu Wywołania XMLHttpRequest.

122

|

Rozdział 6. Zdalne wywoływanie poleceń

Rozwiązanie Użyj elementów IFrame do obsługi komunikacji między przeglądarką a serwerem. Wiele właściwości Ajaksa wiąże się z obiektami XMLHttpRequest, jednak czasem lepszym rozwiązaniem jest zastosowanie innych technik zdalnego wywoływania poleceń. Jedną z nich są wywołania IFrame (porównanie obu technik znajdziesz w punkcie „Alternatywy” w opisie wzorca Wywołania XMLHttpRequest). Kontrolki IFrame przypominają strony i można je umieszczać na innych stronach. Mają własny adres URL, różny od adresu ich strony nadrzędnej, i można go zmieniać dynamicznie. Wywołania IFrame działają poprzez kierowanie kontrolki IFrame do odpowiedniego adresu URL, a następnie wyświetlanie strony w kontrolce IFrame po wczytaniu nowej zawartości. Uwaga — wersja demonstracyjna aplikacji (http://przyklady.helion.pl/ajaxwp/run/iframe) ilustruje zagadnienia związane z kodem pojawiające się w tym rozwiązaniu, a przedstawione fragmenty kodu luźno nawiązują do tego programu. Najpierw trzeba dodać element IFrame do początkowego kodu HTML, a także zarejestrować metodę obsługi zdarzenia onload. Mniej natrętnym rozwiązaniem jest rejestracja metody przy użyciu kodu JavaScript, ale z powodu pewnych „właściwości” przeglądarek nie zawsze jest to możliwe.

Używamy elementu IFrame jako repozytorium danych, a nie jako interfejsu użytkownika, dlatego niektóre style CSS pozwalają ukryć ten element. Bardziej naturalne jest używanie właściwości display: none, jednak, jak pokazuje eksperymentalny program demonstracyjny, http://przyklady.helion.pl/ajaxwp/run/iframe/displayNone/, dziwne działanie przeglądarki powoduje, że jest to niewykonalne. #iFrame { visibility: hidden; height: 1px; }

Po stronie serwera początkowo użyjemy usługi sieciowej sumGet.phtml opisanej we wzorcu Wywołania XMLHttpRequest. Aby wywołać tę usługę, trzeba zmienić źródło danych elementu IFrame: $("iFrame").src = "sumGet.phtml?figure1=5&figure2=1";

Metodę obsługi zdarzenia onload zarejestrowaliśmy już w początkowym kodzie HTML. Ta metoda zostanie wywołana w wyniku wczytania nowej zawartości, a na tym etapie ciało elementu IFrame będzie zawierało żądane dane. Poniższy kod wywołuje funkcję extractIFrameBocy(), która pobiera ciało elementu w przenośny sposób (na podstawie rozwiązania ze strony http://developer.apple.com/internet/webcontetn/iframe.html). function onIFrameLoad() { var serverResponse = extractIFrameBody($("iFrame")).innerHTML; $("response").innerHTML = serverResponse; }

To wystarczy do obsługi wywołań GET. Aby zilustrować używanie wywołań POST, wywołamy usługę sumPost.phtml, także opisaną we wzorcu Wywołania XMLHttpRequest. Wywołania POST są nieco bardziej skomplikowane, ponieważ w tym przypadku nie wystarczy po prostu zmienić źródła strony. W zamian trzeba dynamicznie wstawić formularz do elementu IFrame i przesłać go. W poniższym kodzie argumenty ('5' i '2') są zapisane na stałe, ale można łatwo pobrać je przy użyciu skryptu, manipulując elementami input.

Wywołania IFrame

|

123

var iFrameBody = extractIFrameBody($("iFrame")); iFrameBody.innerHTML = "" + "" + "" + ""; var form = iFrameBody.firstChild; form.submit();

Podobnie jak w przypadku tradycyjnego przesyłania formularzy element IFrame jest odświeżany zawartością przesłaną przez odbiorcę formularza. Dlatego wcześniejsza metoda obsługi zdarzenia onLoad będzie działać poprawnie. Rysunek 6.6 ilustruje przebieg całego procesu.

Rysunek 6.6. Przesyłanie formularza przy użyciu wywołań IFrame

Inne podejście wykorzystujące elementy IFrame polega na generowaniu przez serwer kodu JavaScript zmieniającego element nadrzędny lub wywołujący funkcję zdefiniowaną w elemencie nadrzędnym. Taki kod jest automatycznie wywoływany w momencie wczytywania strony, dlatego nie ma potrzeby używania metody obsługi zdarzenia onload. Niestety, takie podejście tworzy poważne powiązanie między serwerem a przeglądarką. Warto porównać to ze sposobem, w jaki wcześniejsze przykłady używały całkowicie uniwersalnej usługi sieciowej — ta usługa potrafi jedynie dodawać liczby i nie ma żadnych informacji o kontekście wywołania. Jest to możliwe, ponieważ wszystkie operacje zostały ukryte w funkcji onload(). Jak opisuje to wzorzec Śledzenie wywołań (rozdział 10.), równoległe Wywołania XMLHttpRequest wiążą się z pewnymi problemami i wymagają stosowania odpowiednich rozwiązań. To samo dotyczy elementów IFrame. Po pierwsze, każde odrębne wywołanie wymaga osobnego

124

|

Rozdział 6. Zdalne wywoływanie poleceń

elementu IFrame. Źródło elementu IFrame nie powinno się zmieniać w czasie oczekiwania na odpowiedź. Po drugie, należy sprawdzić i przetestować ograniczenia, ponieważ aplikacja może zatrzymać się, jeśli zbyt wiele wywołań oczekuje na obsłużenie. Z wywołaniami IFrame wiąże się jeszcze jeden problem. Interfejsy użytkownika przeglądarek nie zostały zbudowane z myślą o takim zastosowaniu elementów IFrame, dlatego niektóre działania mogą wywoływać zdziwienie użytkowników. Alex Russell wskazał na dwa problemy występujące w czasie używania wywołań IFrame w przeglądarce IE: „fantomowe kliknięcia” i „wskaźnik aktywności” (http://alex.dojotoolkit.org/?p=538). Pierwszy z problemów polega na generowaniu odgłosu kliknięcia za każdym razem, kiedy aplikacja zgłasza żądanie IFrame. Drugi problem związany jest z uruchamianiem animacji ikony wskaźnika aktywności w czasie wczytywania elementu IFrame. Takie działanie przeglądarki jest poprawne w przypadku odświeżania całych stron, na przykład w wyniku kliknięcia odnośnika, ale są nieodpowiednie, kiedy skrypt ma nawiązać na zapleczu cichą komunikację z serwerem. W swym artykule Alex wyjaśnia, jak odkrył fantastyczną sztuczkę w aplikacji Gmail służącej do obsługi rozmów (http://gmail.com). Sztuczka pozwala zablokować irytujące działania poprzez zagnieżdżenie elementu IFrame wewnątrz mało znanego komponentu ActiveX o nazwie „htmlfile”, który jest w zasadzie odrębną stroną internetową. Ponieważ element IFrame nie znajduje się już bezpośrednio na stronie internetowej, IE nie włącza już odgłosów klikania i animacji wskaźnika aktywności. Więcej szczegółów znajdziesz w blogu Aleksa (http://alex.dojotoolkit.org/?p=538). Żeby uniknąć niedomówień — stosowanie elementów IFrame to zwykła sztuczka. Elementy IFrame nigdy nie miały ułatwiać komunikacji między przeglądarką a serwerem. Prawdopodobnie technika ta powoli przestanie być stosowana wraz ze wzrostem popularności obiektów XMLHttpRequest i wycofywaniem z użytku starszych przeglądarek. Mimo to posiada ona kilka zalet w porównaniu z Wywołaniami XMLHttpRequest, które to zalety zostały opisane w punkcie „Alternatywy” tamtego wzorca.

Przykłady praktyczne Google Maps Witryna Google Maps (http://maps.google.com), prawdopodobnie najsłynniejsza aplikacja Ajax, umożliwia nawigowanie po mapie świata (rysunek 6.7). Program żąda od serwera lokalizacji i metadanych, a do pobierania tych informacji służą elementy IFrame. Google używa także obiektów XMLHttpRequest do pobierania arkuszy stylów XSLT (ta technika opisana jest we wzorcu XSLT po stronie przeglądarki w rozdziale 11.)

Platforma Scoop, Kuro5hin Scoop (http://scoop.kuro5hin.org), system zarządzania treścią o otwartym dostępie do kodu źródłowego, używa elementów IFrame do obsługi wyświetlania wątków (rysunek 6.8). Używając modułu „dynamicznych komentarzy”, użytkownicy mogą przeszukiwać wątek bez konieczności ponownego wczytywania całej strony. Na systemie Scoop bazuje między innymi popularna witryna internetowa Kuro5hin (http://kuro5hin.org).

Wywołania IFrame

|

125

Rysunek 6.7. Google Maps

Rysunek 6.8. Kuro5hin

Program demonstracyjny PXL8 Michele Tranquilli udostępnia doskonały samouczek dotyczący elementów IFrame wraz z przykładami (http://www.pxl8.com/iframes.html).

Biblioteka HTMLHttpRequest HTMLHttpRequest autorstwa Angusa Turnbulla (http://www.twinhelix.com/javascript/htmlhttprequest/) to przenośna biblioteka do zdalnego wywoływania poleceń, która początkowo próbuje użyć XMLHttpRequest, a jeśli się to nie powiedzie, wykorzystuje elementy IFrame. To narzędzie jest opisane w punkcie Przykładowy kod we wzorcu Komponenty działające w różnych przeglądarkach w rozdziale 12.

126

|

Rozdział 6. Zdalne wywoływanie poleceń

Refaktoryzacja kodu — program demonstracyjny Sum według wzorców Ajax Podstawowa wersja programu demonstracyjnego Sum (http://przyklady.helion.pl/ajaxwp/run/sum) używa obiektów XMLHttpRequest. Ponadto dostępna jest także wersja, która została poddana refaktoryzacji i używa elementów IFrame (http://przyklady.helion.pl/ajaxwp/run/sum/iframe). W tym punkcie nie ma analizy kodu, ponieważ byłaby bardzo podobna do opisu obsługi metody GET w programie demonstracyjnym opisanym wcześniej w punkcie „Rozwiązanie”.

Alternatywy Wywołania XMLHttpRequest Wywołania XMLHttpRequest (opisane we wcześniejszej części rozdziału) to naturalna alternatywa dla wywołań IFrame. Punkt „Alternatywy” tego wzorca znajdujący się we wcześniejszej części rozdziału zawiera porównanie obu technik.

Wywołania kierowane do ramek Przed wprowadzeniem elementów IFrame używano zwykłych ramek. Przez lata ramki jako element interfejsu użytkownika nieraz spotkały się z falą krytyki, ale przynajmniej udostępniały możliwość zdalnego wywoływania skryptów podobną do tej, jaką udostępniają wywołania IFrame (nawet jeśli było to przypadkowe). Ponieważ obecnie elementy IFrame są szeroko obsługiwane, prawdopodobnie nie będziesz musiał nigdy używać ramek do zdalnego wywoływania skryptów (ani do żadnych innych operacji).

Metafora Ukryty element IFrame jest jak niewidzialny przyjaciel, do którego można kierować pytania.

Strumieniowanie HTTP Połączenie, Dupleks, Na żywo, Podtrzymywanie, Publikowanie, Wypychanie, Czas rzeczywisty, Odświeżanie, Zdalne wywoływanie, Zdalne skrypty, Zachowywanie stanu, Odwrócony Ajax, Strumień, Dwustronne, Aktualizacja

Historia zadania Aplikacja handlowa Krystyny Pieniążek zawiera obszar wyświetlający najnowsze ogłoszenia. Informacje są zawsze aktualne, ponieważ ogłoszenia są strumieniowane bezpośrednio z serwera. Nagle pojawia się ważna wiadomość, która powoduje, że Krystyna przygotowuje nową umowę. Przesyłanie umowy odbywa się przy użyciu nowego obiektu XMLHttpRequest, dzięki czemu strumień ogłoszeń nie zostaje naruszony.

Strumieniowanie HTTP

|

127

Rysunek 6.9. Strumieniowanie HTTP

Problem Jak serwer może zainicjować komunikację z przeglądarką?

Czynniki • Stan wielu aplikacji Ajax jest z natury ulotny. Zmiany mogą wynikać z działań innych

użytkowników, otrzymania zewnętrznych wiadomości i danych, zakończenia złożonych obliczeń, a także z powodu zdarzeń bazujących na bieżącym czasie i dacie. • Połączenia HTTP można tworzyć jedynie w przeglądarce. Kiedy zmienia się stan, serwer nie

może nawiązać fizycznego połączenia, aby poinformować o zmianie zainteresowanych klientów.

Rozwiązanie Prześlij z serwera strumień danych z odpowiedzią poprzez długotrwałe połączenie HTTP. Większość usług sieciowych wykonuje jakieś operacje, przesyła odpowiedź z powrotem i natychmiast kończy działanie. Jednak w tym wzorcu usługi sieciowe utrzymują otwarte połączenie, działając w długiej pętli. Skrypt działający po stronie serwera używa rejestracji zdarzeń i innych technik do wykrywania zmian stanu. Po zmianie stanu serwer umieszcza nowe dane w wychodzącym strumieniu i przesyła je, ale nie zamyka strumienia. W tym czasie przeglądarka musi wyświetlić nowe dane w interfejsie użytkownika. Wzorzec ten opisuje dwie techniki służące do strumieniowania danych przy użyciu protokołu HTTP, które opisuję jako „strumieniowanie stron” i „strumieniowanie usług”. Strumieniowanie stron wiąże się ze strumieniowaniem odpowiedzi zawierającej oryginalną stronę (rysunek 6.10). W tym przypadku serwer natychmiast zwraca początkową stronę i przesyła dane strumieniem, ale nie zamyka połączenia. Następnie serwer wraz z upływem czasu modyfikuje stronę, przekazując zagnieżdżone skrypty, które manipulują modelem DOM. Przeglądarka oficjalnie wciąż wyświetla początkową stronę, dlatego kiedy natrafi na kompletny znacznik

Strumieniowanie HTTP

|

129

Nie zapomnij przesłać danych — wskazówka dla autorów kodu PHP Każdy język i środowisko ma pewne dziwactwa związane z implementacją tego wzorca. W przypadku PHP dostępna jest na szczęście bardzo przydatna rada w komentarzach dotyczących funkcji flush() znajdujących się w internecie na stronie http://php.net/flush. Okazuje się, że przed wywołaniem funkcji flush() trzeba wywołać funkcję ob_end_flush(). Trzeba także pamiętać o parametrze max_execution_time, który może wymagać zwiększenia, a po stronie serwera znajdują się następne parametry związane z limitem czasu przetwarzania wymagając ustawienia.

Ilustruje to podstawowe wykorzystanie techniki, a w dalszej części punktu i w punkcie „Decyzje” opisane są pewne ulepszenia. Możesz się zastanawiać, w jaki sposób przeglądarka inicjuje komunikację, skoro połączenie ciągle jest w stanie zwracania odpowiedzi. Wymaga to użycia „drugiego kanału”, na przykład równoległego połączenia HTTP. Można łatwo zastosować to rozwiązanie, używając Wywołań XMLHttpRequest lub Wywołań IFrame. Przy użyciu strumieniowania usługi będzie można wprowadzać kolejne zmiany w interfejsie użytkownika dopóty, dopóki będzie możliwość wykrycia wywołania, na przykład dzięki obiektowi sesji, globalnemu obiektowi aplikacji (takiemu jak applicationContext w kontenerze serwletów Java) czy bazie danych. W strumieniowaniu stron przeglądarka niemal natychmiast wykrywa zmiany zachodzące po stronie serwera. Otwiera to możliwość dokonywania aktualizacji w przeglądarce w czasie rzeczywistym i pozwala na dwukierunkowy przepływ informacji. Jednak technika ta odchodzi nieco od standardowych zastosowań protokołu HTTP, co prowadzi do kilku problemów. Po pierwsze, ma to zgubny wpływ na pamięć, ponieważ w przeglądarce zbiera się coraz więcej skryptów JavaScript, a wszystkie je trzeba przechowywać w modelu strony. W złożonych aplikacjach, wymagających wielu aktualizacji, model ten szybko się rozrasta, a w pewnym momencie konieczne jest odświeżenie strony w celu uniknięcia konieczności zrzucania pamięci na dysk twardy lub jeszcze gorszych skutków. Po drugie, długotrwałe połączenia zawsze w końcu zostają zerwane, dlatego trzeba przygotować plan ich odtwarzania. Po trzecie, większość serwerów nie radzi sobie z dużą liczbą równoległych połączeń. Wykonywanie wielu skryptów na pewno pogorszy wydajność, jeśli każdy z nich ma działać we własnym procesie, a nawet w złożonych środowiskach wielowątkowych zasoby są ograniczone. Kolejny problem wiąże się z koniecznością używania kodu JavaScript, ponieważ jest to jedyny sposób zmiany wyglądu już wyświetlonych elementów strony. Jeśli nie ma kodu JavaScript, serwer może komunikować się jedynie poprzez dodawanie nowych elementów strony. Z tego powodu przeglądarka i serwer są mocno powiązane, co utrudnia tworzenie złożonej aplikacji Ajax działającej po stronie przeglądarki. Strumieniowanie usług to krok w kierunku rozwiązania tych problemów (rysunek 6.11). Technika ta bazuje na Wywołaniach XMLHttpRequest (lub na podobnej technice zdalnego wywoływania poleceń, na przykład na Wywołaniach IFrame). Tym razem to połączenie bazujące na obiekcie XMLHttpRequest jest długotrwałe, a nie połączenie wczytujące początkową stronę. Zapewnia to większą elastyczność w zakresie długości połączenia i częstotliwości przesyłania danych. Można wczytać stronę w standardowy sposób, a następnie rozpocząć strumieniowanie na 30 sekund w momencie kliknięcia przycisku przez użytkownika. Można też

130

|

Rozdział 6. Zdalne wywoływanie poleceń

Rysunek 6.11. Strumieniowanie usług

rozpocząć strumieniowanie po wczytaniu strony i ponownie nawiązywać połączenie co 30 sekund. Elastyczność jest cenna, biorąc pod uwagę fakt, że strumieniowanie HTTP jest ograniczone przez możliwości serwera, przeglądarki i sieci. Do obsługi mechanizmu strumieniowania usług serwer używa tej samej sztuczki polegającej na uruchomieniu nieskończonej pętli w celu utrzymania otwartego połączenia i okresowo przesyła dane znajdujące się w strumieniu. W tym przypadku serwer nie może zwracać znaczników script HTML, ponieważ przeglądarka nie wykonałaby ich automatycznie. Jak więc przeglądarka obsługuje dane ze strumienia? Sprawdzając ostatnią odpowiedź i używając jej. Właściwość responseText obiektu XMLHttpRequest zawsze zawiera dane zwrócone przez serwer, nawet jeśli połączenie wciąż jest otwarte. Dlatego przeglądarka może okresowo przetwarzać wartość tej właściwości, na przykład sprawdzając, czy zmieniła się jej długość. Problem polega jednak na tym, że po zwróceniu odpowiedzi usługa nie może jej wycofać. Na przykład łańcuch znaków responseText zawierający dane z usługi zwracającej czas może wyglądać następująco: „12:01:00 12:01:05 12:01:10”, podczas gdy powinien zawierać tylko ciąg „12:01:00”, następnie samo „12:01:05”, a jeszcze później tylko „12:01:10”. Rozwiązanie polega na przetworzeniu łańcucha znaków odpowiedzi i sprawdzaniu jedynie ostatniej wartości, a mówiąc dokładniej, ostatniej pełnej wartości, ponieważ tekst może się kończyć częściowym

Strumieniowanie HTTP

|

131

wynikiem. Przykładowy program używający tej techniki (http://przyklady.helion.pl/ajaxwp/run/ streaming/xmlHttpRequest/countdown/) działa właśnie w ten sposób. Aby ułatwić przetwarzanie, usługa zwraca po każdym komunikacie ogranicznik w postaci specjalnego znacznika, @END@ (alternatywnym rozwiązaniem byłoby użycie znacznika XML). Następnie można użyć wyrażenia regularnego do pobrania najnowszego komunikatu, który, jeśli jest kompletny, musi kończyć się wspomnianym znacznikiem: function periodicXHReqCheck() { var fullResponse = util.trim(xhReq.responseText); var responsePatt = /^(.*@END@)*(.*)@END@.*$/; if (fullResponse.match(responsePatt)) { // Dostępna jest przynajmniej jedna pełna odpowiedź var mostRecentDigit = fullResponse.replace(responsePatt, "$2"); $("response").innerHTML = mostRecentDigit; } }

To doskonałe rozwiązanie, jeśli potrzebny jest tylko ostatni komunikat, ale co zrobić, jeśli przeglądarka musi zapisać wszystkie pobrane komunikaty albo przetworzyć je w pewien sposób? Jeśli aplikacja ma sprawdzać wartość odpowiedzi co 10 sekund, poprzedni fragment kodu może prowadzić do pominięcia niektórych wartości. Przeglądarka przeskoczyłaby od godziny 12:01 bezpośrednio do 12:01:10 z pominięciem środkowej wartości. Jeśli aplikacja ma pobierać wszystkie komunikaty, trzeba śledzić w pobranych danych pozycję, do której doszło przetwarzanie. Pozwala to określić, jakie nowe elementy pojawiły się od czasu ostatniego sprawdzenia. Tej techniki użyjemy w punkcie „Refaktoryzacja kodu: strumieniowanie wiki według wzorców Ajax” w dalszej części rozdziału. Podsumowując, strumieniowanie usług jest bardziej elastyczne, ponieważ pozwala przesyłać dowolne dane, a nie sam kod JavaScript, a ponadto umożliwia kontrolowanie cyklu życia połączenia. Jednak ta technika wymaga zastosowania dwóch elementów, które nie są w spójny sposób obsługiwane przez przeglądarki — obiektów XMLHttpRequest i strumieniowania HTTP — co może prowadzić do problemów z przenośnością. Eksperymenty sugerują, że technika strumieniowania stron działa zarówno w przeglądarce IE, jak i w przeglądarce Firefox (http://przyklady.helion.pl/ajaxwp/run/streaming/), ale już strumieniowanie usług działa poprawnie jedynie w przeglądarce Firefox, niezależnie od tego, czy bazuje na obiektach XMLHttpRequest (http://przyklady.helion.pl/ajaxwp/run/streaming/xmlHttpRequest/) czy na wywołaniach IFrame (http://przyklady.helion.pl/ajaxwp/run/streaming/xmlHttpRequest/iframe/). W obu przypadkach przeglądarka IE blokuje przesyłanie odpowiedzi dopóty, dopóki nie jest ona kompletna. Można dyskutować, czy jest to błąd czy właściwość. W obu przypadkach działa to na niekorzyść strumieniowania HTTP. Dlatego jeśli aktualizowanie strony ma być przenośne, trzeba skorzystać z jednej z następujących opcji: • Można użyć hybrydy (http://przyklady.helion.pl/ajaxwp/run/streaming/xmlHttpRequest/iframe/

scriptTags/) strumieniowania stron i bazującego na IFrame strumieniowania usług, w której to technice odpowiedzi IFrame zwracają znaczniki script zawierające kod służący do komunikowania się z dokumentem nadrzędnym (na przykład window.parent.onNewData(data);). Podobnie jak w przypadku standardowego strumieniowania stron skrypty będą wykonywane natychmiast. Nie jest to eleganckie rozwiązanie, ponieważ wiąże zdalną usługę ze strukturą skryptów przeglądarki, jednak jest to stosunkowo przenośny i stabilny sposób realizacji strumieniowania HTTP.

132

|

Rozdział 6. Zdalne wywoływanie poleceń

• Używaj ograniczonej formy strumieniowania usług, w której serwer wstrzymuje przetwa-

rzanie dopóty, dopóki nie zajdzie pierwsza zmiana stanu. Na tym etapie serwer zwraca komunikat i zamyka połączenie. Nie jest to idealne rozwiązanie, ale wykonalne (zobacz punkt „Przykłady praktyczne” w dalszej części rozdziału). • Używaj strumieniowania stron. • Używaj wzorca Okresowe odświeżanie (rozdział 10.) zamiast strumieniowania HTTP.

Decyzje Jak długo połączenie powinno być otwarte? Niepraktyczne jest przechowywanie otwartego połączenia w nieskończoność. Trzeba określić rozsądny czas podtrzymywania połączenia, który zależy od: • Zaangażowanych zasobów: serwera, sieci, przeglądarki i dodatkowego oprogramowania. • Liczby jednocześnie połączonych klientów. Ważna jest nie tylko średnia, ale także szczytowe

wartości. • Sposobu używania systemu — ile danych ma być zwracanych i jak aktywność zmienia

się wraz z czasem. • Konsekwencji używania zbyt wielu połączeń jednocześnie. Na przykład, czy niektórzy

użytkownicy nie utracą kluczowych informacji? Trudno jest otrzymać dokładne wyniki, jednak można założyć, że mała aplikacja intranetowa może tolerować połączenia liczone w minutach, a nawet godzinach, podczas gdy publiczna witryna może oferować podobną usługę jedynie do obsługi szybkich, wyspecjalizowanych operacji, jeśli w ogóle.

Kiedy należy zamykać połączenie? Usługa sieciowa może zdecydować o zamknięciu połączenia w kilku sytuacjach: • W wyniku przekroczenia limitu czasu. • Po zwróceniu pierwszego komunikatu. • W wyniku zajścia szczególnego zdarzenia. Na przykład strumień może wyświetlać in-

formacje o postępie złożonych obliczeń (zobacz wzorzec Wskaźnik postępu w rozdziale 14.) i kończyć działanie wraz z zakończeniem obliczeń. • Nigdy. To klient musi zamknąć połączenie.

Jak przeglądarka ma rozróżniać komunikaty? Jak wspomniałem w punkcie „Rozwiązanie”, usługa nie może usunąć zwróconych danych, dlatego często musi przesyłać serię odmiennych komunikatów. Potrzebny jest określony protokół do rozróżniania tych komunikatów. Na przykład, komunikaty mogą mieć określoną formę, mogą być rozdzielone specjalnym znacznikiem lub mogą towarzyszyć im metadane, takie jak nagłówek informujący o rozmiarze komunikatu.

Strumieniowanie HTTP

|

133

Przykłady praktyczne LivePage Strona LivePage (http://twisted.sourceforge.net/TwistedDocs-1.2.0/howto/livepage.html) to fragment platformy Nevow Donovana Prestona (http://nevow.com) napisanej głównie w języku Python i zbudowanej na bazie platformy Twisted (http://twistedmatrix.com/). Zdarzenia są przesyłane z serwera przy użyciu strumieniowania usług bazującego na obiektach XMLHttpRequest. Ze względu na zgodność Nevow używa techniki wspomnianej w punkcie „Rozwiązanie”, w której połączenie jest zamykane po zwróceniu pierwszego komunikatu. Donovan wyjaśnił mi działanie tej techniki: Kiedy aplikacja wczytuje główną stronę, XHR (XMLHttpRequest) tworzy żądanie „kanału wyjściowego”. Jeśli serwer otrzymał informacje o jakichkolwiek zdarzeniach między wygenerowaniem głównej strony a wygenerowaniem kanału wyjściowego, odpowiada na nie natychmiast. Jeśli nie, oczekuje na zdarzenia i zwraca dane przez kanał wyjściowy. Każde zdarzenia serwera przekazane do klienta powoduje zamknięcie kanału wyjściowego. Za każdym razem, kiedy serwer zamyka kanał wyjściowy, klient natychmiast otwiera nowy. Jeśli serwer przez 30 sekund nie otrzyma żadnego zdarzenia związanego z danym klientem, wysyła wartość noop („null” języka JavaScript) i zamyka kanał.

Jotspot Live Jotspot Live (http://jotlive.com/) to działające na żywo środowisko typu wiki z wieloma użytkownikami, które używa strumieniowania HTTP do aktualizowania zawartości wiadomości (rysunek 6.12). W wywiadzie dla witryny Ajaxian.com (http://www.ajaxian.com/archives/ 2005/09/jotspot_live_li.html) autor Abe Fettig wyjaśnia, że projekt bazuje na LivePage (zobacz poprzedni przykład).

Rysunek 6.12. JotSpot Live

Realtime on Rails Realtime on Rails autorstwa Martina Schefflera (http://www.uni-weimar.de/~scheffl2/wordpress/?p=19) to działająca w czasie rzeczywistym aplikacja do prowadzenia rozmów, które używa strumieniowania usług w przeglądarce Firefox oraz, z powodu ograniczeń opisanych we wcześniejszym punkcie „Rozwiązanie” wzorca Okresowe odświeżanie w przypadku innych przeglądarek.

134

|

Rozdział 6. Zdalne wywoływanie poleceń

Silnik Lightstreamer Lightstreamer (http://www.lightstreamer.com/) to komercyjny „silnik przekazujący” używany przez firmy z sektora finansowego i inne do obsługi strumieniowania HTTP na dużą skalę. Ponieważ silnik działa jako samodzielny serwer, możliwych jest wiele optymalizacji. Firma szacuje, że komputer ze standardowym procesorem Pentium 4 2.4GHz pozwala obsłużyć 10 000 użytkowników jednocześnie (http://www.softwareas.com/http-streaming-an-alternative-to-polling-the-server#comment-3078).

Platforma Pushlets Platforma Pushlets autorstwa Justa van den Broecke (http://www.pushlets.com/doc/whitepaper-s4.html) to biblioteka dla serwletów Java bazująca na strumieniowaniu HTTP, która obsługuje zarówno strumieniowanie stron, jak i strumieniowanie usług.

Refaktoryzacja kodu: strumieniowanie wiki według wzorców Ajax Podstawowa wersja demonstracyjna aplikacji Wiki (http://przyklady.helion.pl/ajaxwp/run/wiki) aktualizuje komunikaty zgodnie ze wzorcem Okresowe odświeżanie, kierując zapytania na serwer co około pięć sekund. W przedstawionej tu wersji (http://przyklady.helion.pl/ajaxwp/run/ wiki/streaming) ten mechanizm został zastąpiony strumieniowaniem usług. Do wczytywania nowych komunikatów wciąż służy biblioteka AjaxCaller, która działa jako drugi kanał. Usługa sieciowa wciąż jest uniwersalna i niezależna od typu klienta, z którym się łączy. Jej całe zadanie polega na zwracaniu nowych komunikatów za każdym razem, kiedy serwer wykryje zmianę. Dlatego usługa zwraca strumień podobny do poniższego: zawartość w czasie zero więcej zawartości po kilku sekundach jeszcze więcej treści jakiś czas później ...itd...

Aby pokazać, że serwer może być całkowicie niezależny od aplikacji klienckiej, to klient będzie odpowiadał za zatrzymywanie usługi (w systemie produkcyjnym bardziej eleganckim rozwiązaniem byłoby kończenie działania usługi w normalny sposób, na przykład po 60 sekundach). Serwer wykrywa zmianę w danych poprzez porównanie starego komunikatu z nowym (może także używać znacznika czasu aktualizacji, jeśli komunikat zawiera takie pole): while (true) { ... foreach ($allIds as $messageId) { ... if ($isNew || $isChanged) { print getMessageXML($newMessage); // wyświetla "..." flush(); } } sleep(1); }

Przeglądarka tworzy żądanie przy użyciu standardowych metod open() i send(). Co ciekawe, nie ma tu metody obsługi zdarzenia onreadystatechange, ponieważ aplikacja używa zegara do sprawdzania dostępności tekstu. W przeglądarce Firefox uzasadnione może być dodanie metody obsługi zdarzenia, ponieważ zdarzenie onreadystatechange jest wywoływane za każdym razem, kiedy zmienia się odpowiedź.

Strumieniowanie HTTP

|

135

xhReq.open("GET", "content.phtml", true); xhReq.send(null); // Nie należy martwić się zdarzeniem onreadystatechange - nie powinno zamykać // połączenia, a i tak sprawdzamy wartość właściwości responseText ... pollTimer = setInterval(pollLatestResponse, 2000);

Funkcja pollLatestResponse() wczytuje wyświetlany tekst. Śledzi ostatni wykryty komunikat, używając właściwości nextReadPos. Na przykład, jeśli funkcja przetworzyła dwa 500znakowe komunikaty, wartość tej właściwości wynosi 1001. Od tego miejsca rozpoczyna się wyszukiwanie nowego komunikatu. Aplikacja przetworzy każdy kompletny komunikat znajdujący się za tą pozycją. Możesz wyobrazić sobie odpowiedź jako kolejkę roboczą. Zauważ, że algorytm nie zakłada, iż odpowiedzi kończą się znacznikiem . Jeśli komunikat nie jest w pełni gotowy, zostanie zignorowany. function pollLatestResponse() { var allMessages = xhReq.responseText; ... do { var unprotected = allMessages.substring(nextReadPos); var messageXMLEndIndex = unprocessed.indexOf(""); if (messageXMLEndIndex != -1) { var endOfFirstMessageIndex = messageXMLEndIndex + "".length; var anUpdate = unprocessed.substring(0, endOfFirstMessageIndex); renderMessage(anUpdate); nextReadPos += endOfFirstMessageIndex; } } while (messageXMLEndIndex != -1);

Po pewnym czasie przeglądarka wywoła metodę xhReq.abort(). W tym przypadku to przeglądarka zamyka połączenie, jednak, jak już wspomniałem, równie dobrze może odpowiadać za to serwer. Zauważ jeszcze, że przesyłanie danych wciąż odbywa się przy użyciu biblioteki AjaxCaller. Dlatego jeśli użytkownik prześle nowy komunikat, zostanie on szybko przesłany strumieniem na serwer, a przeglądarka może szybko pobrać nowy komunikat i go wyświetlić.

Alternatywy Okresowe odświeżanie Okresowe odświeżanie (rozdział 10.) to oczywista alternatywa dla strumieniowania HTTP. Technika ta udaje długotrwałe połączenie, z dużą częstotliwością przesyłając zapytania na serwer. Ogólnie okresowe odświeżanie lepiej się skaluje i łatwiej zaimplementować je w przenośny, stabilny sposób. Jednak warto zastanowić się nad strumieniowaniem HTTP w systemach takich jak intranety, z których jednocześnie korzysta niewielu użytkowników, autor ma pewną kontrolę nad infrastrukturą, a każde połączenie jest stosunkowo ważne.

Połączenia TCP Używając Wzbogaconych wtyczek, takich jak Flash czy Java, przeglądarka może zainicjować połączenie TCP. Główną zaletą stosowania tego protokołu jest elastyczność. Ten protokół nadaje się do obsługi długotrwałych połączeń, w przeciwieństwie do HTTP, którego bezstanowość powoduje, że serwery nie radzą sobie zbyt dobrze z takimi połączeniami. Jedną z bibliotek,

136

|

Rozdział 6. Zdalne wywoływanie poleceń

które ułatwiają stosowanie wzbogaconych wtyczek, jest Stream (http://www.stormtide.ca/Stream/), składająca się z niewidocznego komponentu Flash i serwera wraz z interfejsem API umożliwiającym ich używanie.

Wzorce powiązane Zdarzenia rozproszone Możesz używać Zdarzeń rozproszonych (rozdział 10.) do koordynowania działania przeglądarki po otrzymaniu przez nią odpowiedzi.

Metafora Wyobraź sobie osobę „blogującą na żywo” w czasie konferencji i nieustannie opisującą, co dzieje się w danym momencie.

Chcesz wiedzieć więcej? • Donovan Preston opowiada o tworzeniu LivePage (http://ulaluma.com/pyx/archives/2005/05/

multiuser_progr.html). • Alex Russell opowiada o Comet (http://alex.dojotoolkit.org/?p=545).

Podziękowania Chcę podziękować Donovanowi Prestonowi i Kevinowi Arthurowi za pomoc w wyjaśnieniu wzorców i ich związków z odpowiednimi projektami — LivePage i Stream

JavaScript na żądanie Działanie, Samodzielne ładowanie, Międzydomenowe, Dynamiczne, JavaScript, Leniwe wczytywanie, Na żądanie, Znacznik script

Rysunek 6.13. JavaScript na żądanie JavaScript na żądanie

|

137

Historia zadania Jan Zwyczajny loguje się na witrynę internetową banku. Formularz logowania pojawia się w zwykły sposób, a po wpisaniu przez Jana nazwy użytkownika i hasła przeglądarka w tle pobiera kod JavaScript potrzebny do obsługi reszty aplikacji.

Problem W jaki sposób przekazać duże ilości kodu JavaScript?

Czynniki • Aplikacje Ajax wykorzystują duże ilości kodu JavaScript. Bardziej złożone działania po

stronie przeglądarki wymagają pobierania większej ilości takiego kodu. • Pobieranie kodu JavaScript ma wpływ na wydajność. Interakcja nie może się w pełni

rozpocząć do czasu pobrania całego początkowego kodu JavaScript. • W przypadku dużych ilości kodu JavaScript istotna jest także przepustowość łączy. Często

aplikacja nie używa całego pobranego kodu, co powoduje marnotrawienie przepustowości.

Rozwiązanie Pobieraj i uruchamiaj fragmenty kodu JavaScript. Początkowa strona może zawierać małą ilość kodu JavaScript, który, między innymi, zawiera kod służący do samodzielnego wczytywania dalszych fragmentów kodu. Takie rozwiązanie umożliwiają dwie techniki: Znaczniki script i Funkcja eval. Poniżej opisane są obie możliwości, a dalsza część wzorca przedstawia trzy jego główne zastosowania. W przypadku Znaczników script należy manipulować modelem DOM w celu wstawienia nowego elementu script na stronę. Może jest to zaskakujące, ale efekt będzie taki sam, jakby znacznik

...

Leniwe wczytywanie bazuje na tym samym podejściu, pobierając jedynie minimalny moduł inicjujący w początkowym pliku HTML:



...

Moduł inicjujący zawiera deklaracje wszystkich operacji, które są potrzebne do uruchomienia strony, a czasem także wystarczają do typowych zastosowań aplikacji. Ponadto moduł ten musi zawierać funkcję samodzielnie wczytującą dane, która na żądanie pobiera nowy kod JavaScript. Drugie zastosowanie, komunikaty o działaniach, to odmiana wzorca Komunikaty HTML. Podczas gdy leniwe wczytywanie powoduje wczytanie kodu bibliotecznego służącego do wykonywania typowych operacji, komunikaty o działaniach pobierają tymczasowy kod i natychmiast wywołują dla niego funkcję eval(). W tym przypadku pobierane skrypty nie są opakowane w funkcję (choć mogą definiować wywoływane funkcje). W tej technice przeglądarka pyta serwer o to, co ma robić. Skrypty działające w różnych domenach to trzecie zastosowanie omawianego wzorca. Znaczniki script zawsze umożliwiały dodawanie kodu JavaScript z zewnętrznych domen. Ta zasada nie tylko stosuje się do statycznych znaczników

Następnie można wczytywać pakiety przy użyciu interfejsu API platformy Dojo: dojo.hostenv.moduleLoaded("dojo.aDojoPackage.*");

Uruchomienie powyższego polecenie spowoduje automatyczne pobranie przez platformę Dojo modułów z grupy dojo.aDojoPackage.*.

JavaScript na żądanie

|

143

System importowania skryptów z JSAN Sieć archiwów kodu JavaScript (ang. JavaScript Archive Network — JSAN) to repozytorium skryptów dostępne w internecie. Obejmuje ono także bibliotekę służącą do importowania modułów JavaScript, która to technika także przypomina podobny mechanizm języka Java. Poniższe wywołanie: JSAN.use('Module.To.Include');

jest odwzorowywane na Module/To/Include.js. JSAN.includePath definiuje wszystkie możliwe katalogi najwyższego poziomu, w których może znajdować się katalog z dołączanymi plikami. Jeśli wartość includePath to ["/", "/js"], sieć JSAN będzie poszukiwać katalogów /Module/To/Include i /js/Module/To/Include.

Przykładowy kod: Wiki według wzorca Ajax JavaScript na żądanie Wzorzec JavaScript na żądanie w programie demonstracyjnym Wiki W podstawowym programie demonstracyjnym Wiki (http://przyklady.helion.pl/ajaxwp/run/wiki) wszystkie skrypty JavaScript są pobierane od razu. Jednak często użytkownicy jedynie czytają informacje — po co więc wczytywać kod służący do ich zapisywania? Dlatego poniższy program zostanie utworzony w wyniku refaktoryzacji pod kątem wzorca JavaScript na żądanie. Wymaga to trzech etapów:

1. Funkcję uploadMessage trzeba przenieść do drugiego pliku JavaScript, upload.js. Na razie program nie korzysta ze wzorca JavaScript na żądanie, ponieważ oba pliki są dołączane od razu.

2. Dalsza refaktoryzacja wprowadza wzorzec JavaScript na żądanie poprzez zagwaranto-

wanie, że plik upload.js zostanie pobrany dopiero przy dodawaniu danych do Wiki przez użytkownika. Ta wersja używa Znaczników script.

3. Następna refaktoryzacja polega na zastąpieniu techniki Znaczników script Funkcją eval.

Odrębny kod JavaScript — pobieranie pliku upload.js W pierwszej refaktoryzacji (http://przyklady.helion.pl/ajaxwp/run/wiki/seperateJS/) funkcja służąca do wczytywania danych do Wiki zostaje po prostu przeniesiona do odrębnego pliku JavaScript. Początkowy kod HTML dołącza także ten nowy plik:

W programie znajduje się teraz nowa funkcja służąca do pobierania skryptu. Aby uniknąć wielokrotnego wczytywania go, ochronna klauzula sprawdza, czy funkcja uploadMessages już istnieje, a jeśli tak jest — funkcja pobierająca skrypt natychmiast zwraca sterowanie. Zgodnie z techniką Znaczników script funkcja wczytująca skrypt dodaje element script do nagłówka dokumentu, inicjując go przy użyciu adresu URL pliku upload.js i standardowego atrybutu type języka JavaScript: function ensureUploadScriptIsLoaded() { if (self.uploadMessages) { // Już istnieje return; } var head = document.getElementsByTagName("head")[0]; script = document.createElement('script'); script.id = 'uploadScript'; script.type = 'text/javascript'; script.src = "upload.js"; head.appendChild(script); }

Skrypt wywołujący musi jedynie wywołać powyższą funkcję. Jednak, jak już wspomniałem w punkcie „Rozwiązanie”, możliwe jest asynchroniczne pobranie pliku, dlatego trzeba przeprowadzić jeszcze jeden test: ensureUploadScriptIsLoaded(); if (self.uploadedMessages) { // Jeśli jeszcze nie został wczytany, należy czkać na następną synchronizację uploadMessages(pendingMessages, onMessagesLoaded); ...

Jeśli skrypty zostały wczytane przez przeglądarkę asynchronicznie, test za pierwszym razem się nie powiedzie, ponieważ pobierana funkcja zwróci sterowanie przed pobraniem skryptu. Jednak w tej konkretnej aplikacji nie jest to zbyt istotne, ponieważ cała sekwencja odpowiedzialna za synchronizację jest uruchamiana co pięć sekund. Jeśli funkcja służąca do wczytywania danych nie jest jeszcze dostępna, powinna pojawić się po pięciu sekundach, co jest wystarczająco dobrym rozwiązaniem.

JavaScript na żądanie — funkcja eval Kod używający Znaczników script poddamy refaktoryzacji, tak aby korzystał z Funkcji eval. W nowym rozwiązaniu do pobierania pliku upload.js i wykonywania go posłużą Wywołania XMLHttpRequest. Początkowy skrypt, wiki.js, różni się jedynie implementacją operacji pobierania kodu JavaScript. Skrypt po prostu przekazuje tekstową odpowiedź do funkcji eval: function ensureUploadScriptIsLoaded() { if (self.uploadMessages) { // Już istnieje return; } ajaxCaller.getPlainText("upload.js", function(jsText) { eval(jsText); }); }

JavaScript na żądanie

|

145

Zmienić się musi także odpowiedź z kodem JavaScript. Jeśli odpowiedź po prostu zdefiniuje funkcję globalną, tak jak wcześniej: function uploadMessages(pendingMessages, messageResponseHandler) { ... }

to po zakończeniu wykonywania funkcji aplikacja ją usunie. Pożądany efekt można osiągnąć, deklarując funkcję w następujący sposób (to rozwiązanie dołącza funkcję do bieżącego okna, dlatego będzie ona dostępna po przetworzeniu skryptu): uploadMessages = function(pendingMessages, messageResponseHandler) { ... }

Wzorce powiązane Komunikaty HTML Zastosowanie omawianego wzorca w komunikatach o działaniu przypomina Komunikaty HTML (rozdział 9.) i jest zgodne z podobną „serwerocentryczną” filozofią dynamicznego kontrolowania działania przeglądarki poprzez kod działający po stronie serwera.

Pobieranie na podstawie przewidywania We wzorcu JavaScript na żądanie można zastosować Pobieranie na podstawie przewidywania (rozdział 13.), pobierając kod JavaScript wtedy, kiedy można przewidzieć, że wkrótce będzie potrzebny.

Wieloetapowe pobieranie Zastosowanie omawianego wzorca do leniwego wczytywania przypomina wzorzec Wieloetapowe pobieranie, który także polega na odraczaniu pobierania danych. W wieloetapowym pobieraniu nacisk położony jest raczej na wczytywaniu semantyki i zawartości strony, a nie kodu JavaScript. Ponadto wieloetapowe pobieranie dotyczy wczytywania danych na podstawie zaplanowanej sekwencji, a nie na żądanie.

Chcesz wiedzieć więcej? Dynamiczna obsługa danych przy użyciu modelu DOM i zdalnego wywoływania skryptów. Samouczek autorstwa Thomasa Brattliego (http://www.dhtmlcentral.com/tutorials/tutorials.asp?id=11).

146

|

Rozdział 6. Zdalne wywoływanie poleceń

ROZDZIAŁ 7.

Działania dynamiczne

Przy użyciu technologii opisanych do tej pory możemy już zmieniać wygląd i komunikować się z serwerem. Co jednak może wyzwalać takie operacje? Aplikacje Ajax zwykle są sterowane z poziomu przeglądarki, dlatego właśnie tam rozpoczynają się różne działania. Mówiąc ogólnie, są dwa sposoby wyzwalania operacji: Działania użytkownika, takie jak kliknięcie myszą czy wciśnięcie klawisza, oraz Planowanie, które pozwala zaplanować wykonanie operacji w określonym momencie. Niniejszy rozdział opisuje obie te możliwości.

Działania użytkownika Działanie, Zmiana, Kliknięcie, Kontrola, DHTML, DOM, Zdarzenia, Klawiatura, Mysz, Ruch, Typ, Kontrolka

Rysunek 7.1. Działania użytkownika

Historia zadania Krystyna Pieniążek zamawia wycieczkę przy użyciu aplikacji służącej do planowania podróży firmowych. Widzi formularz zawierający standardowe pola i wybiera różne lokalizacje. Przed formularzem pojawia się lista miast i Krystyna wybiera Paryż. Obok listy miast pojawia się

147

inna lista, zawierająca znane hotele. Krystyna wybiera hotel Hilton, po czym obie listy znikają. Krystyna może komfortowo kontynuować pracę, a zaktualizowany formularz wyświetla teraz cel wycieczki — „Paryż Hilton”.

Problem W jaki sposób aplikacja może reagować na działania użytkownika?

Czynniki • Użytkownicy mogą wchodzić ze złożonymi aplikacjami w częste i zróżnicowane interakcje. • Odpowiedzi muszą pojawiać się jak najszybciej, co poprawia wydajność, podtrzymuje

uwagę użytkowników i pomaga im zrozumieć przyczynowo-skutkowy model aplikacji. • Używanie przesyłania formularzy jako jedynego sposobu reagowania na działania użyt-

kowników jest powolne i ogranicza interaktywność aplikacji.

Rozwiązanie Obsługuj większość działań użytkowników przy użyciu kodu JavaScript poprzez metody obsługi zdarzeń. Istotą Ajaksa jest rozbudowana interakcja bazująca na przeglądarce, którą umożliwiają zdarzenia modelu DOM. Obiekty DOM pozwalają rejestrować metody obsługi zdarzeń, czyli funkcje powiadamiane o zajściu zdarzenia. Model wywołań zwrotnych powinien być znany wszystkim programistom, którzy kiedykolwiek używali platform GUI do tworzenia aplikacji stacjonarnych. Załóżmy, że chcesz uruchomić poniższą funkcję w odpowiedzi na kliknięcie przez użytkownika przycisku zamykającego aplikację: function shutdown() { if (confirm("Czy na pewno chcesz zamknąć aplikację?")) { postShutdownMessageToServer(); } }

Najprostszy sposób to zadeklarowanie przycisku powiązanego z metodą obsługi zdarzenia onclick: Zakończ ...





Wzorce powiązane Testy usług Testy usług (następny wzorzec) to dopełnienie testów po stronie przeglądarki i dotyczą głównie interfejsu udostępnianego po stronie serwera, a nie aplikacji działającej w przeglądarce. Jeśli chcesz się upewnić, że wszystkie elementy systemu działają poprawnie, musisz przetestować kod działający po obu stronach.

Rejestrowanie Rejestrowanie (rozdział 18.) informacji może pomóc w zdiagnozowaniu problemu.

Testy usług Zautomatyzowane, JavaScript, Zdalne, Testy jednostek, TDD, Testować, Usługi sieciowe, XMLHttpRequest

Rysunek 19.4. Testy usług

Testy usług

|

581

Historia programisty Aleksander Program tworzy aplikację handlową. Po stronie serwera znajdują się usługi podające ceny i przyjmujące zamówienia. Aby ułatwić tworzenie i testowanie usług, Aleksander tworzy zestaw testów usług. Jeden z tych testów przesyła zamówienie i sprawdza, czy baza danych je zapisuje. Przygotowane testy są zautomatyzowane i można je wykonywać za każdym razem, kiedy w projekcie zostaną wprowadzone zmiany.

Problem Jak testować usługi sieciowe?

Rozwiązanie Utwórz zautomatyzowane testy usług sieciowych, używając klientów HTTP do symulowania interakcji prowadzonej zwykle z serwerem przez przeglądarkę. Interakcja przeglądarki z serwerem w aplikacjach Ajax polega zazwyczaj na przesyłaniu sekwencji Wywołań XMLHttpRequest (rozdział 6.). Jest to szczęśliwy zbieg okoliczności, ponieważ testy usług wymagają zwykle zasymulowania działania przeglądarki — przekazywania odpowiednich żądań i sprawdzania odpowiedzi. Czasem sprawdzanie poprawności może obejmować także analizę zdarzeń zachodzących na serwerze, na przykład zmiany stanu bazy danych lub komunikatów przesyłanych do zewnętrznego systemu. Same testy można tworzyć przy użyciu dowolnego języka i platformy testowej, ponieważ są one całkowicie oddzielone zarówno od przeglądarki, jak i od serwera. Jedynym praktycznym ograniczeniem jest to, że powinno być możliwe uruchamianie testów jako skryptów, aby umożliwić ciągłą integrację. Wiele języków udostępnia biblioteki do tworzenia klientów HTTP, dlatego łatwo jest utworzyć test przekazujący żądania na serwer i zawierający asercje dotyczące odpowiedzi. Jest nawet kilka platform klienckich, na przykład HTTPUnit (http://httpunit.sourceforge.net/), przeznaczonych specjalnie do testowania aplikacji sieciowych. Przeważnie używa się ich do testowania zwykłych programów sieciowych, w których odpowiedź zawiera całą stronę, jednak testy te nadają się także do sprawdzania krótkich odpowiedzi, jakie zwykle są zwracane przez usługi sieciowe. Szczególnie łatwe powinno być testowanie Usług REST (rozdział 9.), ponieważ zwykle zwracają one ustrukturyzowane odpowiedzi, które łatwo jest przetworzyć. Ponadto w przypadku zastosowania takich usług nie trzeba ustawiać stanu komunikacji i śledzić go. Nieco trudniejsze jest testowanie usług zwracających Komunikaty HTML (rozdział 9.). Przekazanie wyrażenia 5+5 zawsze pozwala założyć zwrócenie wartości 10 w przypadku Komunikatu ze zwykłym tekstem (rozdział 9.), jednak nie zawsze Ta odpowiedź to 10!!!, jeśli używane są Komunikaty HTML.

Narzędzia Net::HTTP języka Ruby Net::HTTP (http://www.ruby-doc.org/stdlib/libdoc/net/http/rdoc/) to moduł klienta HTTP dla języka Ruby udostępniany razem ze standardową dystrybucją. Moduł ten został użyty w ilustracji refaktoryzacji przedstawionej poniżej.

582

|

Rozdział 19. Testowanie

Jakarta HTTPClient Jakarta HTTPClient (http://jakarta.apache.org/commons/httpclient/) to platforma klienta HTTP dla języka Java oferująca wiele możliwości.

PHP HTTPClient HTTPClient autorstwa Simona Willisona (http://scripts.incutio.com/httpclient/) to podstawowa platforma klienta HTTP dla języka PHP.

Przykładowy kod: testowanie usług Podstawowa wersja programu Reader (http://przyklady.helion.pl/ajaxwp/run/reader/) używa Symulowanych usług do pobierania informacji z serwera. Najpierw została utworzona usługa testowa na podstawie symulowanych usług, a test posłużył do zaprojektowania prawdziwych usług. Wcześniej w punkcie „Rozwiązanie” wspomniałem o tym, że język, w którym napisany jest klient HTTP, jest całkowicie niezależny od języków używanych po stronie serwera lub przeglądarki. Nie są to wyłącznie rozważania teoretyczne, ponieważ niektóre języki (na przykład Ruby lub Perl) szczególnie dobrze nadają się do manipulowania łańcuchami znaków. Aby to udowodnić, w niniejszym przykładzie użyto modułu Net::HTTP języka Ruby. Testowana usługa to patternSummary.phtml (http://przyklady.helion.pl/ajaxwp/run/reader/ patternSummery.phtml), która przyjmuje nazwę wzorca i zwraca związane z nim rozwiązanie. Przypadek testowy jest bardzo prosty — żąda informacji o wzorcu Slider i sprawdza, czy zwrócone dane pasują do prostego wyrażenia regularnego: require "test/unit" require "net/http" class PatternServiceTest < Test::Unit::TestCase def test_slider sliderResponse = grabPattern("Slider"); regex = /^\s*Slider\s*\ .+?.+ /mx; assert_match(regex, sliderResponse.body); end ... def grabPattern(patternName) session = Net::HTTP.new('ajaxLocal', 80); response = session.get("/run/reader/logging/realService/" + "patternSummary.phtml?patternName=" + patternName); assert_equal("200", response.code); return_response; end end

Wzorce powiązane Symulowanie usług Czasem można rozpocząć tworzenie testu, używając Symulacji usługi (opis we wcześniejszej części rozdziału), a następnie przekształcić ją w rzeczywistą usługę, jednocześnie modyfikując test. Testy usług

| 583

Testy po stronie przeglądarki Testy po stronie przeglądarki (opis we wcześniejszej części rozdziału) to dobre dopełnienie testów usług, ponieważ te pierwsze służą do testowania działania kodu po stronie przeglądarki, a te ostatnie pozwalają sprawdzić, czy serwer obsługuje przeglądarkę w poprawny sposób.

Testy systemu Zautomatyzowane, Testy funkcjonalne, JavaScript, Testy wydajności, Regresja, Robot, Testy jednostek, TDD, Testować

Rysunek 19.5. Testy systemu

Historia programisty Aleksandra Program zakończyła pierwszą wersję nowej aplikacji Ajax i chce utworzyć zautomatyzowany test całego rozwiązania. Przy użyciu aplikacji testowej Aleksandra zapisuje typowe przykłady użycia, które można później odtworzyć. Oprogramowanie ma informacje o stanie końcowym, które zostaną użyte do sprawdzenia poprawności działania aplikacji w czasie zautomatyzowanego odtwarzania przypadków korzystania z systemu.

Problem Jak można testować całe aplikacje Ajax?

Rozwiązanie Utwórz zautomatyzowane testy symulujące działania użytkownika i sprawdź wyniki. Testy systemu sprawdzają cały system w podobny sposób, jak zrobiłby to użytkownik. Najczęściej stosowane testy systemu to testy funkcjonalne (sprawdzające funkcjonalność), jednak można sprawdzać także takie właściwości jak wydajność i stabilność. Choć często takie testy przeprowadza się ręcznie (użytkownicy klikają przyciski i poruszają myszą), dużo lepiej jest w jak największym stopniu je zautomatyzować, aby umożliwić ciągłą integrację. 584 |

Rozdział 19. Testowanie

Zautomatyzowane testy systemu są dość trudne, jednak narzędzia służące do ich obsługi są coraz lepsze. Te narzędzia można podzielić na kilka kategorii: Kontrolery przeglądarki (rysunek 19.6) Wyspecjalizowane, przypominające „robota” narzędzie testowe uruchamia przeglądarkę, a następnie używa interfejsu API używanego systemu operacyjnego do sprawdzenia efektów interakcji użytkownika z przeglądarką. Niektóre z kontrolerów komercyjnych umożliwiają rejestrację działań użytkownika w celu ich późniejszego odtworzenia.

Rysunek 19.6. Kontroler przeglądarki

Zagnieżdżone skrypty uruchamiane w przeglądarce (rysunek 19.7) Można uruchomić aplikację w standardowej przeglądarce i zagnieździć na stronie Testy po stronie przeglądarki. Test może bazować na sztuczkach symulujących działania użytkownika za pomocą języka JavaScript. Konieczność wykorzystania przeglądarki nie powinna zniechęcać do korzystania z tej techniki, ponieważ można użyć narzędzi do ciągłej integracji, na przykład programu Ant, do koordynowania Testów po stronie przeglądarki, jak wspomniałem o tym we wcześniejszej części rozdziału.

Rysunek 19.7. Skrypty zagnieżdżone uruchamiane w przeglądarce

Testy systemu

| 585

Symulacja działań przeglądarki (rysunek 19.8) Aplikacja jest wykonywana przez model prawdziwej przeglądarki. Zwykle symulacja pobiera stronę z adresu URL i tworzy model DOM reprezentujący tę stronę. Następnie można manipulować modelem. Symulacja umożliwia reprezentację kliknięcia przycisku lub przesłania formularza. Choć dostępnych jest kilka takich platform, dużym problemem dla programistów Ajaksa jest poprawne zasymulowanie działania kodu JavaScript. Dostępne są interpretery języka JavaScript dla kilku języków programowania, dlatego symulacja działań przeglądarki może ich używać w celu realistycznego przedstawienia interakcji w aplikacji Ajax.

Rysunek 19.8. Symulacja działań przeglądarki

Dwa pierwsze podejścia obejmują wykorzystanie prawdziwej przeglądarki, dzięki czemu testy są bardziej realistyczne, ale oznacza to, że trzeba je uruchamiać na maszynie, na której można uruchomić przeglądarkę lub w jakiś sposób zdalnie ją kontrolować. Testy systemu wymagają automatyzacji nie tylko działań użytkownika, ale także sprawdzania poprawności wyników. Podobnie jak w przypadku innych testów wyniki można sprawdzać przy użyciu kombinacji asercji dotyczących modelu DOM oraz stanu serwera.

Narzędzia GhostTrain GhostTrain z biblioteki Scriptaculous (http://wiki.script.aculo.us/scriptaculous/show/GhostTrain) to Zagnieżdżony skrypt uruchamiany w przeglądarce umożliwiający rejestrowanie operacji. Po uruchomieniu trybu rejestrowania przypadek testowy biblioteki Scriptaculous zaczyna być zapisywany w elemencie div. Każdy ruch myszą i wciśnięcie klawisza powoduje zapisanie nowego wiersza przypadku testowego. Następnie można dodać własne asercje dotyczące stanu aplikacji. GhostTrain to bardzo obiecujące narzędzie w fazie rozwoju.

Watir Watir (http://wtr.rubyforge.org) to Kontroler przeglądarki umożliwiający programistom języka Ruby zapisanie w skrypcie zachowania przeglądarki i sprawdzanie zawartości modelu DOM na dowolnym etapie działania programu. Można łatwo zintegrować polecenia obsługiwane przez to narzędzie ze standardowym przypadkiem testowym, na przykład: ie = Watir::IE.start("http://ajaxpatterns.org") ie.button(:name, "Search").click

Obecnie Watir współpracuje tylko z przeglądarką IE. 586 |

Rozdział 19. Testowanie

Selenium Selenium (http://selenium.thoughtworks.com/) to narzędzie o otwartym dostępie do kodu źródłowego autorstwa programistów z firmy Thoughtworks. Jest to platforma dla Zagnieżdżonych skryptów uruchamianych w przeglądarce współpracująca z przeglądarkami IE, Mozilla, Firefox i Safari. Komponent języka JavaScript tej platformy jest zagnieżdżony jako element test w aplikacji działającej w przeglądarce i komunikuje się z komponentem działającym po stronie serwera. Komponent działający po stronie serwera można umieścić w kilku lokalizacjach. Może się on znaleźć na serwerze zawierającym witrynę i udostępniać krótkie podsumowanie na tworzonej stronie. Można go też umieścić na odrębnym serwerze, który kontroluje działanie przeglądarki (podobnie jak Kontroler przeglądarki). Wtedy komponent zagnieżdżony po stronie przeglądarki po prostu przekazuje polecenia serwera do aplikacji.

HTTPUnit HTTPUnit (http://httpunit.sourceforge.net/index.html) to platforma o otwartym dostępie do kodu źródłowego służąca do testowania kodu w języku Java. Platforma ta bazuje na JUnit i została zaprojektowana z myślą o testowaniu aplikacji sieciowych. Działa jako Symulacja przeglądarki i przekształca strony HTML na obiekt HTMLPage języka Java, który jest nakładką dla modelu DOM oryginalnego pliku HTML. Platforma HTTPUnit symuluje działanie kodu JavaScript, delegując wywołania do silnika Rhino, jednak obsługa języka JavaScript nie jest kompletna.

DojoToolkit Dojo Toolkit (http://dojotoolkit.org/docs/compressor_system.html) to Symulacja przeglądarki bazująca na języku Java i używająca Rhino w celu umożliwienia uruchamiania testów jako zadań programu Ant. Biorąc pod uwagę stopień rozwoju projektu oraz koncentrację na Ajaksie, można mieć nadzieję, że w przyszłości będzie to bardzo wartościowe narzędzie.

Przykładowy kod: GhostTrain z biblioteki Scriptaculous Program Reader (http://przyklady.helion.pl/ajaxwp/run/reader/logging/realService/ghost/) został poddany refaktoryzacji tak, aby wykorzystywał opisane wcześniej narzędzie GhostTrain biblioteki Scriptaculous (http://wiki.script.aculo.us/scriptaculous/show/GhostTrain). Można wcisnąć klawisz Escape w dowolnym momencie przeglądania dokumentu, a następnie użyć przycisków w celu zapisania przypadku testowego, który można następnie odtworzyć (rysunek 19.9). Aby połączyć się z narzędziem GhostTrain, trzeba dołączyć pliki biblioteki Scriptaculous (to sporo pobierania, warto jednak pamiętać, że poniższych plików nie trzeba dołączać do wersji produkcyjnej):

src="/run/Lib/js/sc/controls.js"> src="/run/Lib/js/sc/effects.js"> src="unitest.js"> src="ghosttrain.js">

Testy systemu

|

587

Rysunek 19.9. GhostTrain

Oprócz tego należy jedynie zarejestrować obiekt GhostTrain jako obiekt obsługujący zdarzenia wciśnięcia przycisków. Ten obiekt obsługuje także pozostałe operacje związane z inicjowaniem: window.onload = function() { Event.observe(document, 'keypress', GhostTrain.intercept, true); ... }

Wzorce powiązane Testy po stronie przeglądarki Platformy do przeprowadzania testów systemu działające jako Zagnieżdżone skrypty uruchamiane w przeglądarce są odmianą Testów po stronie przeglądarki (opis we wcześniejszej części rozdziału).

Symulowanie usług Na potrzeby testów integracji można skonfigurować serwer tak, aby współpracował z Symulacją usługi (opis we wcześniejszej części rozdziału). W ten sposób można zachować ścisłą kontrolę nad działaniem serwera, a stan końcowy określać deterministycznie.

Chcesz wiedzieć więcej? Opis platformy do przeprowadzania testów funkcjonalnych (http://www.softwareqatest.com/ qatweb1.html#FUNC).

588 |

Rozdział 19. Testowanie

Dodatki

W tej części znajduje się kilka dodatków. Dodatek A, „Platformy i biblioteki Ajaksa”, zawiera krótki opis platform i bibliotek obsługujących Ajaksa w wielu językach programowania i dostępnych na różnych licencjach. Dodatek B, „Uruchamianie przykładowego kodu”, zawiera instrukcje ułatwiające uruchomienie na własnym komputerze kodu z samouczka oraz programów demonstracyjnych. Dodatek C, „Wzorce i języki wzorców”, przedstawia ogólne rozważania na temat wzorców, języków wzorców oraz miejsca wzorców Ajax w tym kontekście. W dodatku D, „Literatura cytowana”, znajduje się lista pozycji wspomnianych w niniejszej książce.

DODATEK A

Platformy i biblioteki Ajaksa

Powstanie licznych bibliotek i platform to jeden ze szczęśliwych skutków wzrostu popularności Ajaksa. Narzędzia te przyjmują rozmaite kształty oraz rozmiary i są dostępne na różnych licencjach. W opisie wzorców Ajax starałem się podkreślać znaczenie platform i bibliotek. Dobrze jest znać niskopoziomowe szczegóły, jednak często nie warto implementować ich samodzielnie. Lista przedstawiona w tym dodatku to dobre uzupełnienie dla wzorców Ajax. Pierwszą listę utworzyłem już w czerwcu 2005 roku, kiedy to opisałem 20 produktów. Wówczas wydało mi się to liczbą przytłaczającą. Lista przechowywana jest w publicznej wiki i rozrosła się do 160 narzędzi, a bez wątpienia będzie ich jeszcze więcej. Najnowszą wersję listy znajdziesz na stronie http://ajaxpatterns.org /Ajax_Frameworks. Niektóre z tych narzędzi były dostępne na długo, zanim Ajax stał się „Ajaksem”, jednak znalazły się w tym dodatku, ponieważ ułatwiają tworzenie programów zgodnych z tym podejściem. Lista przedstawiona w niniejszym dodatku to nieco zmodyfikowany wycinek wiki ze stycznia 2006 roku. Wiele opisów zostało podanych przez autorów i użytkowników projektów. Dwa pierwsze punkty dotyczą platform dla języka JavaScript, które wymagają udostępnienia własnych narzędzi zintegrowania ich z kodem działającym po stronie serwera. Następnie przedstawione są platformy dla licznych środowisk działających po stronie serwera, a wiele z nich udostępnia interfejsy API dla języka JavaScript i dla języka używanego po stronie serwera. Warto zwrócić uwagę na punkt dotyczący różnych języków, ponieważ niektóre platformy obsługują kilka środowisk działających po stronie serwera. Dlatego warto zapoznać się także z tym podpunktem obok listy opisującej narzędzia dla środowiska, którym jesteś zainteresowany. Osoby zaczynające używać Ajaksa często proszą mnie o podanie „łatwej” platformy, która pomoże w stawianiu pierwszych kroków w nowej technologii. Dlatego ryzykując pominięcie wielu wartościowych projektów, w każdym punkcie wyróżniam kilka popularnych platform. Jest to oczywiście subiektywny wybór związany bardziej z popularnością narzędzi niż ich wartością. Zachęcam do dalszych poszukiwań przed rozpoczęciem pracy nad poważnymi projektami. Ponadto warto przyjrzeć się poszczególnym wzorcom, ponieważ w wielu z nich opisane są specyficzne platformy.

591

Ogólne platformy dla języka JavaScript Są to biblioteki języka JavaScript służące do dołączania różnej funkcjonalności do przeglądarek, zwykle w sposób rozwiązujący problemy z przenośnością, co opisuje wzorzec Komponenty działające w różnych przeglądarkach w rozdziale 12. Biblioteka Prototype jest niezwykle popularna, jeśli chodzi o obsługę ogólnej infrastruktury języka JavaScript, a wiele wymienionych tu platform bazuje właśnie na niej. Wśród narzędzi wyższego poziomu prawdopodobnie najbardziej znane to Dojo i Scriptaculous. Oba stanowią dobry wybór, jeśli szukasz biblioteki ogólnej. Także Mochikit i OpenRico to dość popularne narzędzia. Wśród komercyjnych produktów duże zainteresowanie wzbudziły Backbase i Tibco General Interface, warto jednak pamiętać, że produkty przedstawione w tym punkcie są bardzo zróżnicowane, a ich przydatność zależy od tego, czego oczekuje programista.

AjaxFace (od 2005) AjaxFace (http://www.vertexlogic.com) to platforma języka JavaScript służąca do tworzenia interfejsów użytkownika w aplikacjach Ajax. • Wysokopoziomowy interfejs API języka JavaScript służący do tworzenia interfejsu użyt-

kownika. • Otwarta architektura do przesyłania danych na zaplecze i pobierania ich stamtąd. • Automatyczna synchronizacja danych i interfejsu użytkownika. • Łatwe rozszerzanie. • Wysoka wydajność. • Łatwe dostosowywanie wyglądu i stylu poprzez dobrze zdefiniowane arkusze stylów. • Program demonstracyjny na stronie http://www.vertexlogic.com/demo.html. • Licencja komercyjna. Autorem jest VertexLogic.

Backbase (z 2003 roku) Backbase (http://www.backbase.com) to wszechstronna platforma dla aplikacji Ajax obsługująca kod uruchamiany po stronie przeglądarki. Ta platforma obsługuje wiele przeglądarek i jest zgodna z wszystkimi platformami działającymi po stronie serwera (takimi jak Java, .NET, PHP czy ColdFusion). • Wersja darmowa dla użytku osobistego i do celów niekomercyjnych. • Zaawansowane narzędzia dla programistów platformy .NET — wtyczka dla środowiska

Visual Studio 2005. • Zaawansowane narzędzia dla programistów języka Java — integracja z biblioteką znacz-

ników JSF i Ecplise. • Ponad 80 kontrolek i komponentów Ajaksa opisanych na stronie Backbase Explorer

(http://www.backbase.com/demos/explorer/). • Aktywna społeczność programistów Ajaksa na stronie Backbase DebNet (http://www.

backbase.com/#dev/home.xml).

592

|

Dodatek A Platformy i biblioteki Ajaksa

• Programy demonstracyjne i zestawy startowe dostępne na stronie Check Out (http://www.

backbase.com/#home/pulldown/demos.xml). • Licencja komercyjna. Autorem jest Backbase (rok 2003).

Bindows (z 2003 roku) Bindows (http://www.bindows.net) to zestaw do tworzenia oprogramowania (ang. Software Development Kit — SDK) przeznaczony do generowania wysoce interaktywnych aplikacji internetowych, których złożoność można porównać ze współczesnymi programami stacjonarnymi. Platforma ta bazuje na DHTML, JavaScript, CSS i XML. Aplikacje napisane przy użyciu Bindows nie wymagają pobierania pakietów ani instalowania programów po stronie użytkownika — potrzebna jest jedynie przeglądarka (nie jest konieczna obsługa technologii Java, Flash ani ActiveX). Bindows to wiodąca platforma obiektowa do tworzenia aplikacji Ajax. Platforma Bindows udostępnia następujące właściwości: • Obiektowy interfejs API bazujący na klasach. • Kompletny system okienek z wieloma kontrolkami, włączając w to menu, formularze,

tabelki, suwaki, liczniki i wiele innych. • Wiodący zestaw narzędzi do tworzenia niewymagających pamięci aplikacji w architekturze

SOA działających po stronie klienta. • Wbudowana obsługa XML, SOAP i XML-RPC. • Zróżnicowany poziom obsługi — od pojedynczych użytkowników po przedsiębiorstwa. • Wbudowana obsługa Ajaksa.

Środowisko programistyczne Bindows udostępnia: • Obsługę projektów dla przedsiębiorstw. • Obsługę różnych przeglądarek i platform. • Architekturę niezależną od serwera. • Współpracę z nowymi i istniejącymi zasobami. • Jednolitą metodologię rozwoju oprogramowania. • Licencja komercyjna. Autorem jest MB Technologies (z siedzibą w GA, USA, podczas

gdy główne centrum programistyczne znajduje się w Szwecji; licencja została utworzona w 2002 roku).

Dojo (z września 2004 roku) Dojo (http://dojotoolkit.org/) zapewnia wszechstronną obsługę kontrolek oraz przesyłania komunikatów między przeglądarką a serwerem: • Zaawansowana obsługa instalacji, między innymi pakiety bazujące na zależnościach

i pakowanie potrzebnych bibliotek do jednego pliku (zobacz wzorzec JavaScript na żądanie w rozdziale 6.). • Platforma do tworzenia niestandardowych kontrolek w języku JavaScript. • Dobra obsługa przeciągania, efektów graficznych i animacji. Ogólne platformy dla języka JavaScript

|

593

• Obsługa przesyłania komunikatów między przeglądarką i serwerem przy użyciu obiektów

XMLHttpRequest i innych mechanizmów. • Zarządzanie zdarzeniami (zobacz wzorzec Zdarzenia rozproszone w rozdziale 10.). • Obsługa dodawania stron do ulubionych i manipulowania adresem URL w przeglądarce. • Licencja typu open source (Academic Free License 2.1). Autor to Alex Russell (http://alex.

dojotoolkit.org/) z firmy JotSpot (http://www.jot.com/).

Komponenty eBusiness Applications (EBA; z 2002 roku) EBA (http://www.ebusiness-apps.com/) udostępnia niezależne komponenty Ajaksa umożliwiające wpisywanie i analizę danych: • Biblioteka wbudowanych kontrolek współpracująca z różnymi platformami (Java, PHP,

ASP i .NET). • Narzędzie do wpisywania danych i tabelka przypominające arkusz Excel (zobacz wzorzec

Tabele danych w rozdziale 14.). • Listy kombinowane działające w wielu trybach i umożliwiające konfigurację wyszukiwania

na żywo (tryby inteligentnego wyszukiwania, automatycznego uzupełniania, ograniczony i inne; zobacz wzorce Wyszukiwanie na żywo i Podpowiedzi w rozdziale 14.). • Aktywna społeczność użytkowników (forum programistów używających EBA znajduje

się na stronie http://forums.ebusiness-apps.com). • Programy demonstracyjne dostępne w internecie (tabela EBA na stronie http://developer.

ebusiness-apps.com/technologies/webdevelopment/codeandcomponents/ebagrid/productdemos/ griddemos.htm). • Licencja komercyjna. Autorem jest eBusiness Applications.

Engine for Web Applications (z 2002 roku) Engine for Web Applications (http://www.imnmotion.com/projects/engine/) to platforma do tworzenia modułowych komponentów dla aplikacji sieciowych oraz do oddzielania zawartości strony od jej funkcjonalności: • Konfigurowalna instalacja. • Rejestry do zapisywania, pobierania i usuwania obiektów zgodnych ze wspólnym inter-

fejsem. • Obsługa komunikatów służących do publikowania i subskrybowania informacji między

obiektami. • Obsługa transakcji przy asynchronicznej komunikacji między wieloma obiektami. • Obsługa wczytywania modułów klienckich do aplikacji sieciowych i tworzenia list zadań

bazujących na zależnościach. Możliwe jest pobieranie list zadań w formacie XML. • Możliwość łatwego tworzenia w języku XML komponentów o określonych zadaniach

oraz nadających się do wielokrotnego wykorzystania i z automatycznym podłączeniem oraz kontrolą.

594 |

Dodatek A Platformy i biblioteki Ajaksa

• Zapisywanie i pobieranie wartości pól formularza niezależnie od tego, czy dane pole

wciąż istnieje. • Usługa monitorowania umożliwiająca łatwe tworzenie mechanizmów ostrzegawczych

oraz rozwiązań monitorujących w Ajaksie.

• Dokumentacja interfejsu API (http://www.imnmotion.com/projects/engine/api/engine_api.html). • Programy demonstracyjne wraz z kodem źródłowym (http://www.imnmotion.com/projects/

engine/demonstrations/). • Licencja typu open source (niestandardowa). Autor to Stephen W. Cote (http://www.

imnmotion.com).

Framework for RESTful JavaScript (Freja; z 2006 roku) Freja (http://www.cssripting.com/freja) to platforma typu MVC (od ang. Model-View-Controller) dla języka JavaScript: • Skoncentrowana na tworzeniu aplikacji sieciowych składających się z jednej strony

i działających bez opóźnień. • Doskonała skalowalność (dużo mniej operacji przesyłania danych na serwer i z powrotem). • Pełne rozdzielenie według architektury MVC. • Pełne rozdzielenie kodu działającego po stronie serwera i klienta. • Bardzo małe wymagania pamięciowe. Trzeba nauczyć się korzystania jedynie z kilku

metod (cała platforma ma 25 KB po rozpakowaniu). • Bazuje na otwartych standardach (XML i XSLT). • Współpracuje z wszystkimi współczesnymi przeglądarkami (IE, Firefox, Safari i Opera). • Współpracuje poprawnie z innymi zestawami narzędzi i bibliotekami języka JavaScript

(Prototype, Scriptaculous, Dojo i innymi). Freja nie jest po prostu „następną biblioteką Ajaksa”. To bazująca na Ajaksie biblioteka wysokiego poziomu. Nie ma udostępniać przeciągania czy efektów graficznych, ale umożliwia zastosowanie do tego ulubionej biblioteki języka JavaScript. • Warto zapoznać się z samouczkiem (http://www.cssripting.com/wiki/index.php?title=Freja#Tutorials)

i dokumentacją (http://www.cssripting.com/wiki/index.php?title=Freja_Documentation).

• Licencja typu open source (CC-GPL).

Mochikit (z 2005 roku) Mochikit (http://mochikit.com/) to dobrze udokumentowany i przetestowany zestaw bibliotek dla języka JavaScript, który umożliwia szybkie tworzenie kodu. Autorzy zapożyczyli szereg dobrych pomysłów z języków takich jak Python czy Objective-C i zaadaptowali je do języka JavaScript. • MochiKit.Async: operacje asynchroniczne. • MochiKit.Base: programowanie funkcjonalne i przydatne porównania. • MochiKit.DOM: interfejs API do łatwego manipulowania modelem DOM.

Ogólne platformy dla języka JavaScript

|

595

• MochiKit.Color: abstrakcja koloru z obsługą stylów CSS3. • MochiKit.DateTime: „a tak właściwie, która to godzina?”. • MochiKit.Format: formatowanie łańcuchów znaków. • MochiKit.Iter: narzędzia do iteracji w kodzie JavaScript. Iteracja najpierw TRUDNA,

potem łatwa. • MochiKit.Logging: mamy już dosyć funkcji alert(). • MochiKit.LoggingPane: interaktywny panel dla biblioteki MochiKit.Logging. • MochiKit.Visual: efekty graficzne. • Licencja typu open source (MIT lub Academic Free License 2.1). Autor to Bob Ippolito.

OpenRico (z maja 2005 roku; bazuje na wcześniejszej wersji chronionej prawami autorskimi) OpenRico (http://openrico.org/demos.page) to platforma o wielu zastosowaniach z obsługą infrastruktury Ajaksa oraz interakcji z użytkownikiem. • Odpowiedzi obiektów XMLHttpRequest można przekazywać do funkcji wywoływanych

zwrotnie, obiektu modelu DOM lub obiektu języka JavaScript. • Łatwe przeciąganie. • Animacje Ajaksa takie jak skalowanie i przejścia (i coraz bardziej popularne idiomy, na

przykład wskaźniki postępu i techniki zanikania). • „Zachowania”, które w swej istocie składają się na bibliotekę kontrolek. • Niezależny samouczek autorstwa Yonaha Russa z Mirimar (http://www.mirimar.net/

mailbrowser/). • Bazuje na bibliotece Prototype. • Licencja o otwartym dostępie do kodu źródłowego. Biblioteka została utworzona na pod-

stawie wewnętrznego produktu firmy Sabre Airline Solutions przez Billa Scotta, Darrena Jamesa, Richarda Cowina i innych programistów (http://looksgoodworkswell.blogspot.com).

Plex Toolkit Plex Toolkit (http://www.plextk.org) to pełny zestaw narzędzi do obsługi graficznego interfejsu użytkownika za pomocą DHTML oraz platforma Ajaksa bazująca na czystym kodzie JavaScript i modelu DOM. Jest to narzędzie o otwartym dostępie do kodu źródłowego. Biblioteka bazuje na języku znaczników niemal identycznym z PXML (Flex). Kod w tym języku zagnieżdżany jest w zwykłych dokumentach HTML i określa interfejs użytkownika. Za wiązanie odpowiada kod JavaScript. Zalety: • Pełny zestaw kontrolek, na przykład tabela danych, drzewa, accordion, menu rozwijane,

menedżer okien DHTML, podgląd stosu i wiele innych (ponad 60 bibliotek).

• Sterowanie przy użyciu znaczników, co ułatwia tworzenie interfejsu.

596

|

Dodatek A Platformy i biblioteki Ajaksa

• Komponentom interfejsu można łatwo nadać styl za pomocą arkuszy CSS. • Obsługa XSLT po stronie klienta dla przeglądarek IE i Mozilla. • Dobra dokumentacja z przykładami. • Różne możliwości zdalnego przesyłania danych, na przykład za pomocą obiektów

XMLHttpRequest i elementów IFrame (wkrótce ma zostać dodana obsługa RSLite bazująca

na ciasteczkach).

• Obsługa przycisku Wstecz (kompletne zarządzanie historią dla wszystkich komponentów). • Obsługa serializacji YAML.

Wady: • Brak platformy obsługującej animacje. • Licencja typu open source (do wyboru: GPL, LGPL lub licencja artystyczna). Autor to

Richard Hundt.

Prototype Prototype (http://prototype.conio.net/) ułatwia stosowanie w języku JavaScript technik obiektowych, takich jak klasy czy dziedziczenie. Biblioteka ta obsługuje także podstawową funkcjonalność języka JavaScript, na przykład zdalne wywoływanie poleceń. • Projekt rozwijany równolegle z Ruby on Rails, jednak można go używać (i oczywiście

robi się to) niezależnie od Ruby czy RoR. • Licencja typu open source. Autor to Sam Stephenson.

qooxdoo (z maja 2005 roku) qooxdoo (http://qooxdoo.oss.schlund.de/) to następny ambitny projekt, którego autor rozwija wiele funkcji związanych z interfejsem użytkownika i infrastrukturą. Infrastruktura: • Przenośna abstrakcja modelu DOM i zarządzania zdarzeniami oraz aktywnością. • Obsługa diagnozowania. • Klasa Timer ułatwiająca obsługę planowania. • Obsługa metod pobierających i ustawiających wartości.

Interfejs użytkownika: • Platforma do tworzenia własnych i biblioteka wbudowanych kontrolek. • Zarządzanie warstwami. • Zapisywanie rysunków w pamięci podręcznej i przenośna obsługa przezroczystości

rysunków PNG.

• Licencja typu open source (LGPL). Napisana przy współudziale wielu programistów.

Ogólne platformy dla języka JavaScript

|

597

Script.aculo.us (od 2005 roku) Scriptaculous (http://script.aculo.us) bazuje na bibliotece Prototype i dodaje do języka JavaScript wszechstronną obsługę Ajaksa. • Efekty graficzne (zobacz Jednosekundowe wyróżnianie w rozdziale 16.). • Przeciąganie (zobacz Przeciąganie w rozdziale 15.). • Testy jednostkowe (zobacz Testy systemu w rozdziale 19.). • Licencja typu open source. Autor to Thomas Fuchs i inni programiści. Projekt jest rozwi-

jany równolegle z Ruby on Rails, jednak można go używać (i oczywiście robi się to) niezależnie od Ruby czy RoR.

SmartClient (z 2000 roku) SmartClient (http://www.smartclient.com) rozwijany przez Isomorphic Software to współpracujący z wieloma platformami system do tworzenia aplikacji Ajax RIA. Podstawowe klasy i usługi działające w różnych przeglądarkach: • Programowanie przy użyciu JSON i XML. • Warstwa abstrakcji przeglądarki. • Usługi obsługujące komponenty graficznego interfejsu użytkownika. • Usługi obsługujące rejestrowanie operacji i diagnozowanie. • Rozszerzalne komponenty graficznego interfejsu użytkownika. • Kontrolki służące do nawigowania i wydawania poleceń. • Menedżery i kontrolki formularzy. • Nierelacyjne, hierarchiczne i wielowymiarowe tabele. • Kontenery i menedżery warstw.

Zarządzanie danymi i usługami: • Pamięć podręczna po stronie klienta i obsługa operacji lokalnych. • Menedżery modelu danych po stronie klienta. • Usługi obsługujące komunikację i protokół.

Graficzne narzędzie programistyczne: • Konsola uruchomieniowa. • Przeglądarka dziennika. • Narzędzie do podglądu i edycji komponentów. • Konsola administracyjna. • Zintegrowany poradnik programisty. • Aplikacje Ajax utworzone za pomocą systemu SmartClient działają w przeglądarkach Internet

Explorer, Mozilla, Netscape, Firefox i Safari oraz w systemach operacyjnych Windows, MacOS, Linux i Solaris. W przeciwieństwie do innych systemów tego typu SmartClient zapewnia pełną funkcjonalność nawet wtedy, kiedy w przeglądarce wyłączona jest obsługa ActiveX.

598 |

Dodatek A Platformy i biblioteki Ajaksa

• Na stronie www.smartclient.com znajduje się krótki opis produktu, programy demonstra-

cyjne i platforma SDK, którą można pobrać. • Licencja komercyjna. Autorem jest Isomorphic Software.

ThyAPI (z końca 2004 roku) ThyAPI (http://www.sf.net/projects/thyapi/) to biblioteka komponentów DHTML nadających się do wielokrotnego zastosowania. Obsługa Ajaksa to tylko jedna z właściwości tego narzędzia. Jego głównym zadaniem jest umożliwienie tworzenia rozbudowanych aplikacji sieciowych przypominających programy stacjonarne. Biblioteka ThyAPI bazuje na DynAPI (http://www.sf.net/ projects/dynapi/) i oferuje otwarty dostęp do kodu źródłowego. • Utworzona w całości w DHTML (JavaScript + CSS). • Rozszerzalna i w pełni obiektowa. • Zgodna z protokołem XMLRPC w zakresie wymiany danych z serwerem. Autorzy planują

dodać obsługę protokołu JSON-RPC. • Interfejs można w całości definiować przy użyciu arkuszy CSS. • Współpracuje z przeglądarką Mozilla Firefox (wersja 1.0 i nowsze; http://www.mozilla.org)

i Internet Explorer (wersja 6 i nowsze). • Komponent DataSource ułatwia wiązanie kontrolek JavaScript z metodami serwera. • Obsługuje różne przeglądarki i platformy (te cechy zostały odziedziczone po DynAPI). • Ma umożliwiać autorom programów sieciowych błyskawiczne programowanie aplikacji

(RAD) i wielokrotne stosowanie niestandardowych kontrolek. • Licencja typu open source (LGPL).

TIBCO General Interface (od 2001 roku) TIBCO General Interface (http://www.tibco.com/software/business_optimization/rich_internet_application.jsp) to dojrzała platforma Ajax RIA obsługująca aplikacje już od 2001 roku. Ta platforma jest tak dojrzała, że udostępniane przez nią narzędzia go graficznego tworzenia aplikacji same działają w przeglądarce obok utworzonych systemów Ajax RIA. • Dziesiątki rozszerzalnych komponentów graficznego interfejsu użytkownika. • Pakiet do tworzenia wektorowych wykresów. • Obsługa protokołu SOAP (obok podstawowych protokołów HTML i XML). • Kompletne środowisko do graficznego programowania aplikacji. • Tryb WYSIWYG do tworzenia graficznego interfejsu użytkownika. • Diagnozowanie w trybie kroczenia. • Uzupełnianie kodu. • Program demonstracyjny autorstwa Jona Udella w witrynie InfoWorld (http://weblog.

inforworld.com/udell/2005/05/25.html).

Ogólne platformy dla języka JavaScript

| 599

• Następna wersja produktu i wiele przykładowych aplikacji znajduje się na witrynie spo-

łeczności programistów (https://power.tibco.com/app/um/gi/newuser.jsp). • Licencja komercyjna. Autorem jest Tibco. Więcej informacji na ten temat znajduje się na

stronie http://developer.tibco.com.

Interactive Website Framework (od maja 2005 roku) Interactive Website Framework (http://sourceforge.net/projects/iwf/) to narzędzie, które ma obsługiwać w przeglądarce różne aspekty infrastruktury Ajaksa. • Autorzy opisują to narzędzie jako: „platformę do tworzenia wysoce interaktywnych wi-

tryn internetowych przy użyciu JavaScript, CSS, XML i HTML. Obejmuje ona niestandardowy mechanizm przetwarzania danych XML, co umożliwia tworzenie czytelnego kodu JavaScript. Mówiąc w skrócie — platforma udostępnia wszelkie narzędzia potrzebne do tworzenia witryn internetowych bazujących na Ajaksie, a także szereg innych często używanych skryptów”. • Implementacja obsługi obiektów XMLHttpRequest jest bezpieczna ze względu na wątki. • Zawiera nakładkę na dokumenty XML, dzięki czemu kod jest bardziej czytelny, ponieważ

nie trzeba samodzielnie nawigować po tych dokumentach: var node = doc.groceries.frozen[0].pizza[0].size; var node = doc.documentElement.firstChild.firstChild.getAttribute("size");

• Licencja typu open source. Autor to Brock Weaver (http://circaware.com).

Zimbra AjaxTK Zimbra (http://www.zimbra.com/) to niedawno udostępniony system o otwartym dostępie do kodu źródłowego służący do obsługi poczty elektronicznej. Narzędzie to działa zarówno po stronie klienta, jak i po stronie serwera. W tym projekcie można znaleźć znakomitą bibliotekę komponentów, Ajax Tool Kit (AjaxTK), napisaną w języku JavaScript. Na stronie zimbra.com znajduje się rozbudowany program demonstrujący bogate możliwości tego klienta pocztowego. Bardzo duża i wszechstronna biblioteka kontrolek wcześniej była dostępna tylko w komercyjnym zestawie narzędzi dla Ajaksa. Obecnie istnieje otwarty dostęp do jej kodu źródłowego. Warto pobrać cały kod źródłowy, które zawiera przykładowe aplikacji. Zalety: • Pełna obsługa przeciągania wszystkich kontrolek. Te kontrolki to między innymi listy

danych, kreatory, przyciski, węzły tekstowe, bogate edytory tekstu, drzewa, menu itd.

• System kompilacji bazuje na programie Ant, a system serwera — na JSP i Tomcat. • Bardzo dobry klient bazujący na architekturze MVC. Jego twórcą jest były czołowy pro-

gramista firmy Javasoft.

• Obsługa komunikacji po stronie klienta obejmuje SOAP, XMLHttpRequest i IFrame. • Obsługa obiektów JSON poddanych serializacji i formularzy XForms bazujących na kodzie

JavaScript. • Dobra obsługa wielu przeglądarek: IE (wersja 5.5 i nowsze), Firefox (wersja 1.0 i nowsze)

i najnowsza wersja Safari. 600 |

Dodatek A Platformy i biblioteki Ajaksa

• Wysokiej jakości kontrolki nie ustępują komercyjnym, ponieważ jest to komercyjny pro-

dukt o otwartym dostępie do kodu źródłowego. • Biblioteka kontrolek jest dostępna jako pakiet niezależny od głównego produktu. • W bibliotekę wbudowane są narzędzia diagnostyczne i możliwość wyświetlania żądań

i odpowiedzi. Wady: • Obecnie nie obsługuje poleceń wydawanych z klawiatury na poziomie menu ani w czasie

edycji arkuszy danych. • Nie obsługuje stopniowej degradacji do elementów IFrame, jeśli niedostępne są inne me-

chanizmy przesyłania informacji. • Brak jest dokumentacji, jednak w dokumencie PDF opisany jest zestaw kontrolek oraz

obsługa przeciągania. • Licencja typu open source (Zimbra Ajax Public License ZAPL utworzona na podstawie

Mozilla Public License MPL). Autorem jest Zimbra.

Platformy do obsługi zdalnych wywołań języka JavaScript Jak opisuje to wiele wzorców Ajax, zdalne wywołania (rozdział 6.) są narażone na błędy, ich obsługa jest żmudna, a zakres możliwości szeroki, dlatego doskonale nadają się do ukrycia w bibliotece lub platformie. Często podobną funkcjonalność udostępniają też ogólne biblioteki opisane w poprzednim punkcie, jednak jeśli potrzebne jest niezależne i proste narzędzie, programiści często wybierają SACK. Biblioteka HTMLHttpRequest to dobry wybór ze względu na zgodność, ponieważ obsługuje zarówno elementy IFrame, jak i obiekty XMLHttpRequest. Bogatszy interfejs API udostępnia silnik Ajax Client Engine (ACE).

AjaxCaller (z maja 2005 roku) AjaxCaller (http://ajaxify.com/run/Lib/js/ajaxCaller.js) to prosta i bezpieczna ze względu na wątki nakładka na obiekty XMLHttpRequest. Jest ona przeznaczona głównie dla osób rozpoczynających przygodę z Ajaksem i znajduje się w pakiecie wraz z programami demonstracyjnymi Ajaksa. Zobacz program TestAjaxCaller (http://przyklady.helion.pl/ajaxwp/run/testAjaxCaller). • Obsługa wywołań REST kierowanych na serwer (GET/POST/PUT/DELETE) i zwra-

canie odpowiedzi ze zwykłym tekstem lub danymi XML do funkcji wywoływanych zwrotnie. • Przeznaczona dla początkujących użytkowników Ajaksa. Zamiast optymalizować wy-

dajność lub zmniejszać wymagania związane z pamięcią, biblioteka ma udostępniać czytelną bazę kodu oraz obsługę diagnozowania. • Licencja typu open source (Creative Commons). Autor to Michael Mahemoff (http://

softwareas.com), a niektóre pomysły pochodzą od Johna Wehra i Richarda Schwartza.

Platformy do obsługi zdalnych wywołań języka JavaScript

|

601

Ajax Client Engine (ACE; z grudnia 2005 roku) Ajax Client Engine (http://www.lishen.name) to rozbudowana nakładka do obsługi zdalnych wywołań. • Obiektowy interfejs API. • Obsługa wielu przeglądarek. • Elastyczne właściwości: opcje żądań, sprawdzanie poprawności parametrów żądań, ar-

gumenty wywołań zwrotnych, opcje wywołań zwrotnych, limit czasu wywołań zwrotnych, usługi śledzenia wywołań, usługi związane z pamięcią podręczną, usługi związane z przesyłaniem zapytań, standardowe wywołania zwrotne i obsługa wyjątków. • Licencja typu open source (MIT). Autor to Li Shen.

AjaxGear (z listopada 2005 roku) AjaxGear (http://www.ajaxgear.com) to prosty zestaw narzędzi dla Ajaksa działający na wielu platformach. • Umożliwia przeglądarkom kierowanie asynchronicznych wywołań na serwer bez ko-

nieczności odświeżania całej strony. • Używa klasy Ajaksa do obsługi komunikacji z serwerem. • Można pobrać kompletną witrynę internetową przedstawiającą możliwości AjaxGear. • Plik AjaxGear.PageEngine.js opisuje, w jaki sposób zastosować ten zestaw narzędzi w witrynie

internetowej. • Obecnie rozwijane są trzy następne elementy zestawu AjaxGear: pasek postępu, autouzu-

pełnianie i mechanizm sprawdzania poprawności formularzy. • Licencja typu open source (MIT). Autor to Allan Spartacus Mangune (http://www.allan-

mangune.com) z firmy ArchCommerce (http://www.archcommerce.com).

AJFORM (z czerwca 2005 roku) AJFORM (http://redredmusic.com/brendon/ajform/) to niezwykle łatwa w użyciu platforma Ajaksa przeznaczona dla programistów dopiero poznających tę technologię. Jej jedynym zadaniem jest przesyłanie danych dowolnego formularza HTML poprzez XMLHTTP. Platforma AJFORM udostępnia: • Trzyetapową instalację. • Automatyczną obsługę wszelkich formularzy HTML. • Możliwość stosowania jej mimo niewielkiej wiedzy programistycznej. • Licencję typu open source (BSD).

602

|

Dodatek A Platformy i biblioteki Ajaksa

HTMLHttpRequest (od 2005 roku) HTMLHttpRequest (http://www.twinhelix.com/javascript/htmlhttprequest/) także używa obiektów XMLHttpRequest i elementów IFrame do zwiększenia zgodności między przeglądarkami. • Przetestowana dla przeglądarek IE6, IE5.5, IE5, IE4, Mozilla i Opera7 w systemie Windows

oraz Safari i IE5 na komputerach Mac.

• W przypadku przeglądarek IE4 i Mozilla na komputerach Mac, Opera w innych syste-

mach oraz Konqueror w systemie Linux biblioteka nie została przetestowana, ale prawdopodobnie działa. • Licencja typu open source (LGPL). Autor to Angus Turnbull z firmy Twin Helix Desings

(http://www.twinhelix.com/).

JSMX (z sierpnia 2005 roku) JSMX (http://www.coldfusion-ajax.com) to bardzo prosta bazująca na Ajaksie implementacja dla programistów używających ColdFusion (lub dowolnego innego języka, który umożliwia łatwe tworzenie łańcuchów znaków języka JavaScript). Ten interfejs API nie zwraca danych w formacie XML, ale jako łańcuchową reprezentację wyrażeń języka JavaScript. • Za pomocą protokołu WDDX i funkcji toScritp() platformy ColdFusion można w bardzo

łatwy sposób przekształcać obiekty ColdFusion na kod języka JavaScript. • Mniejszy rozmiar przesyłanych pakietów (JavaScript a XML). • Mniejsze opóźnienia dzięki krótszemu przetwarzaniu odpowiedzi. • Parametry można przesyłać na serwer w wielu formatach, włączając w to łańcuchy zna-

ków, obiekty i całe formularze. Nie trzeba tworzyć specjalnej logiki do obsługi każdego z tych formatów. • Interfejs API nie ma komponentów działających po stronie serwera, dzięki czemu jest

bardziej przenośny. • Niezwykle prosta składnia ułatwia naukę i przyspiesza tworzenie programów: params = document.myForm; http( "POST", "remote.cfc?method=dosomething", my_callback, params );

• Licencja typu open source (Creative Commons Attribution-ShareAlike). Autor to Todd

Kingham.

LibXMLHttpRequest (z czerwca 2005 roku) libXmlRequest (http://www.whitefrost.com/reference/2005/09/09/libXmlRequest.html) to prosta nakładka na obiekty XMLHttpRequest. • Synchroniczne i asynchroniczne wersje metod getXML() i postXML(). • Sprawdzanie stanu obiektów XMLHttpRequest. • Zapisywanie odpowiedzi w pamięci podręcznej. • Narzędzia do obsług XSL i XPath.

Platformy do obsługi zdalnych wywołań języka JavaScript

| 603

• Narzędzie setInnerXHTML służące do kopiowania węzłów XML do dokumentów HTML. • Kod źródłowy autorstwa Stephena W. Cote’a (www://www.imnmotion.com/) chroniony

standardowym prawem autorskim.

MAJAX (z sierpnia 2005 roku) MAJAX (http://unips.sourceforge.net/devblog/?p=6) to następna bardzo prosta nakładka na obiekty XMLHttpRequest. To narzędzie ma udostępniać naprawdę prosty intrfejs do przesyłania i pobierania danych w formacie ASCII. • Udostępnia wygodny interfejs dla wywołań zwrotnych służących do wykonywania ope-

racji na przykład po otrzymaniu odpowiedzi z serwera. • Licencja typu open source (GPL lub LGPL). Autor to „Peter F”.

RSLite RSLite (http://www.ashleyit.com/rs/main.htm) to prosta nakładka na wysoce zgodną z wieloma przeglądarkami warstwę przesyłania danych bazującą na żądaniu w języku JavaScript obiektu rysunku z parametrami w postaci łańcucha znaków zapytania. Odpowiedzi przesyłane są w ciasteczkach. • Prosty komponent udostępniany jako część bardziej rozbudowanego narzędzia autorstwa

Brenta Ashleya, Remote Scripting. Jego opis znajduje się w punkcie JavaScript Remote Scripting (JSRS) (z 2000 roku) w podrozdziale Platformy Ajaksa współpracujące z wieloma językami. • Licencja typu open source. Autor to Brent Ashley.

Sack (z maja 2005 roku) Sack (http://twilightuniverse.com/resources/code/sack/) to prosta nakładka na obiekty XMLHttpRequest: • Nadawca może określić wywoływaną zwrotnie funkcję lub obiekt modelu DOM. Jeśli to

obiekt ma być wywoływany zwrotnie, tekst odpowiedzi jest umieszczany bezpośrednio w modelu DOM. • Licencja typu open source (zmodyfikowana licencja MIT). Autor to Gregory Wild-Smith.

Sybsys_JsHttpRequest Subsys_JsHttpRequest (http://www.dklab.ru/lib/Subsys_JsHttpRequest/) to platforma Ajaksa z obsługą obiektów XMLHttpRequest i dynamicznym generowaniem właściwości script src w celu emulacji Ajaksa w starszych przeglądarkach oraz tych niezgodnych z obiektami XMLHttpRequest. • Licencja typu open source (LGPL 2.1 lub nowsza). Autor to Dmitry Koterov.

604 |

Dodatek A Platformy i biblioteki Ajaksa

XHConn (od kwietnia 2005 roku) XHConn (http://xkr.us/code/javascript/XHConn/) to prosta nakładka na obiekty XMLHttpRequest: • Przykładowe wywołanie: new XHConn().connect("mypage.php", "POST", "foo=bar&baz=

¦qux", fnWhenDone);.

• Licencja typu open source (Creative Commons Attribution-ShareAlike). Autor to Brad Fults.

Platformy efektów dla języka JavaScript Fade Anything Technique (FAT) FAT (http://www.axentric.com/posts/default/7) obsługuje technikę żółtego zanikania (zobacz wzorzec Jednosekundowe wyróżnianie w rozdziale 16.). • Licencja typu open source (w komentarzach na stronie określona jako Creative Commons).

Autor to Adam Michel.

Moo.fx (z października 2005 roku) Moo.fx (http://moofx.mad4milk.net) bazuje na uproszczonej wersji biblioteki Prototype i udostępnia niezwykle zwięzły zestaw efektów. • Efekty graficzne. • Zapisywanie efektów w ciasteczkach. • Łączny rozmiar pliku to 36 KB. • Licencja typu open source (MIT). Autor to Volerio Proietti.

Platformy obsługujące JavaScript i Flash Wzorzec Wzbogacone wtyczki przedstawia, w jaki sposób technologia Flash może wspomóc tworzenie aplikacji Ajax. Poniższe platformy wspomagają integrację tych technologii.

AMFPHPKit AMFPHP (http://amfphp.sourceforge.net/) to implementacja platformy zdalnych wywołań technologii Flash o otwartym dostępie do kodu źródłowego. • Szybka, stabilna, całkowicie bezpłatna i o otwartym dostępie do kodu źródłowego. Nowa

wersja ma być równie stabilna i bogata co zdalne wywołania bazujące na Cold Fusion (na owym rozwiązaniu wzorowana jest ta platforma). Użytkownicy otrzymują także doskonały debuger NetConnection, który pokazuje, jakie dane są przesyłane między klientem a serwerem. Zdalne wywołania bazują na AMF, bardzo prostym binarnym formacie, który umożliwia zmniejszenie rozmiaru pakietów, dzięki czemu przesyłanie danych odbywa się dużo szybciej niż przy użyciu XML.

• Licencja typu open source (GPL). Biblioteka została utworzona przez Wolfganga Ham-

mana, a rozwija ją wielu programistów.

Platformy obsługujące JavaScript i Flash

| 605

Flash JavaScript Integration Kit Flash JavaScript Integration Kit (http://www.osflash.org/doku.php?id=flashjs) umożliwia integrację danych z kodu JavaScript i Flash. • Umożliwia wywoływanie funkcji ActionScript w kodzie JavaScript i vice versa. • Między tymi środowiskami można przesyłać wszystkie podstawowe typy danych. • Licencja typu open source (zmodyfikowana licencja Apache 1.1). Autorami jest wielu

programistów używających technologii Flash ze społeczności open source.

Stream (z lipca 2005 roku) Stream (http://www.stormtide.ca/Stream) to dwukierunkowa platforma Ajaksa, która dodaje do języka JavaScript obsługę gniazd XML z technologii Flash. Platforma ta obejmuje także rozszerzalny serwer gniazd z przechowywaniem stanu oraz platformą zarządzania aplikacją kliencką. • Wtyczka z interfejsem API (biblioteki klienckie języków C# i JavaScript). • Brak konieczności sprawdzania stanu serwera (na serwer przesyłane są prawdziwe zda-

rzenia, a nie następuje emulacja ich obsługi poprzez sprawdzanie stanu). Zobacz wzorzec Strumieniowanie HTTP w rozdziale 6. • Idealnie nadaje się do obsługi systemów rozmów, monitorowania i interakcji z klientem,

które wymagają sprawdzania stanu serwera.

• Sesje (śledzenie stanu dla sesji i dla stron). • Monitorowanie zdarzeń (interkacja ze zdarzeniami myszy, obejmująca możliwość ogra-

niczenia maksymalnej liczby zgłoszeń). • Obecnie projekt jest w fazie alfa, demonstracji możliwości technologicznych i przedsta-

wienia pomysłu. Można pobrać go pod adresem http://beta.stormtide.ca/files/StreamReleases/ StreamAlphaGPL20050709.zip?source=ajaxpatterns. • Podwójna licencja typu open source (Commercial License i GPL). Autorem jest firma

StormTide Digital Studios. Dostępny jest pełny kod źródłowy.

Platformy obsługujące JavaScript i XML Te biblioteki związane są ze wzorcami Komunikaty XML, XSLT po stronie przeglądarki i Wyspy danych XML.

Google AJAXSLT (z czerwca 2005 roku) Google AJAXSLT (http://goog-ajaxslt.sourceforge.net) to platforma języka JavaScript służąca do obsługi przekształceń według arkuszy XSLT oraz obsługi zapytań XPath. • Bazuje na rozwiązaniach zastosowanych w Google Map. • Licencja typu open source (BSD). Autorem jest Google.

606 |

Dodatek A Platformy i biblioteki Ajaksa

Sarissa (z lutego 2003 roku) Sarissa (http://sarissa.sf.net) to interfejs API dla języka JavaScript ukrywający w niezależnych od przeglądarki wywołaniach funkcjonalność związaną z obsługą formatu XML. • Przenośne tworzenie obiektów XMLHttpRequest. • Przenośne zapytania XPath. • Przenośne manipulowanie modelem DOM. • Przenośna obsługa stylów XSLT. • Przenośna serializacja danych na format XML. • Licencja typu open source (do wyboru GPL 2.0 lub LGPL 2.1). Napisana przy współ-

udziale wielu programistów.

Wyspecjalizowane platformy dla języka JavaScript Niektóre przydatne biblioteki nie pasują do innych podrozdziałów.

Drag-Drop Biblioteka Drag-Drop (http://www.walterzorn.com/dragdrop/dragdrop_e.htm) autorstwa Waltera Zorna to kompletne narzędzie do obsługi przeciągania (zobacz wzorzec Przeciąganie w rozdziale 15.). • Licencja typu open source (LGPL 2.1 lub nowsza). Autor to Walter Zorn.

Giant-Ass Image Viewer (GSV) GSV (http://mike.teczno.com/giant/pan/) umożliwia umieszczanie na serwerze bardzo dużych rysunków. Użytkownicy mogą przewijać je tak, jakby cały plik był przechowywany lokalnie (podobnie działa przewijanie na witrynie Google Maps). Zobacz wzorzec Wirtualny obszar roboczy w rozdziale 15. • Licencja typu open source (niestandardowa). Autor to Michael Migursky.

Platformy Ajaksa współpracujące z wieloma językami Każda biblioteka przedstawiona w tym punkcie integruje kod JavaScript działający po stronie przeglądarki z różnymi językami działającymi po stronie serwera. Zwykle projekty wymagają integracji z tylko jednym takim językiem, lecz biblioteki obsługują po kilka z nich, dzięki czemu mają szersze zastosowanie. Duży wpływ wywarła notacja JSON, ponieważ jest to w równym stopniu popularny format danych, jak i kolekcja bibliotek o otwartym dostępie do kodu źródłowego służących do obsługi zdalnych wywołań. Także platforma SAJAX zyskała spore zainteresowanie w zakresie swych zastosowań, ponieważ obsługuje wiele języków. Popularny jest również zestaw narzędzi CPAINT.

Platformy Ajaksa współpracujące z wieloma językami

|

607

Cross-Platform Asynchronous INterface Toolkit (CPAINT; z maja 2005 roku) CPAINT (http://cpaint.sourceforge.net/) to prawdziwie Ajaksowa implementacja biblioteki JSRS (JavaScript Remote Scripting) obsługująca zarówno język PHP, jak i ASP wraz z VBScript. CPAINT zawiera kod potrzebny do implementacji Ajaksa i JSRS na zapleczu, podczas gdy do manipulowania zwracanymi danymi, formatowania i wyświetlania ich w interfejsie służy język JavaScript. Umożliwia to tworzenie aplikacji sieciowych, które działają niemal w czasie rzeczywistym. Zobacz wzorzec Procedury pośredniczące Ajaksa w rozdziale 9. • Obsługuje PHP i ASP. • Jeden plik z kodem JavaScript wszystkich funkcji. • Obsługuje zdalne wywoływanie skryptów oraz format XML. • Obsługuje lokalne i zdalne funkcje. • Obsługuje pojedyncze obiekty XMLHTTP oraz ich grupy. • Zwraca dane z zaplecza jako tekst lub jako obiekty języka JavaScript reprezentujące dane

XML i DOM.

• Obsługuje żądania POST i GET. • Udostępnia działające na zapleczu funkcje pośredniczące, które umożliwiają dostęp do

zdalnych funkcji i danych.

• Przetestowana we wszystkich głównych przeglądarkach. • Licencja typu open source (GNU, GPL lub LGPL). Napisana przy współudziale wielu

programistów.

JavaScript Object Notation (JSON) i JSON-RPC JSON (http://www.crockford.com/JSON/index.html) to „dietetyczna alternatywa dla XML”, a JSONRPC (http://www.json-rpc.org/) to protokół zdalnego przesyłania procedur podobny do XML-RPC z dobrą obsługą klientów JavaScript. Zobacz wzorzec Komunikaty JSON w rozdziale 9. • Dostępne są implementacje dla różnych platform działających po stronie serwera, takich

jak Java, Python, Ruby czy Perl (http://www.json-rpc.org/impl.xhtml). • Osobne pakiety i licencje dla każdej platformy. Oryginalny pomysł i implementacja ob-

sługi języka JavaScript są autorstwa Douglasa Crockforda.

JavaScript Remote Scripting (JSRS; z 2000 roku) JSRS (http://www.ashleyit.com/rs/jsrs/test.htm) kieruje wywołania z kodu JavaScript bezpośrednio do języka używanego po stronie serwera i z powrotem. • Pierwsza wersja udostępniona w 2000 roku. • Obsługiwane przeglądarki: IE (wersja 4 i nowsze), NS4.x, MS6.x, Mozilla, Opera i Galeon.

608 |

Dodatek A Platformy i biblioteki Ajaksa

• Po stronie serwera obsługa języków ASP, ColdFusion, PerlCGI, PHP, Python i JSP

(serwlety). • Licencja typu open source (bardzo elastyczna niestandardowa licencja). Autor to Brent

Ashley (http://www.ashleyit.com/).

Rialto: Rich Internet AppLication TOolkit Rialto (http://rialto.application-servers.com/) to działająca w różnych przeglądarkach biblioteka kontrolek języka JavaScript. • Ponieważ jest niezależna od technologii, można jej używać w komponentach graficznych

języków Java, JSP, JSF, .NET lub PHP. • Biblioteka kontrolek obejmuje formularze, przeciąganie, drzewa, listy danych ze stałym

nagłówkiem i kolumnami o zmiennych rozmiarach, okna wyskakujące i kontrolki podziału strony. • Umożliwia tworzenie aplikacji działających na jednej stronie. • Dostępny jest program demonstracyjny (http://rialto.application-servers.com/demoRialto.jsp). • Licencja typu open source (Apache). Napisana przy współudziale wielu programistów.

SAJAX (od marca 2005 roku) SAJAX (http://www.modernmethod.com/sajax/) kieruje wywołania z kodu JavaScript bezpośrednio do języka używanego po stronie serwera i z powrotem. Na przykład wywołanie metody x_calculateBudget() języka JavaScript zostanie skierowane na serwer do metody calculateBudget() języka ASP, ColdFusion, Io, Lua, Perl, PHP, Python lub Ruby. Następnie platforma zwróci wartość do metody x_calculateBudget_cb() języka JavaScript. • Jak przedstawia to wzorzec Procedury pośredniczące Ajaksa (rozdział 9.), platforma ta

ułatwia odwzorowywanie funkcji pośredniczących języka JavaScript na operacje wykonywane na zapleczu. • Zobacz opis programu demonstracyjnego w punkcie Przykłady praktyczne we wzorcu

Procedury pośredniczące Ajaksa. • Możliwość przekazywania wywołań do licznych platform działających po stronie serwera:

ASP, ColdFusion, Io, Lua, Perl, PHP, Python i Ruby. • Licencja typu open source (BSD). Napisana przy współudziale wielu programistów.

ZK — platforma sieciowa dla Ajaksa i XUL ZK (http://zk1.sourceforge.net/) to bazująca na Ajaksie i XUL, sterowana zdarzeniami platforma napisana w języku Java. Ma umożliwiać tworzenie aplikacji sieciowych, które mają bogaty interfejs użytkownika, przy zachowaniu prostego modelu programowania. • Przy użyciu ZK można wyświetlać aplikacje RIA i manipulować nimi za pomocą kom-

ponentów XUL/HTML działających po stronie serwera. W podobny sposób od lat działają aplikacje stacjonarne.

Platformy Ajaksa współpracujące z wieloma językami

| 609

• Nie trzeba stosować kodu JavaScript ani powielać logiki biznesowej po stronie klienta.

Nie ma tu komponentów chronionych prawami autorskimi. Nie jest konieczna kompilacja. ZK współpracuje z istniejącymi platformami i technologiami takimi jak JSF i portale. Programista może w pełni kontrolować tempo dołączania platformy ZK do rozwiązania. • Komponenty bazujące na XUL. • Model sterowany zdarzeniami. • Przetwarzanie skoncentrowane po stronie serwera. • Skrypty w języku Java i wyrażenia języka EL. • Program demonstracyjny dostępny na stronie http://www.potix.com/zkdemo/userguide. • Licencja typu open source (GPL). Autorem jest Potix Corporation.

Platformy Ajaksa dla języka C++ Wt Wt (http://witty.sourceforge.net/) to biblioteka kontrolek języka C++, która używa Ajaksa do wyświetlenia zmian w drzewie kontrolek, jeśli jest to potrzebne. • Interfejs API wzorowany na istniejących bibliotekach GUI przeznaczony głównie dla

programistów języka C++. • Biblioteka kontrolek abstrahuje od używanych technologii (JavaScript, HTML, formularze,

CGI, Ajax). • Dokumentacja znajduje się na stronie http://jose.med.kuleuven.ac.be/wt/doc/index.html. • Licencja typu open source (Affero General Public License). Autor to Koen Deforche.

Platformy Ajaksa dla Cold Fusion AjaxCFC AjaxCFC (http://www.robgonda.com/blog/projects/ajaxcfc/) to platforma dla ColdFusion, która ma przyspieszyć tworzenie i instalowanie aplikacji Ajax poprzez umożliwienie płynnej integracji między językiem JavaScript a ColdFusion. Platforma udostępnia także wbudowane funkcje, która umożliwiają szybką adaptację do środowisk i zabezpieczeń dowolnego typu, a także pomagają rozwiązać problemy związane z brakiem zgodności między przeglądarkami. Platforma zawiera: • Komponenty ColdFusion zgodne z najlepszymi praktykami programowania obiektowego

i wzorcami projektowymi. Programowanie z wykorzystaniem platformy AjaxCFC obejmuje rozszerzanie komponentów i tworzenie własnych fasad bazujących na Ajaksie. • Ograniczona licencja typu open source (platformy można używać w dowolnym kontek-

ście, ale nie można jej rozpowszechniać). Autor to Rob Gond.

610

|

Dodatek A Platformy i biblioteki Ajaksa

JSMX (z sierpnia 2005 roku) JSMX (http://www.coldfusion-ajax.com) to bardzo prosta implementacja Ajaksa dla programistów używających ColdFusion (lub dowolnego języka, w którym można łatwo tworzyć łańcuchy znaków języka JavaScript). Ten interfejs API nie zwraca danych w formacie XML, ale łańcuchową reprezentację wyrażeń języka JavaScript. • Mniejszy rozmiar przesyłanych pakietów (JavaScript a XML). • Krótsze opóźnienia dzięki szybszemu przetwarzaniu odpowiedzi. • Parametry można przesyłać na serwer w różnych formatach, włączając w to łańcuchy

znaków, obiekty i całe formularze. Nie trzeba tworzyć specjalnej logiki do obsługi każdego z tych typów. • Interfejs API nie ma komponentów działających po stronie serwera, dzięki czemu jest

bardziej przenośny (w planach).

• Niezwykle prosta składnia skraca czas potrzebny na naukę interfejsu i przyspiesza two-

rzenie programów: params = document.myForm; http( "POST", "remote.cfc?method=dosomething", my_callback, params );

• Licencja typu open source (Creative Commons Attribution-ShareAlike). Autor to Todd

Kingham.

Platformy Ajaksa dla języków .NET W świecie .NET oczy programistów skierowane są na rozwój platformy Atlas Microsoftu. Nie jest do końca oczywiste, co będzie obejmować i na ile będzie przenośna, a także jak wpłynie na rozwój istniejących platform. W każdym razie jednym z popularnym rozwiązań jest Ajax.NET autorstwa Michaela Schwartza, a w przypadku platform o szerszym zakresie funkcji spore zainteresowanie wzbudza projekt Monorail, podobny do Ruby on Rails.

Ajax.NET dla ASP.NET 1.x i 2.0 Ajax.NET (http://ajax.schwarz-interactive.de/csharpsample/default.aspx) to platforma Ajaksa dla ASP.NET 1.x i 2.0. • Prosta biblioteka Ajaksa dla ASP.NET udostępniająca bardzo podstawowe funkcje Ajaksa

w zakresie wywołań zwrotnych XMLHTTP. Nie zawiera żadnych kontrolek zgodny z Ajaksem, nie obsługuje właściwości Viewstate itd. • Licencja typu open source. Autor to Michael Schwartz.

Anthem.NET dla ASP.NET 1.x i 2.0 Anthem.NET (http://anthem-dot-net.sourceforge.net/) to nowa wersja uznanej biblioteki Ajaksa autorstwa Jasona Diamonda. Obecnie jest ona rozwijana jako projekt SourceForge o otwartym dostępie do kodu źródłowego.

Platformy Ajaksa dla języków .NET

|

611

• Anthem.NET udostępnia zestaw kontrolek zgodnych z Ajaksem dziedziczących po kon-

trolkach serwera języka ASP.NET, przy czym większość operacji Ajaksa jest wbudowanych, dzięki czemu nie trzeba pisać dużych ilości kodu JavaScript dla klienta. Biblioteka obsługuje właściwość Viewstate, dlatego można modyfikować kontrolki serwera (zarówno kontrolki Anthem, jak i zawierające się w nich kontrolki ASP.NET, na przykład panel) w kodzie działającym po stronie serwera, w języku C# lub VB, bez konieczności stosowania języka JavaScript. Ta biblioteka jest jeszcze młoda (grudzień 2005), ale obiecująca. • Licencja typu open source. Autor to Jason Diamonds.

AjaxAspects AjaxAspects (http://www.mathertel.de/AJAXEngine/) to silnik używający pośredników dla języka JavaScript do wywoływania metod usług sieciowych działających na serwerze. • Korzystanie z Ajaksa za pomocą usług sieciowych. • Bazuje na metodach klienckich JavaScript pośredniczących w wywołaniach standardo-

wych usług sieciowych. Wystarczy wywołać zwykłą metodę języka JavaScript, aby wywołać metodę na serwerze. • Do komunikacji między klientem a serwerem służą standardowe protokoły SOAP i WSDL. • Po stronie usług sieciowych nie jest potrzebny specjalny kod. • Jako parametrów i zwracanych wartości można używać wielu typów danych, tablic i obiek-

tów XML. • Pamięć podręczna po stronie klienta i serwera. • Kolejkowanie operacji. • Odraczanie operacji. • Dostępnych jest wiele kontrolek Ajaksa, które integrują się ze standardowymi formula-

rzami sieciowymi ASP.NET. • Obsługa ASP.NET 2.0. • Dostępny jest pełny kod źródłowy. • Na stronie http://www.mathertel.de/AjaxEngine/ dostępna jest demonstracyjna witryna in-

ternetowa.

• Pomoc na blogach w języku angielskim (http://ajaxaspects.blogspot.com/) i niemieckim

(http://ajaxaspekte.blogspot.com/). • Licencja typu open source (Creative Commons). Autor to Matthias Hertel (http://www.

mathertel.de).

Atlas (z końca roku 2005) Altas (http://www.asp.net/default.aspx?tabindex=7&tabid=47) to projekt dotyczący Ajaksa rozwijany przez Microsoft. ASP.NET Atlas to pakiet nowych technologii służący do tworzenia aplikacji sieciowych, który łączy w sobie szeroki zestaw bibliotek skryptów działających po stronie klienta oraz rozbudowaną bazującą na serwerze platformę programistyczną ASP.NET 2.0. • Komercyjny produkt Microsoftu (szczegóły licencji były nieznane w czasie pisania książki).

612

|

Dodatek A Platformy i biblioteki Ajaksa

Bitkraft dla ASP.NET Bitkraft (http://www.tiggrbitz.com) to platforma sieciowa bazująca na środowisku CLR (.NET), która w nowatorski sposób umożliwia tworzenie i udostępnianie rozproszonej zawartości. Platforma jest napisana w języku C# i kompiluje się na platformie .NET Microsoftu (wersja 1.1 i nowsze) oraz na platformie .Mono, dzięki czemu można jej używać w niemal każdym systemie. Platforma Bitkraft rozszerza architekturę języka ASP.NET i zapewnia pełną obsługę wywołań zwrotnych serwera bazującą na języku JavaScript. Warstwę przesyłu danych w Ajaksie stanowią tu obiekty XMLHttpRequest. • Obsługiwane przeglądarki: IE (wersja 5 i nowsze), Firefox (wersja 1 i nowsze) i Netscape 6. • Obsługa platform działających po stronie serwera: ASP.NET, Mono XSP, Cassini, Apache

(modMono) i platforma .NET (wersja 1.1 i nowsze). • Sterowana atrybutami. • Asynchroniczne i synchroniczne metody odwzorowywane bezpośrednio z obiektów po-

średniczących języka JavaScript na metody serwera. • Obsługuje wszystkie typy platformy .NET i niestandardowe klasy, które po stronie

klienta są odwzorowywane na obiekty JSON.

• Korzysta z formatu JSON, a nie z XML. • Biblioteka o otwartym dostępie do kodu źródłowego autorstwa Wayne’a Lee-Archera.

ComfortASP.NET dla ASP.NET 1.1 i 2.0 ComfortASP.NET (http://www.comfortasp.de) to narzędzie, które umożliwia programistom używanie samego języka ASP.NET i jednoczesne udostępnianie właściwości Ajaksa. Wewnętrznie ComfortASP.NET używa do ich obsługi Ajaksa (DHTML, JavaScript i XMLHTTP), jednak programiści mogą korzystać z czystego ASP.NET używanego po stronie serwera! • Automatyczne przekazywanie samych zmian między stronami ASP.NET przesłanymi

zwrotnie, co prowadzi do wyraźnie szybszych odpowiedzi w przypadku łączy o małej przepustowości i mniejszego przepływu danych HTML (aż do 90% w zależności od ilości nowych danych przesyłanych zwrotnie). • Zmniejszenie liczby przeładowań strony i używanie w zamian ukrytego przesyłania

zwrotnego. • Po stronie klienta można mieć wrażenie, że strona napisana jest przy użyciu Ajaksa

i DHTML (choć programista nie używa bezpośrednio tych technologii). • W historii przeglądarki nie są zapisywane strony przesłane zwrotnie (użytkownicy nie

będą się irytować dziwnym działaniem przycisku Wstecz).

• Automatyczne wyłączanie formularzy i zapobieganie wpisywaniu danych przez użyt-

kownika w czasie zwrotnego przesyłania strony lub wielokrotnego zwrotnego przesyłania formularza. • Kontrola pozycji, do jakiej została przewinięta strona w aplikacji klienckiej. Koncentracja

na kodzie wykonywanym po stronie serwera.

Platformy Ajaksa dla języków .NET

|

613

• W razie potrzeby zawsze można przełączyć się z powrotem do oryginalnego kodu

ASP.NET, nawet dynamicznie w czasie wykonywania programu. • Licencja typu open source. Autor to Daniel Zei.

MagicAjax.NET (z września 2005 roku) MagicAjax.NET (http://www.magicajax.net/) to platforma o otwartym dostępie do kodu źródłowego zaprojektowana tak, aby programiści mogli łatwiej i w bardziej intuicyjny sposób integrować technologię Ajax ze stronami internetowymi bez konieczności zamiany kontrolek ASP.NET lub pisania kodu w języku JavaScript. • Wystarczy wykonać początkową instalację, a następnie umieścić kontrolki, które mają

być zgodne z Ajaksem, w panelu Ajaksa — gotowe! • Dostępnych jest także wiele innych funkcji, jeśli programista potrzebuje zaawansowanych

możliwości. • Licencja typu open source (LGPL). Napisana przy współudziale wielu programistów.

MonoRail (z maja 2005 roku) MonoRail (http://www.castleproject.org/index.php/MonoRail) to platforma do tworzenia aplikacji sieciowych w języku C# przy użyciu szablonów, a nie za pomocą formularzy Web. • Funkcjonalność podobna do Ruby on Rails. • Generuje większość kodu JavaScript (lub nawet cały) dla kontrolek i animacji wyświetla-

nych w przeglądarce. • Udostępnia narzędzia pomocnicze, które współpracują z biblioteką Prototype (http://

prototype.conio.net/). • Funkcjonuje na platformach .NET i .Mono w systemach Windows i Linux. • Licencja typu open source. Napisana przy współudziale wielu programistów.

WebORB for .NET (z sierpnia 2005 roku) WebORB for .NET (http://www.themidnightcoders.com/weborb/aboutWeborb.htm) to platforma służąca do tworzenia aplikacji ze złożonym klientem bazująca na technologiach Ajax i Flash. Ta platforma umożliwia łączenie takich aplikacji z obiektami .NET i usługami sieciowymi XML (na stronie http://www.themidnightcoders.com/examples znajdują się przykładowy program). • WebORB zawiera bibliotekę Rich Client System (http://www.themidnightcoders.com/rcs/

index.htm) działającą po stronie klienta. Ta biblioteka udostępnia prosty jednowierszowy interfejs API do wiązania kodu klienta z metodami dowolnego obiektu .NET lub usługi sieciowej XML i do wywoływania tych metod. • Obsługuje synchroniczne i asynchroniczne wywołania metod.

614

|

Dodatek A Platformy i biblioteki Ajaksa

• Nie wymaga modyfikacji kodu działającego po stronie serwera ani stosowania niestan-

dardowych atrybutów metod, specjalnych sygnatur lub typów argumentów. Na etapie projektowania nie trzeba generować procedur pośredniczących. • Wszelkie metody działające po stronie serwera można wywoływać synchronicznie

i asynchronicznie. • Aplikacje klienckie mogą zażądać specjalnego trybu aktywacji obiektów działających na

serwerze. Dzięki tej technice obiekty mogą łatwo przechowywać stan bez konieczności pisania specjalnego kodu. • Udostępnia specjalny interfejs API do obsługi wyników zapytań kierowanych do bazy

danych. Kod działający na serwerze może zwracać obiekty DataSet lub DataTable, które po stronie klienta są przedstawiane jako specjalny obiekt języka JavaScript, RecordSet. Ten obiekt umożliwia pobieranie nazw kolumn oraz wierszy danych. • Obsługuje stronicowanie danych. Aplikacja kliencka może pobierać dane na stronach, co

poprawia komfort pracy użytkownika. • Obsługuje wszystkie typy argumentów i zwracanych wartości używane po stronie

serwera: prymitywy, łańcuchy znaków, typy złożone, tablice, natywne kolekcje platformy .NET i zdalne referencje.

• Podwójna licencja (standardowa edycja jest bezpłatna, a profesjonalna — komercyjna).

Autorem jest Midnight Coders.

zumiPage Biblioteka zumiPage (http://www.zumipage.com) umożliwia automatyczne przechwytywanie po stronie klienta wywołań zwrotnych kierowanych na serwer i przesyłanie danych przy użyciu mechanizmu XMLHTTP. • zumiPage nie wymaga modyfikowania kodu w istniejących projektach, dlatego można

używać języka ASP.NET, tak jak zawsze korzystając ze standardowych kontrolek sieciowych i metodologii — za pozostałe operacje odpowiada zumiPage. Dzięki zastosowaniu tej biblioteki aplikacje sieciowe mogą działać bardziej płynnie, szybciej i być w większym stopniu interaktywne. • Współpracuje z ASP.NET 2.0 i 1.1. • Jest w pełni zgodna z przeglądarkami Internet Explorer i Mozilla Firefox. • Może zmniejszyć ilość przesyłanych danych aż o 90%. • Łatwo zintegrować ją z istniejącymi projektami. • Nie wymaga stosowania języka JavaScript. • Obsługuje szybkie i niewidoczne wywołania zwrotne za pomocą XMLHTTP. • Zapewnia pełną kontrolę nad kontrolkami zwracanymi przy każdym zwrotnym przesła-

niu strony. • Obsługuje operacje związane z oczekiwaniem (w czasie wczytywania danych z serwera). • Licencja komercyjna. Autor to Amir Leshem.

Platformy Ajaksa dla języków .NET

|

615

Platformy Ajaksa dla języka Java Zawsze dostępnych było wiele różnych platform dla języka Java. W przypadku Ajaksa powstały nowe, a niektóre istniejące rozszerzono o pewne dodatki. Dwie popularne biblioteki z tej grupy to Ajax JSP Tag Library i Direct Web Remoting.

AjaxAnywhere (z września 2005 roku) AjaxAnywhere (http://ajaxanywhere.sourceforge.net) nie wymaga używania kodu JavaScript i zwraca dowolny zbiór istniejących komponentów JSP, JSF, Struts, Spring itd. jako komponenty zgodne z Ajaksem. Zobacz program demonstracyjny Quick Start na stronie http://ajaxanywhere.sourceforge.net/quickStart.html. • Nie narusza po stronie serwera istniejącej architektur MVC. • Wymaga utworzenia i pielęgnacji mniejszej ilości kodu JavaScript. Brak powszechnie sto-

sowanych konwencji nazewniczych, zasad formatowania i wzorców powodują, że kod w języku JavaScript jest mniej czytelny niż w językach Java i JSP. Niezwykle trudno jest diagnozować taki kod i przeprowadzać testy jednostek w środowiskach obsługujących wiele przeglądarek. AjaxAnywhere eliminuje te problemy. • Łatwa w integracji. AjaxAnywhere nie wymaga zmiany istniejącego kodu aplikacji. • Stopniowa degradacja. W dowolnym momencie można przełączyć się między Ajaksem

a tradycyjnym działaniem aplikacji (odświeżanie całych stron). Aplikacja może także obsługiwać oba podejścia. • Licencja typu open source (Apache 2).

AJAX JSP Tag Library Biblioteka AJAX JSP Tag Library (http://ajaxtags.sourceforge.net/) to zestaw znaczników JSP, które upraszczają używanie Ajaksa na stronach JavaServer Pages. Ta biblioteka ułatwia programowanie, ale nie zmusza programistów używających J2EE do pisania kodu JavaScript potrzebnego do tworzenia formularzy zgodnych z Ajaksem. Te znaczniki to: Autocomplete Pobiera listę wartości pasujących do łańcucha znaków wpisywanego przez użytkownika w pole tekstowe formularza. Callout W odpowiedzi na zdarzenie onclick wyświetla zaznaczony fragment lub wyskakujący dymek powiązany z elementem HTML. Select Zapełnia drugie pole select na podstawie wyboru dokonanego w pierwszym polu z listą rozwijaną. Toggle Przełącza wartość ukrytego pola formularza między true i false, jednocześnie zmieniając źródło rysunku tego pola.

616

|

Dodatek A Platformy i biblioteki Ajaksa

Update Field Aktualizuje wartości pola formularza na podstawie tekstu wpisanego w inne pole. Licencja typu open source. Napisana przy współudziale wielu programistów.

AJAX Java Server Faces Framework AJAX-JSF (http://smirnov.org.ru/en/ajax-jsf.html) dodaje do gotowych aplikacji typu Java Server Faces funkcjonalność Ajaksa. Większość istniejących komponentów można użyć od razu lub łatwo przekształcić tak, aby obsługiwały Ajaksa. • Zobacz działający przykładowy program MyFaces JSF Tree, w którym mechanizm prze-

wijania tabeli i panel z zakładkami to komponenty zgodne z Ajaksem (http://smirnov.org.ru/ myfaces-ajax/ajax.jsf). • Minimalne różnice względem specyfikacji JSF. Jest to propozycja dodatku do projektu

MyFaces. • Licencja typu open source (Apache Software License 2.0). Autor to Alexander Smirnov.

Direct Web Remoting (DWR; z 2005 roku) Direct Web Remoting (DWR; http://www.getahead.ltd.uk/dwr/) to platforma służąca do wywoływania metod języka Java bezpośrednio z poziomu kodu języka JavaScript. • Podobnie jak SAJAX platforma ta umożliwia przekazywanie wywołań z kodu JavaScript do

metod języka Java i z powrotem do wywoływanych zwrotnie funkcji języka JavaScript.

• Można używać z dowolną platformą sieciową: Struts, Tapestry itd. • Zgoda z zasadami KISS, POJO i niezależności przypominającymi te stosowane na plat-

formie Spring.

• Ma być dołączona do następnej wersji platformy WebWork (http://www.opensymphony.com/

webwork/). • Licencja typu open source (Apache; zobacz http://www.apache.org/LICENSE.txt). Autor to

Joe Walker (http://www.gatahead.ltd.uk/sg/space/joe/).

Echo 2 (z marca 2005 roku) Echo 2 (http://www.nextapp.com/products/echo2/) umożliwia tworzenie aplikacji Ajax w czystym kodzie Java (na stronie http://demo.nextapp.com/InteractiveText/ia znajduje się program demonstracyjny). • Automatycznie generuje kod HTML i JavaScript. • Koordynuje przesyłanie komunikatów między przeglądarką i serwerem. Obsługuje prze-

syłanie komunikatów XML. • Umożliwia samodzielne pisanie niestandardowych komponentów języka JavaScript, jeśli

jest to potrzebne. • Licencja typu open source (Mozilla Public License lub GNU LGPL). Autorem jest Next

App, Inc. (http://www.nextapp.com/).

Platformy Ajaksa dla języka Java

|

617

Guise Guise (http://www.guiseframework.com/) udostępnia elegancką architekturę do tworzenia komponentów działających po stronie serwera. Dzięki tej bibliotece programiści nie muszą używać języka HTML ani JavaScript (na stronie http://www.guiseframework.com/demonstration znajduje się program demonstracyjny). • Kompletna platforma do obsługi aplikacji pisanych w całości w języku Java. • Umożliwia myślenie w kategoriach komponentów i zdarzeń zamiast generowania kodu

HTML i obsługi modelu DOM. • Udostępnia kontrolki, modalne okna dialogowe, przejścia i inne komponenty. • Zgodna z XHTML. • Elastyczna licencja komercyjna. Ze strony Global Mentor Inc. można pobrać bezpłatną,

w pełni funkcjonalną wersję dla programistów.

ICEfaces ICEfaces (http://www.icesoft.com/products/icefaces.html) to zgodne ze standardami rozszerzenie dla JavaServer Faces (JSF) służące do tworzenia i wdrażania złożonych aplikacji Ajax. • Płynne, stopniowe aktualizacje stron za pomocą edycji „w miejscu” i bez konieczności

pełnego odświeżania stron. • W czasie aktualizowania stron zachowywany jest kontekst użytkownika, włączając w to

pozycję paska przewijania i aktywną kontrolkę. • Asynchroniczne aktualizacje strony w czasie rzeczywistym wywoływane przez aplikację. • Szczegółowo dopracowana obsługa interakcji z użytkownikiem w czasie wypełniania

formularzy, rozszerzająca standardową pętlę przesłanie formularza-odpowiedź. • Licencja komercyjna. Autorem jest IceSoft.

JSON-RPC-Java (z kwietnia 2004 roku) JSON-RPC-Java (http://oss.metaparadigm.com/jsonrpc/) to warstwa pośrednia dla protokołu Ajax RPC, która umożliwia aplikacjom bazującym na JavaScript i DHTML wywoływanie zdalnych metod serwera aplikacji J2EE. • Niezauważalnie odwzorowuje obiekty Java na obiekty JavaScript i z powrotem, używając

mechanizmu refleksji języka Java. • Obsługuje szeregowanie i odszeregowywanie dowolnie złożonych zagnieżdżonych

struktur danych. • Prosty protokół podobny do XML-RPC. • Rozbudowuje system zabezpieczeń J2EE o eksportowanie obiektów specyficzne dla sesji. • Licencja typu open source (LGPL). Program napisany przez Michaela Clarka przy współ-

udziale innych programistów.

618

|

Dodatek A Platformy i biblioteki Ajaksa

JSP Controls Tag Library (z grudnia 2005 roku) JSP Controls Tag Library (http://jspcontrols.sourceforge.net/) obsługuje cykl życia komponentów JSP przypominających portlety. Ta biblioteka nie wymaga współpracy z silnikiem portalu ani żadnym innym centralnym kontrolerem. Komponentów utworzonych przy użyciu tej biblioteki można używać w dowolnej aplikacji bazującej na JSP. • Obsługuje komponenty działające w dwóch trybach (niezgodnym i zgodnym z Ajaksem),

dlatego współpracuje nawet z przeglądarką Netscape 4. • W trybie niezgodnym z Ajaksem komponenty działają w synchronicznym cyklu żądań

i odpowiedzi HTTP według wzorca Redirect-After-Post (przekierowanie po przesłaniu). • W trybie zgodnym z Ajaksem komponenty są aktualizowane „w miejscu”. • Ponowne wczytywanie komponentów w trybie niezgodnym z Ajaksem jest całkowicie

automatyczne i niezauważalne.

• Przechodzenie między trybem zgodnym i niezgodnym z Ajaksem w wyniku włączania

i wyłączania obsługi języka JavaScript jest niewykrywalne. • Na stronie http://www.superinterface.com/jspcontrols/index.html znajduje się program demon-

stracyjny. • Licencja typu open source (Apache 2.0). Autor to Michael Jouravlev.

jWic jWic (http://www.jwic.de) to platforma programistyczna języka Java, która służy do tworzenia dynamicznych aplikacji sieciowych w wygodny i znany sposób przypominający programowanie aplikacji bazujących na złożonym kliencie. • Model programowania bazujący na komponentach i sterowany zdarzeniami. • Kontrolki są generowane przy użyciu szablonów (np. Velocity). • Dynamicznie aktualizuje kontrolki przy użyciu mechanizmów Ajaksa. • Licencja typu open source (Apache 2.0). Autorzy to Florian Lippisch i Jens Bornemann.

Struts-Layout Struts-Layout (http://struts.application-servers.com) to biblioteka znaczników dla platformy Apache Struts, która umożliwia łatwe i szybkie tworzenie interfejsów. Służą do tego dające wiele możliwości znaczniki wyświetlające panele, pole typu input, tabele, kontrolki do przeglądania drzew, listy, które można sortować, tabele danych, okna wyskakujące, kalendarze itd. Dzięki możliwości dostosowania tych znaczników do własnych preferencji niektórzy programiści w zespole w ogóle nie muszą używać ani nawet znać języka HTML. • Biblioteka znaczników Struts-Layout obecnie umożliwia umieszczanie na witrynach pól

typu Suggest (http://struts.application-servers.com/suggest/index.html). • Licencja typu open source (Apache 2). Autor to Jean-Noel Ribette.

Platformy Ajaksa dla języka Java

|

619

SWATO (z 2005 roku) SWATO (Shift Web Application TO…; http://swato.dev.java.net/) to zestaw nadających się do wielokrotnego wykorzystania i dobrze zintegrowanych bibliotek języków Java i JavaScript, które ułatwiają dodawanie interakcji w stylu Ajaksa do aplikacji sieciowych. • Bibliotekę języka Java działającą po stronie serwera można łatwo umieścić w dowolnym

kontenerze zgodnym z Servlet wersja 2.3 i nowsze. • Biblioteka języka JavaScript działająca po stronie klienta bazuje na bibliotece Prototype,

dzięki czemu można tworzyć kod JavaScript w sposób obiektowy. • Używa formatu JSON do szeregowania danych obiektów POJO (ang. Plain Old Java Object,

czyli zwykłych obiektów języka Java) i przesyłania ich na serwer. • Udostępnia prosty interfejs (na przykład poprzez wywołania RPC lub zdalny dostęp

między domenami) dla kodu JavaScript umożliwiający interakcję ze zdalnymi obiektami POJO udostępnianymi po stronie serwera.

• Łatwa i elastyczna konfiguracja przy użyciu znaczników i w pliku

web.xml. Jest to możliwe dzięki integracji z platformą Spring. • Udostępniana z kilkoma komponentami nadającymi się do wielokrotnego wykorzystania

(pole tekstowe z automatycznymi podpowiedziami, JS Template, JS Logger itd.), które ułatwiają tworzenie aplikacji sieciowych. • Na stronie http://swato.throughworks.com dostępny jest program demonstracyjny. • Licencja typu open source (Apache). Autor to Zhijie Chen.

Tacos Tapestry Components (z grudnia 2005 roku) Tacos (http://tacos.sourceforge.net) to biblioteka silnika i komponentów Ajaksa dla aplikacji bazujących na Ajaksie i DHTML napisana w języku Java i przeznaczona dla platformy sieciowej Tapestry (http://jakarta.apache.org/tapestry). • Umożliwia pełną integrację z biblioteką Dojo języka JavaScript (http://dojotoolkit.org)

i udostępnia bogaty zestaw kontrolek i właściwości. • Jej używanie wymaga jedynie podstawowej wiedzy z zakresu języka JavaScript (w nie-

których przypadkach w ogóle nie trzeba go znać), choć każdy element procesu można dostosować do własnych preferencji. • Udostępnia narzędzia programistyczne takie jak okno konsoli do obsługi rejestrowania

i diagnozowania żądań inicjowanych przez język JavaScript (w aplikacjach Ajax i zwykłych), co znacznie ułatwia pisanie aplikacji Ajax. • Biblioteka komponentów zawiera rozbudowany zestaw kodu o produkcyjnej jakości

z wbudowaną funkcjonalnością obejmującą okna dialogowe, okna pływające, mnóstwo efektów, drzewa, automatyczne uzupełnianie, edytor typu inline itd. • Bogata obsługa Ajaksa bazująca na formularzach obejmuje sprawdzanie poprawności

formularzy po stronie klienta, mechanizm śledzenia zawartości pól, przesyłanie częściowo wypełnionych formularzy itd. • Licencja typu open source (Apache). Napisana przy współudziale wielu programistów.

620

|

Dodatek A Platformy i biblioteki Ajaksa

ThinkCAP JX ThinkCAP JX (http://www.clearnova.com) służy do tworzenia aplikacji handlowych na poziomie przemysłowym. • Zawiera edytor Visual Workbench. • Bazuje na ponad 20 projektach o otwartym dostępie do kodu źródłowego, włączając w to

Struts, Hibernate, JFreeChart i wiele innych. • Używając trójwarstwowego modelu klient-serwer, minimalizuje ilość kodu JavaScript

dzięki bibliotece umożliwiającej wygenerowanie po stronie serwera ponad 150 metod. • Obsługuje skomplikowane aktualizacje Ajaksa za pomocą projektu TransactionSafe.

Gwarantuje to bezpieczeństwo połączenia oraz automatyzuje skomplikowane aktualizacje z wykorzystaniem tabel nadrzędnych i podrzędnych. • Bogate kontrolki do obsługi danych obejmują między innymi tabele danych z widokiem

umożliwiającym przewijanie i aktualizację, sortowanie po stronie klienta, pasek Outlook, accordion, panele zakładek i pola z autouzupełnianiem. • Inteligentne wiązanie danych umożliwia deklaratywne wiązanie żądań HTTP lub para-

metrów sesji. • Mechanizm zarządzania warstwą klienta i serwera automatycznie kieruje wyniki wywo-

łania komponentu (lub Ajaksa) do odpowiedniego domyślnego lub określonego obszaru strony. • Podwójna licencja (GPL lub komercyjna). Autorem jest ClearNova.

WebORB for Java (z sierpnia 2005 roku) WebORB for Java (http://www.themidnightcoders.com/weborb/aboutWeborb.htm) to platforma do tworzenia aplikacji bazujących na rozbudowanym kliencie wykorzystujących technologie Ajax i Flesh. Ta platforma umożliwia łączenie tych technologii z obiektami Java i usługami sieciowymi XML. Na stronie http://www.themidnightcoders.com/examples znajdują się przykładowe aplikacje. • Więcej szczegółów znajdziesz w punkcie WebORB for .NET (z sierpnia 2005). • Podwójna licencja (standardowa edycja jest bezpłatna, a profesjonalna — komercyjna).

Autorem jest Midnight Coders.

Widget Server (z 2004 roku) WidgetServer (https://wiser.dev.java.net) umożliwia pisanie aplikacji Ajax za pomocą samego języka Java. • Automatycznie generuje kod HTML i JavaScript. • Koordynuje przesyłanie komunikatów między przeglądarką a serwerem. • Umożliwia samodzielne pisanie niestandardowego kodu JavaScript i komponentów

HTML oraz CSS, jeśli jest to potrzebne.

Platformy Ajaksa dla języka Java

|

621

• Aplikacje działają jako aplikacje sieciowe, aplikacje platformy Swing lub jako klient lub

serwer platformy Swing.

• Podwójna licencja (komercyjna wersja zapewniająca wyższą wydajność i mniej wydajna

wersja o otwartym dostępie do kodu źródłowego). Autor to Dirk von der Weiden.

Platformy Ajaksa dla języka Lisp CL-Ajax CL-Ajax (http://cliki.net/cl-ajax) kieruje wywołania języka JavaScript bezpośrednio do funkcji języka Lisp działających po stronie serwera. • Skrypt eksportujący funkcje wygląda następująco: (export-function #'my-function)

• Generuje procedury pośredniczące języka JavaScript z argumentami. • Umożliwia kierowanie wywołań zwrotnych do funkcji języka JavaScript lub obiektów

modelu DOM.

• Można zintegrować ją z platformą SAJAX. • Licencja typu open source (niestandardowa i bardzo elastyczna). Autor to Richard Newman

(http://www.holygoat.co.uk/).

Platformy Ajaksa dla języka Perl CGI::Ajax — eksportowanie metod języka Perl do kodu JavaScript Ajaksa CGI::Ajax (http://pjax.sourceforge.net/) to moduł języka Perl, dzięki któremu pisanie skryptów Ajaksa w języku Perl jest banalnie proste. Moduł ten bazuje na obiektowym języku Perl i umożliwia wiązanie zdarzeń języka JavaScript z kodem w języku Perl poprzez zdefiniowanie odwzorowania między odpowiadającymi sobie nazwami funkcji obu języków. • Modułu można używać do wiązania dowolnego kodu języka Perl ze zdarzeniami języka

HTML, włączając to pobieranie innych adresów URL (na przykład za pomocą modułu LWP).

• Można go zagnieżdżać, dlatego zdarzenie języka HTML może początkować łańcuch zda-

rzeń Ajaksa (na przykład onClick="zrob_cos();teraz_to();na_koniec_to()").

• Obsługuje metody GET i POST. • Nie trzeba nazywać eksportowanych procedur w specyficzny sposób — można im nadać

dowolne nazwy.

• Bardzo mały spadek wydajności — umożliwia myślenie w kategoriach języka Java bez

obaw o gorsze działanie programu.

• Aktywna społeczność programistów. • Biblioteka o otwartym dostępie do kodu źródłowego (licencja Perl i Artistic). Autor to

Brian Thomas.

622

|

Dodatek A Platformy i biblioteki Ajaksa

HTML::Prototype — generowanie kodu HTML i JavaScript dla biblioteki Prototype HTML::Prototype (http://search.cpan.org/dist/HTML-Prototype/) zawiera narzędzia generujące kod dla biblioteki Prototype — znanej obiektowej biblioteki języka JavaScript — oraz rozszerzenia script.aculo.us. • Podobna do bibliotek pomocniczych Prototype w Ruby on Rails. • Licencja typu open source (GPL i Artistic). Napisana przy współudziale wielu programistów.

Platformy Ajaksa dla języka PHP Platformy dla języka PHP w większym stopniu przeznaczone są do obsługi zdalnych wywołań niż do generowania kodu HTML. Popularne biblioteki do obsługi zdalnych wywołań to XOAD, a także CPAINT i SAJAX (dwie ostatnie opisane w podrozdziale Ogólne platformy dla języka JavaScript).

AJASON AJASON (http://ajason.sourceforge.net/) to platforma bazująca na PHP. • Używa formatu JSON (JavaScript Object Notation) do zapisywania i odczytywania danych

po stronie serwera i przeglądarki. • Licencja typu open source. Napisana przy współudziale wielu programistów.

AjaxAC (z kwietnia 2005 roku) AjaxAC (http://ajax.zervaas.com.au/) umożliwia ukrycie całej aplikacji w jednej klasie języka PHP. • Cały kod aplikacji można ukryć w pojedynczej klasie (potrzebne mogą być dodatkowo

biblioteki języka JavaScript). • Wywoływanie pliku PHP lub strony HTML jest bardzo przejrzyste. Wystarczy utworzyć

klasę aplikacji, a następnie określić kod JavaScript aplikacji i dołączyć potrzebne elementy HTML. • Wbudowana funkcjonalność ułatwiająca obsługę zdarzeń języka JavaScript. • Wbudowana funkcjonalność umożliwiająca tworzenie żądań podrzędnych i ich obsługę. • Umożliwia stosowanie własnych wartości konfiguracyjnych, dlatego niektóre elementy

można ustawiać w czasie wykonywania programu. • W kodzie HTML nie trzeba umieszczać kodu JavaScript, co pozwala zwiększyć przejrzy-

stość. Wszystkie wydarzenia są dołączane dynamicznie.

• Łatwa integracja z silnikiem obsługującym szablony. • Łatwo jest uzyskać dostęp do istniejących klas PHP lub baz danych MySQL w celu zwró-

cenia danych w odpowiedzi na żądanie podrzędne.

Platformy Ajaksa dla języka PHP

|

623

• Rozszerzalna struktura kontrolek umożliwia łatwe tworzenie nowych obiektów JavaScript

(wymaga to jednak nieco pracy). • Licencja typu open source (Apache 2.0). Autorem jest Zervaas Enterprises (http://ajax.

zervaas.com.au/).

Cajax Cajax (http://sourceforge.net/projects/cajax) to obiektowa platforma języka PHP, która przy użyciu zdalnych wywołań języka JavaScript tworzy i obsługuje żądania kierowane na serwer. Właściwości platformy: • Proste programowanie po stronie serwera. • Bardzo mała ilość kodu po stronie klienta (mniej kodu JavaScript). • Metody obsługi zdarzeń zachodzących po stronie serwera. • Obsługa podpowiedzi podobna do tej z witryny Google. • Wtyczka dla złożonych pól select (na przykład zawierających pola: kraj, województwo,

miasto). • Zdalne wywołania kierowane na serwer bezpośrednio z kodu JavaScript za pomocą war-

stwy abstrakcji. • Wtyczka do przesyłania formularzy za pomocą obiektów XMLHttpRequest. • Pamięć podręczna dla języka JavaScript. • Licencja typu open source (LGPL). Autor to Thiago Pappacena.

HTS Web Application Framework HTSWaf (http://www.htsdesing.com/index.php?§ion=htswaf&page=index) udostępnia dyskretną obsługę zdarzeń na linii klient-serwer. • Platforma HTS Web Application Framework bazuje na językach PHP oraz JavaScript

i ma ułatwiać projektowanie oraz implementację prostych aplikacji sieciowych. Platforma obejmuje silnik obsługujący znaczniki za pomocą zautomatyzowanego kodu JavaScript oraz modelu zdarzeń języka PHP i pozwala zautomatyzować przesyłanie danych na serwer i z powrotem. • Więcej informacji oraz przykładowe aplikacje znajdziesz na stronie http://www.htsdesign.com/

index.php?§ion=htswaf&page=index). • Obecnie na etapie wersji demonstracyjnej. Autor to Bert Rosell.

JPSpan JPSpan (http://jpspan.sourceforge.net/wiki/doku.php) przekazuje wywołania z kodu JavaScript bezpośrednio do funkcji języka PHP. • Starannie przetestowana. • Licencja typu open source.

624 |

Dodatek A Platformy i biblioteki Ajaksa

PEAR::HTML::Ajax PEAR::HTML::Ajax (http://pear.php.net/package/HTML_AJAX) to biblioteka Ajaksa dla języków PHP i JavaScript. • Udostępnia biblioteki służące do wykonywania operacji Ajaksa (komunikacja z przeglą-

darką z poziomu języka JavaScript bez konieczności odświeżania stron) dla języków PHP i JavaScript.

• Udostępnia obiektowe mechanizmy pośredniczące języka JavaScript dla zarejestrowa-

nych operacji języka PHP i operacje, które nie wymagają pośredników. • Serializacja danych przesyłanych między kodem PHP i JavaScript jest obsługiwana po-

przez model sterowników. Obecnie obsługiwane są formaty JSON i Null. • Licencja typu open source (LGPL). Napisana przy współudziale wielu programistów.

Pipeline Platforma Pipeline (http://livepipe.net) składa się z prostej biblioteki obsługującej klienta i umożliwia bezpośrednią integrację z kontrolerem. Główny nacisk położony jest na prostotę, dlatego platforma nie udostępnia zbyt wielu właściwości, ani nie używa formatu XML. Zachęca do zwracania przez kontroler kodu HTML, łańcuchów znaków lub tablic asocjacyjnych, które są przekształcane z kodu PHP na kod JavaScript. • Licencja typu open source z komercyjnymi dodatkami. Autorem jest Picora Pipeworks.

Symfony Symfony (http://www.symfony-project.com) integruje warstwę Ajaksa działającą po stronie serwera z narzędziami pomocniczymi typu script.aculo.us, co umożliwia łatwe tworzenie aplikacji Ajax w języku PHP. • Na stronie http://www.symfony-project.com/tutorial/symfony_ajax.html znajduje się samouczek

opisujący, jak utworzyć interaktywny koszyk zakupów. To rozwiązanie demonstruje ścisłą integrację bibliotek Prototype, script.aculo.us i modelu MVC. • Zestaw Advent Calendar (http://www.symfony-project.com/askeet) to 24 krótkich samouczków

ilustrujących, jak tworzyć przydatne aplikacje Ajax. Dostępny jest także pełny kod rozwiązań. Interaktywne przesyłanie formularzy, grupowa kategoryzacja i efekty graficzne to niektóre z właściwości Ajaksa na ciągle rozbudowywanej witrynie internetowej askeet (http://www.askeet.com). Wizyta obowiązkowa. • Licencja typu open source (MIT). Projekt sponsorowany przez Sensio.

XAJAX XAJAX (http://www.xajaxproject.org) przekazuje wywołania języka JavaScript bezpośrednio do funkcji języka PHP. • Używa namiastek w języku JavaScript do wywoływania funkcji, metod obiektów i metod

klas w skryptach języka PHP.

Platformy Ajaksa dla języka PHP

|

625

• Do tworzenia odpowiedzi służy obiekt odpowiedzi XAJAX, który udostępnia liczne po-

lecenia, umożliwiające na przykład przypisanie kodu HTML do elementu czy wyświetlenie alertu. Obsługiwane jest także zwracanie niestandardowych danych przez skrypty.

• Cały kod specyficzny dla przeglądarek (na przykład używający obiektów XMLHttpRequ-

est) jest poddany abstrakcji, a przesyłanie różnych typów danych na serwer (włączając to przesyłanie formularzy przy użyciu Ajaksa) jest bardzo łatwe.

• Platforma obsługuje liczne opcje konfiguracyjne, dzięki którym integracja z istniejącymi

argumentami sieciowymi i platformami jest łatwa.

• Baza kodu JavaScript jest łatwa do zrozumienia i można ją przesłonić w celu dodania ob-

sługi bardziej zaawansowanych funkcji tego języka. • Dobra pomoc techniczna w postaci forum i nowej wiki z dokumentacją i samouczkami. • Licencja typu open source (LGPL). Autorzy to J. Max Wilson i Jared White.

XOAD (wcześniej NAJAX) XOAD (http://www.xoad.org) to obiektowa platforma dla Ajaksa i XAP bazująca na PHP. • Używa do przesyłania informacji Komunikatów JSON i natywnych serializowanych

obiektów języka PHP.

• Specjalną uwagę poświęcono bezpieczeństwu. • Obsługuje zdarzenia zachodzące po stronie serwera (wzorzec Zdarzenia rozproszone

w rozdziale 10.)

• Obsługuje zdarzenia zachodzące po stronie klienta (zdarzenia XOAD). • Udostępnia rozszerzenia po stronie serwera i klienta. • Umożliwia manipulowanie kodem HTML (rozszerzenie). • Obsługuje pamięć podręczną (rozszerzenie). • Udokumentowana jest każda klasa, metoda i zmienna. • Dostępne są proste samouczki, które pozwalają zacząć pracę z XOAD. • Dostępne są przykłady demonstrujące różną funkcjonalność. • Nagroda PHP Programming Innowation w sierpniu 2005 roku (http://www.phpclasses.org/

winners.html). • Licencja typu open source (PHP 3.0). Autor to Stanimir Angeloff.

Platformy Ajaksa dla Pythona CrackAJAX CrackAJAX to platforma dla języka Python (http://www.aminus.org/blogs/index.php/phunt/ 2005/10/06/subway_s_new_ajax_framework), która nie wymaga od programisty znajomości języka JavaScript. • Licencja typu open source. Autor to Peter Hunt.

626

|

Dodatek A Platformy i biblioteki Ajaksa

Turbo Gears Turbo Gears (http://turbogears.org) to „megaplatforma” obejmująca wiele bibliotek i platform. • Licencja typu open source (MIT) i wiele licencji dla dołączonych platform. Rozwijana

przez wielu programistów.

Platformy Ajaksa dla Ruby Ruby on Rails Ruby on Rails (http://www.rubyonrails.org/) to ogólna platforma sieciowa z dobrą obsługą Ajaksa. • Platforma Ruby on Rails dopiero się rozwijała, kiedy rozpoczęła się moda na Ajaksa,

dlatego Ajax może stawać się coraz bardziej istotnym elementem tej platformy.

• Generuje większość kodu JavaScript (lub nawet cały) dla kontrolek i animacji wyświetla-

nych w przeglądarce. • Obsługuje wywołania kierowane na serwer. • Zapewnia obsługę planowania. • Licencja typu open source (MIT lub podobna — http://wiki.rubyonrails.com/rails/show/License).

Autor to David Heinemeier Hansson i inni programiści (http://www.loudthinking.com/).

Platformy Ajaksa dla Ruby

|

627

628 |

Dodatek A Platformy i biblioteki Ajaksa

DODATEK B

Instalowanie przykładowego kodu

Pojedynczy pakiet zawierający cały kod przykładów z rozdziału 2. i programy demonstrujący wzorce Ajax można pobrać ze strony http://helion.pl/ajaxwp. W pakiecie tym znajduje się plik INSTALL.txt obejmujący instrukcje dotyczące instalacji. Poniżej znajduje się treść tego pliku, jednak jeśli będziesz miał problemy z uruchomieniem kodu, zajrzyj do wersji elektronicznej, ponieważ może ona zawierać aktualizacje. INSTALACJA PHP ============== * Jeśli jeszcze tego nie zrobiłeś, zainstaluj PHP5 i zintegruj z Apache (lub innym serwerem). Programy demonstracyjne używają obiektowych właściwości PHP5 i nie będą działać w PHP4 i starszych wersjach. Dostępnych jest wiele pakietów, które instalują zestaw "AMP" (Apache, PHP i MySQL; MySQL potrzebna jest w programie wiki — opis poniżej). Pakiet XAMPP współpracuje z wszystkimi głównymi platformami (http://www.apachefriends.org/en/xampp.html). Dla komputerów Apple można użyć pakietu ze strony http://www.entropy.ch/software/macosx.php/, a dla Linuksa — opowiednich pakietów dla Redhata lub Debiana. Można także posłużyć się instrukcjami dotyczącymi instalacji ze strony http://dan.drydog.com/apache2php.html. INSTALOWANIE PROGRAMÓW DEMONSTRACYJNYCH ======================================= * Rozpakuj pakiet do tymczasowej lokalizacji i skopiuj katalogi run/, tutorial/ i records/ do głównego katalogu dokumentów serwera Apache. Zakładając, że główny katalog to /apache/document/root: cp run tutorial records /apache/document/root. (Jeśli masz odpowiednie uprawnienia, możesz utworzyć nowy wirutalny ??serwer w pliku httpd.conf Apache i skierować go do katalogu ajaxdemos/ zawierającego rozpakowany pakiet. * Upewnij się, że serwer ma uprawnienia do zapisu do (początkowo pustego) katalogu records/. Najłatwiej zrobić to, używając poniższej instrukcji (nie jest to jednak najbardziej bezpieczne rozwiązanie): chmod 777 apache/document/root/records * Otwórz plik run/.htaccess i ustaw ścieżkę do bibliotek, wykonując umieszczone w nim instrukcje. * Gotowe! Otwórz adres http://localhost/run/ i http://localhost/tutorial. Jeśli możesz otworzyć stronę http://localhost/run/index.phtml, ale już nie http://localhost/run/, przeczytaj poniższą uwagę. UWAGA DOTYCZĄCA KONFIGURACJI: Możliwe, że nie będziesz musiał zmieniać konfiguracji, ponieważ pliki run/.htaccess i tutorial/.htacess zawierają odpowiednie ustawienia. Jednak niektóre instalacje Apache ignorują te ustawienia (zależy to od dyrektywy AllowOverride), dlatego musisz przygotować się na przepisanie fragmentu pliku run/.htaccess do pliku httpd.conf (plik run/.htaccess to nadzbiór pliku tutorial/.htaccess). W szczególności trzeba zmodyfikować istniejącą dyrektywę

629

DirectoryIndex tak, aby zawierała index.phtml, a także dodać nowy typ, phtml, tak jak w pliku .htacess. Jeśli dyrektywa include_path języka PHP nie działa, prawdopodobnie trzeba zmodyfikować ją w pliku php.ini zgodnie z ustawieniami z pliku .htaccess. INSTALOWANIE BAZY DANYCH DLA WIKI ================================= UWAGA: Program demonstracyjny Wiki i jego wersje to jedyne aplikacje, które wymagają bazy danych. Jej przygotowanie nie jest zbyt trudne, jeśli jednak nie chcesz męczyć się z MySQL-em, wciąż możesz uruchomić inne programy. * Zainstaluj MySQL, jeśli jeszcze tego nie zrobiłeś. * Przygotuj dostęp do bazy danych. * Zaloguj się do mysql jako użytkownik z wszelkimi uprawnieniami, na przykład: mysql -u root * Utwórz użytkownika "ajaxify_wiki" z hasłem "ajaxify_wiki" i nadaj mu wszelkie uprawnienia, na przykład: GRANT ALL PRIVILEGES ON *.* TO ‘ajaxify_wiki’@’localhost’ IDENTIFIED BY ‘ajaxify_wiki’; * Jeśli wolisz używać istniejącego konta, zobacz szczegóły w pliku Model/DAO.php tej wersji aplikacji Wiki, którą chcesz uruchomić. * Uruchom plik run/wiki/Model/freshDB.sh. Musisz to zrobić tylko raz, ponieważ wszystkie wersje Wiki mogą współdzielić te same tabele. UWAGA: upewnij się, że ścieżka wiersza poleceń jest odpowiednio skonfigurowana, aby "php" oznaczało PHP5. * Wpisz w przeglądarce adres Wiki, na przykład http://localhost/run/wiki/, po czym powinieneś zobaczyć trzy nowe wiadomości. ROZWIĄZYWANIE PROBLEMÓW ======================= Jeśli natrafisz na problem: * Zapoznaj się z niniejszym punktem, ponieważ niektóre programy wymagają dodatkowej instalacji. * Spróbuj najpierw uruchomić programy z samouczka. Są one w mniejszym stopniu narażone na błędy, ponieważ nie zawierają ścieżek do bibliotek. * Sprawdź, czy uprawnienia do plików są odpowiednie. Najłatwiej zrobić to, uruchamiając polecenie "chmod 755 document/root". Ponadto warto sprawdzić, czy możliwy jest zapis do katalogu records/. * W przypadku Wiki sprawdź ręcznie, czy baza danych jest gotowa i czy można uzyskać do niej dostęp przy użyciu ustawień z pliku DAO.php. * Sprawdź instalację PHP — utwórz plik z instrukcją "" i czy możesz otworzyć go w przeglądarce. * Upewnij się, że używasz PHP5 (lub nowszej wersji). * Sprawdź, czy możesz uruchomić pliki testowe o rozszerzeniach .php i .phtml. * Sprawdź, czy pliki index.phtml są rozpoznawane jako pliki indeksu katalogów. Można to zrobić, wpisując adres path/index.phtml zamiast samego path/. * Sprawdź, czy określiłeś bibliotekę w pliku .htaccess. * Sprawdź, czy wywołania zdalne działają zgodnie z oczekiwaniami. Użyj do tego narzędzia do analizy przepływu danych. Lista takich narzędzi znajduje się we wzorcu ??Analiza przepływu danych. * Sprawdź zawartość plików dziennika. W zależności od konfiguracji dziennik PHP może być inny niż dziennik Apache. * Jeśli problem nadal występuje, skontaktuj się z autorem — [email protected]. PROGRAMY WYMAGAJĄCE DODATKOWEJ INSTALACJI ========================================= Poniższe programy demonstracyjne nie będą działały bez dodatkowych instalacji. * Jak już wspominałem, wszystkie programy Wiki (/wiki/...), ale tylko one, wymagają bazy danyc MySQL. * Wszystkie programy Portla (/portal/...) i Reader (/reader/...) wymagają dostępu do internetu. W przypadku programu Portal Synclinks (/run/portal/drilldown/syncLinks/) trzeba także najpierw uruchomić plik prepareDrilldown.php. * Jeśli chcesz przejść przez cały proces leniwej rejestracji w programie Shop, będziesz potrzebował jakiegoś formularza. * Aby wyświetlić wskaźnik postępu w programie Ajaxagram z samouczka (/tutorial/ajaxagram/...), trzeba albo uruchomić program, mając dostęp do internetu, albo zmienić źródło rysunku w pliku index.html na "/resources/progress.gif".

630

|

Dodatek B Instalowanie przykładowego kodu

DODATEK C

Wzorce i języki wzorców

Jedną z korzyści płynących z niniejszego projektu było sprawdzenie, jak „wzorce” zostaną zaakceptowane przez społeczność programistów. Od kiedy zacząłem publikować wzorce Ajax, zawsze kładłem nacisk na „Ajaksa”, a nie na „wzorce”. Jest to dobre dla wzorców, a także stanowi korzystną zmianę w porównaniu z sytuacją z końca lat dziewięćdziesiątych, kiedy to nie tylko trzeba było wyjaśnić zagadnienie, ale także usprawiedliwić sam fakt istnienia wzorca. Sam „Ajax” to wzorzec i to taki, którego popularność jest następnym dowodem na znaczenie „samego nadania nazwy”. Z tych przyczyn niniejsza analiza dotycząca wzorców i ich związków ze wzorcami Ajax będzie krótka. Wzorce pojawiły się pod koniec lat siedemdziesiątych, kiedy to Christopher Alexander i jego współpracownicy poświęcili wiele lat na analizę miast i budynków w wielu różnych kulturach. Ich odkrycia znalazły podsumowanie w 253 odmiennych wzorcach. Są to wzorce od globalnych, opisujących narody według wzorców rozplanowania miasta, przez takie jak „Rynek z wieloma sklepami”, aż po wzorce budowlane, na przykład „Miękka strzecha i cegła”. Każdy wzorzec to „coś”, co często można wyróżnić w dobrych projektach, połączone z instrukcjami robienia tego „czegoś”. Zastosowanie wzorców zazwyczaj ograniczało się do rozważań akademickich, jednak w zakresie projektowania oprogramowania wzorce zyskały sporą popularność. Ich rozwój w ostatnim dziesięcioleciu okazał się prawdziwym dobrodziejstwem dla przemysłu informatycznego i umożliwił naukę projektowania na podstawie praktycznych przykładów, w nie jedynie ogólnych informacji o spójności, rozdzielaniu czy hermetyzacji. Sam zbiór praktycznych przykładów rośnie w postępie wykładniczym dzięki internetowi i ruchowi open source. Najbardziej znane wzorce to wzorce projektowania oprogramowania, takie jak te przedstawione przez Gammę i innych w książce Design Patterns (1995). Jednak to nie jedyna dziedzina stosowania wzorców programistycznych, które można stosować także do procesów tworzenia oprogramowania, praktyk związanych z instalacją i — co najważniejsze w tym przypadku — użyteczności. Podobnie jak oryginalne wzorce architektoniczne dotyczyły głównie zwiększenia komfortu życia mieszkańców, tak wzorce użyteczności koncentrują się na osobach, które używają systemów programistycznych, a nie na ich twórcach. Te wzorce są szczególnie popularne w dziedzinie projektowania witryn internetowych (na przykład The Design of Sites, Duyne i inni, 2003, A Pattern Language for Web Usability, Graham, 2003 czy „Web Design Patterns” autorstwa Martijna van Welie na stronie http://www.welie.com/patterns/). Internet doskonale nadaje się do tworzenia wzorców projektowych, ponieważ przykłady są łatwo dostępne, dzięki czemu autorzy mogą je wyszukiwać, a czytelnicy — wypróbować. 631

Wzorce Ajax kontynuują tradycję wzorców użyteczności, choć dotyczą w równej mierze technicznych aspektów projektu, jak użyteczności. Jak pokazuje to dzieło Alexandra i innych, całkiem możliwe (a nawet pożądane) jest, aby jeden język obejmował kilka poziomów abstrakcji. Trzy pierwsze części dzieła Alexandra przechodzą od niskopoziomowych operacji przez wysokopoziomową funkcjonalność do zagadnień związanych z użytecznością. Czwarta część jest nieco odrębna, ponieważ dotyczy praktyk związanych z zagadnieniami przedstawionymi w poprzednich rozdziałach, przypominając pod tym względem języki wzorców dotyczące procesów. Można zadać sobie pytanie: czy są to wzorce? Według większości definicji tak, są to wzorce. Każdy wzorzec Ajax pokazuje, jak powtarzający się problem został rozwiązany w rzeczywistym projekcie. W niektórych przypadkach rozwiązanie obejmuje pewne spekulacje, jednak jeśli zostanie podkreślony brak dotychczasowych przykładów zastosowania i pomysł jest przydatny, uważam, że warto go udokumentować jako wzorzec. Kolejne pytanie może brzmieć: czy książka przedstawia język wzorców, czy tylko ich kolekcję? Uważam, że język, ponieważ wzorce są powiązane ze sobą, dobrane ze względu na spójny zestaw zasad, a także produktywne pod tym względem, że bazują na sobie. W każdym razie najważniejsze pytanie nie dotyczy definicji, ale użyteczności: jak użyteczne są te wzorce? Oczywiście mam nadzieję, że są przydatne i praktyczne, jednak ocenę pozostawiam Wam.

632

|

Dodatek C Wzorce i języki wzorców

DODATEK D

Literatura cytowana

W książce pojawiają się odniesienia do poniższych pozycji: • Buschemann F., Meunier R., Rohnert H., Sommerlad P., Stal M., Pattern-Oriented Software

Architecture, John Wiley & Sons, 1996. Zobacz opis na stronie http://c2.com/cgi/wiki?PatternOrientedSoftwareArchitectureOne. 1

• Cooper A., The Inmates are Running the Asylum , Sams, 1999. Zobacz opis na stronie

http://www.uidesign.net/1999/books/oct_books1.html. • Duyne D.K., Landay J.A., Hong J.I., The Design of Sites, Addison-Wesley Professional,

2002. Zobacz opis na stronie http://www.designofsites.com/. 2

• Gamma E., Helm R., Johnson R., Vlissides J., Design Patterns , Addison-Wesley Professional,

1995. Zobacz opis na stronie http://c2.com/cgi/wiki?DesignPatternsBook. • Graham I., A Pattern Language for Web Usability, Pearson Education, 2003. Zobacz opis na

stronie http://www.wupatterns.com/. • Norman D., Emotional Design: Why We Love (Or Hate) Everyday Things, Basic Books, 2003.

Zobacz opis na stronie http://www.jnd.org/dn.mss/emotional_desig.html.

1

Wydanie polskie: Wariaci rządzą domem wariatów, WNT, 2001 — przyp. tłum.

2

Wydanie polskie: Wzorce projektowe, WNT, 2005 — przyp. tłum.

633

634 |

Dodatek D Literatura cytowana

Skorowidz

$(), 11, 37, 40 .NET, 611 @END@, 132 , 45 , 123 , 138, 140 , 272 37signals, 16, 468, 472

A A9, 15, 249, 492 A9 Maps, 412 abort(), 108, 114 absolute, 94 accordion, 364 ACE, 228, 230, 231, 602 ActionListener, 299 actionPerformed, 299 ActiveMQ, 256 Adapter, 263 adapter serwletów ActiveMQ, 256 addEvent(), 150 addListener(), 254 adres URL, 182, 183, 539 AES, 518 affordances, 59 agile development, 344 agregacja, 370 agregowanie danych RSS, 155 Ajaksagram, 42 cykl życia żądania, 46 kod HTML, 45 kod JavaScript, 45 logika aplikacji, 45 logika biznesowa, 43 sekundowe podświetlanie, 49

style CSS, 48 submitWord(), 46 technologia Ajax, 42 updateAnagramDisplay(), 46 usługa sieciowa, 43 warstwa prezentacji, 45 wskaźnik postępu, 48 wyszukiwanie na żywo, 47 AJASON, 623 Ajax, 7, 15, 17, 42 aplikacje, 22 obsługa zdarzeń, 28 sekwencja uruchamiania aplikacji, 27 technologie, 23, 26 Ajax Client Engine, 231, 602 Ajax Deluxe, 75 AJAX Java Server Faces Framework, 617 AJAX JSP Tag Library, 616 Ajax Lite, 75 Ajax Login, 513 Ajax Pages, 286, 287 Ajax RIA, 599 Ajax Spell Checker, 91 Ajax.NET, 223, 611 AjaxAC, 623 ajaxagram.js, 43, 45 AjaxAnywhere, 616 AjaxAspects, 612 ajaxCaller, 51, 118, 135, 231, 303, 601 AjaxCFC, 610 AjaxFace, 592 AjaxGear, 602 AJAX-JSF, 617 Ajax-S, 90, 280 AjaxTags, 298 AJFORM, 602 Aleksander Program, 67 Aleksandra Program, 67 alfa, 415

635

algorytm podwójne szyfrowanie, 511 przesyłanie danych z bufora, 242 szyfrowanie, 512, 518 altKey, 154 AMASS, 338 Amazon, 383 Amazon Mini Shop, 169, 171 Amazon Zuggest, 208, 358 Amazon.com, 502 AMFPHPKit, 605 anagram.php, 43 anagram.phtml, 43 anagramy, 42 analiza danych, 369 anchor, 440 animacje, 88 Animator, 481, 482 animowane sprajty, 415 animowany obraz GIF, 48 Anthem.NET, 611 antropomorfizacja, 486 Anyterm, 116 API Delicious/Yahoo!, 143 API Technorati, 103 API witryny Flickr, 196 aplety Java, 79 aplikacje biurowe, 20 dla urządzeń przenośnych, 81 Flash, 78 jednostronicowe, 172 sieciowe, 8, 17, 23, 77 stacjonarne, 23, 30, 80 Wiki, 97 Aplikacja Ajax, 73 alternatywy, 77 czynniki, 74 decyzje, 75 historia zadania, 73 problem, 74 rozwiązanie, 74 wymagania przeglądarki, 76 wzorce powiązane, 81 aplikacje Ajax, 7, 15, 17, 22 projektowanie, 58 appendChild(), 86 applicationContext, 130 ApplicationInstance, 298 architektura REST, 177, 178 RPC, 195 strony, 409

636

|

Skorowidz

archiwum CPAN, 338 arkusze stylów, 26, 121 arkusze XSLT, 278 ArticleRepository, 193 ASP.NET, 611 Assistive Search, 245, 393, 398 asXMLTag(), 367 asynchroniczna obsługa zdarzeń, 256 asynchroniczne wywołania, 107, 109 asynchroniczność, 60 atak przez powtórzenie, 511 Atlas, 32, 612 atrybuty zdarzenia, 153 audycje podcast, 170, 473

B B2B, 15 Backbase, 116, 288, 296, 297, 364, 412, 445, 487, 592 background-color, 469 backgroundColor, 91 backgroundImage, 415, 478 backgroundPosition, 419 Backpack, 155, 162, 185, 472 Betfair, 363, 404, 450 bezpieczeństwo, 337, 338, 516 bezpieczne przechowywanie danych, 516 bezpośrednia zmiana układu elementów na stronie, 410 Bezpośrednie logowanie, 509 Ajax Login, 513 algorytm szyfrowania, 512 czynniki, 510 decyzje, 512 historia, 509 NetVibes, 513 podwójne szyfrowanie, 511 problem, 510 problem odświeżania strony, 510 Protopage, 513 przykładowy kod, 513 przykłady, 513 rozwiązanie, 510 Treehouse, 513 uwierzytelnianie, 510 wzorce powiązane, 515 XMLHttpRequest, 511 zarządzanie jednorazowym ziarnem, 512 ziarno, 512 bezwarunkowy limit czasu, 528 biblioteki, 51 ACE, 228, 230, 231 AJAX JSP Tag Library, 616 ajaxCaller, 51, 231, 303

AjaxTags, 298 bind, 547 Blowfish, 518 Comfort.ASP, 298 CPaint, 267 Dojo, 256 DOM-Drag, 413 FAT, 473 FCKEditor, 376 Giant-Ass Image Viewer, 462 HTMLHttpRequest, 126, 305 IWF, 275 JSON, 220 JSON-PHP, 221 JSTL, 285 libXmlRequest, 231, 311 LivePage, 257 log4j, 558 MiniXML, 268 Really Simple History, 547 RSLite, 121 Sack, 406 Sarissa, 282 Scriptaculous, 473, 475, 481, 487, 580, 587 Tabtastic, 439 XMLHttpRequest, 305 zumiPage, 615 bind, 547 Bindows, 593 Bitkraft, 613 blog Dunstana Orcharda, 462 Blogger, 188 bloki zawartości o niezależnym stanie komunikacji, 443 Blokowanie przesyłania, 52, 239 Assistive Search, 245 czynniki, 240 decyzje, 241 długość okresu blokowania, 243 Gmail, 244 Google Suggest, 243 historia, 239 liczba buforów, 243 metafora, 245 obsługa nadchodzących poleceń, 241 powiązane wzorce, 245 problem, 239 Prototype, 245 przykłady, 243 rozwiązanie, 240 wyzwalanie opróżniania bufora, 242 Zuggest, 244

Blowfish, 518, 519 Blummy, 501 błędy, 557 bogata grafika, 414 bogata zawartość, 374 bogate aplikacje sieciowe, 23 Bogaty edytor tekstu, 347, 374 czynniki, 374 FCKEditor, 376, 378 historia, 374 Jotspot, 376 metafora, 379 narzędzia, 375 problem, 374 przykładowy kod, 378 przykłady, 376 Rich Text Editor, 377 rozwiązanie, 375 skróty klawiaturowe, 375 Wikipedia, 377 właściwości, 375 Writely, 376 wzorce powiązane, 379 bottom, 94, 415 brak zgodności między przeglądarkami, 301 budowa wzorca, 66 bufor danych, 240 pierwszego rodzaju, 240 poleceń, 240 przeglądarki, 240 button, 154, 440 BXML, 288, 296, 297 byty zależne od czasu, 459

C C++, 610 Caesar, 518 Cajax, 624 callServer(), 233 Captcha, 102 cechy aplikacji Ajax, 57 CGI, 26 CGI::Ajax, 622 chat.app, 473 childNodes[], 85 ciasteczka, 121, 499, 500, 516 ciągłe aktualizacje strony, 453 CL-Ajax, 202, 622 class, 88 className, 88, 89, 491 clearTimeout(), 160

Skorowidz

|

637

clientX, 154 clientY, 154 cloneNode(), 273 Cold Fusion, 610 color, 438, 469 Comet, 31, 99 Comfort.ASP, 298 ComfortASP.NET, 613 contentEditable, 375 Content-Type, 111 Couloir, 473 CPaint, 267 CPAINT, 201, 608 CPAN, 338 CrackAJAX, 626 Craigslist, 265 createXMLHttpRequest(), 38 Cross-Platform Asynchronous INterface Toolkit, 608 CRUD, 187 CSS, 11, 26 ctrlKey, 154 cursor, 438 cykl życia żądania, 46 czcionki, 89 częściowe identyfikatory, 540 czytnik RSS, 116

D dane RSS, 445 w zwykłym tekście, 210 XML, 214, 275 definicja DTD, 216 del.icio.us, 539 DELETE, 181, 191 Delicious, 143, 222, 383 Delta Vacations, 371, 391, 392 Deluxe, 75 deselected, 491 DHTML, 11, 27, 340, 416 diagnostyka, 557 Diagnozowanie, 561 historia, 561 JavaScript, 562 JavaScript Script Debugger, 564 Microsoft Script Debugger, 563 narzędzia, 562 problem, 561 rozwiązanie, 562 Venkman, 562 diagnozowanie kodu, 562 diagramy UML, 11

638 |

Skorowidz

Digg Spy, 90, 206, 208, 454, 456, 473 Direct Web Remoting, 617 disabled, 155 display, 93, 519 div, 375, 558 długotrwałe połączenie HTTP, 128 Dobrado, 445 document, 273 Document Type Definitions, 187 document.domain, 270 document.getDocumentById(), 37 document.scrollto(), 437 doDelete(), 191 doGet(), 191 Dojo, 143, 256, 593 DojoToolkit, 587 dokumenty DOM, 84 XHTML, 272 XML, 27, 214, 271 dołączanie dokument XML w czasie wczytywania początkowej strony, 274 skrypty, 517 DOM, 7, 11, 23, 27, 83 DOM Inspector, 565 DOM-Drag, 411, 413 domknięcia, 109 dopasowanie witryny do własnych potrzeb, 496 doPost(), 191 doPut(), 191 dostęp do plików lokalnych, 166 do serwera, 100 do sprzętu, 166 do zewnętrznej treści, 264 nieuprawnione osoby do danych aplikacji, 516 dostosowywanie, 59 strony, 19 Drag.init(), 413 Drag-Drop, 607 Drążenie danych, 361 accordion, 364 alternatywy, 368 Backbase, 364 Betfair, 363 czynniki, 361 decyzje, 363 historia, 361 kategorie nadrzędne, 362 kategorie podrzędne, 362 kod działający po stronie przeglądarki, 366 kod działający po stronie serwera, 367

kontrolka z dynamiczną zawartością, 367 nawigowanie, 362 Portal, 364 problem, 361 przykłady, 363 refaktoryzacja kodu, 364 rozwiązanie, 361 style, 362 typy elementów, 361 wypełnianie pól, 362 wywoływanie serwera przy każdym przejściu użytkownika po hierarchii, 363 wzorce powiązane, 368 DTD, 187 DWR, 201, 617 dwustronny internet, 31 dynamiczne operacje, 40 działania dynamiczne, 147 działania użytkownika, 149 Działania użytkownika, 147 alternatywy, 157 atrybuty zdarzenia, 153 Backpack, 155 czynniki, 148 decyzje, 151 Google Maps, 155 Google Reader, 155 historia, 147 metody obsługi zdarzeń, 148 obsługa zdarzeń, 149 powiązane wzorce, 157 problem, 148 przykłady, 155 rozwiązanie, 148 Time, 156 wybór zdarzeń, 151 Wzbogacone formularze, 157 dźwięki, 166

E EBA, 594 eBusiness Applications, 594 Echo2, 296, 298, 617 ECMAScript, 60 edytor tekstu, 375 efekty estetyczne, 486 graficzne, 25, 467 JavaScript, 605 MoveBy, 488 powiększanie, 481

ruch, 485 ukrywanie obiektów, 479 wyróżnienie, 471 elastyczne programowanie, 344 elementy IFrame, 378 kontenerowe, 93 encodetext(), 519 Engine for Web Applications, 594 ev, 41 eval(), 139, 141, 145 event, 153 Excite, 18 expire(), 158, 159 extractIFrameBocy(), 123

F Fade Anything Technique, 473, 605 fade(), 50 fantomowe kliknięcia, 125 Fasada, 263 FAT, 473, 605 FCKEditor, 376, 378 fetchRecentlyActive(), 536 Fiddler, 571 filtrowanie, 369 findItems(), 367 Finite Cache Sum, 69 fixed, 94 FlangeLib, 571 Flash, 31, 78, 167, 168, 338, 605 Flash JavaScript Integration Kit, 606 Flickr, 15, 16, 75, 196, 424, 431 flush(), 130 format JSON, 220 rysunki, 416 XML, 112, 214, 275 formowanie, 478 formularze, 45 logowania, 138 XForms, 32 Formularze na żywo, 402 Betfair, 404 czynniki, 403 historia, 402 komentarze MoveableType, 404 problem, 402 przykładowy kod, 405 przykłady, 404 rozwiązanie, 403 WPLicense, 404, 405 wzorce powiązane, 407

Skorowidz

| 639

fragment identifiers, 540 fragmentacja, 29 Framework for RESTful JavaScript, 595 Freja, 595 funkcjonalność, 53, 495 fvLogger, 560

G generowanie kodu, 293 fragmenty kodu HTML po stronie serwera, 204 HTML, 277 Generowanie kodu po stronie serwera, 205, 293 AjaxTags, 298 alternatywy, 300 Backbase, 297 Comfort.ASP, 298 czynniki, 294 Echo2, 296, 298 historia, 294 minimalistyczne interfejsy, 295 problem, 294 przykłady, 296 rozwiązanie, 294 Ruby on Rails, 297 wzorce powiązane, 300 gesty, 486 GET, 181 getAllResponseHeaders(), 114 getDocumentById(), 37 getElementById(), 11, 86 getElementsByTagName(), 85 getPlainText(), 118 getResponseHeader(), 114 getXML(), 118 GhostTrain, 586, 587 Giant-Ass Image Viewer, 462, 607 GIF, 416 Globalne obiekty XMLHttpRequest, 232 Gmail, 125, 244, 340, 439, 492 Google AJAXSLT, 606 Google Maps, 15, 78, 125, 155, 218, 265, 280, 318, 352, 417 Google Reader, 155 Google Suggest, 33, 161, 243, 383 Google Suggest for Firefox, 170 graficzna reprezentacja danych, 414 grafika, 31, 166 GridViewPort, 462 grupowanie, 370 GSV, 607 GUI, 23 Guise, 618

640 |

Skorowidz

H haker, 516 handleScroll(), 463 hasFocus, 434 HashCash, 103 hasła, 506, 518 HeartBeat, 535 height, 478 hex_md5(), 514 historia, 544 historie we wzorcach, 67 Housing Maps, 212, 265 HoverSearch, 425 href, 38, 539 HTML, 11, 26 HTML::Mason, 284 HTML::Prototype, 623 HTMLHttpRequest, 126, 305, 603 HTS Web Application Framework, 624 HTTP, 26, 100, 101, 181, 264 httpLogger(), 104 HTTPUnit, 582, 587 Hushmail, 518

I ICEfaces, 618 id, 86 IDE, 33 identyfikatory URI, 182 IE, 11 IEDocMon, 567 If-Modified-Since, 115 IFrame, 99, 119, 123, 378, 549 IFrame-URL, 543, 547, 549, 550 ilustracja refaktoryzacji, 68 imitacja, 575 importNode(), 273 importowanie dokumentów XML, 121 index.html, 43, 45 index.phtml, 42 informacje pomocnicze, 448 informowanie o zmianie pozycji elementu, 484 initializeStateFromURL(), 541, 542 innerHTML, 38, 40, 87, 205, 273 insertBefore(), 86 instalacja przykładowego kodu, 629 Interactive Website Framework, 215, 600 interakcja, 22, 25, 59 interakcja z systemem operacyjnym, 167

interfejs wiersz poleceń, 395 WYSIWYG, 375 WYSIWYN, 375 International Herald Tribune, 319 internet, 15 IWF, 215, 275

J J2EE, 201 Jakarta HTTPClient, 583 Jan Zwyczajny, 67 Java, 79, 168, 616 Java Web Start, 79 JavaScript, 8, 23, 26, 32, 40, 59, 60, 337, 605 obsługa cyklu życia żądania, 46 platformy, 592 JavaScript Archive Network, 144 JavaScript Browser & OS Detection, 304 JavaScript Browser Sniffer, 304 JavaScript na żądanie, 52, 53, 121, 137, 269 API Delicious/Yahoo!, 143 asynchroniczność, 139 czynniki, 138 decyzje, 141 Dojo, 143 eval(), 141, 145 historia, 138 JSAN, 144 MapBuilder, 142 pobieranie pliku upload.js, 144 podział modułów w leniwym wczytywaniu, 141 problem, 138 przykłady, 142 rozwiązanie, 138 script, 141, 145 Wiki, 144 wzorce powiązane, 146 JavaScript Object Notation, 220, 608 JavaScript Remote Scripting, 608 JavaScript Script Debugger, 564 JavaScript Templates, 288 Jawne przesyłanie, 246 A9, 249 alternatywy, 251 czynniki, 246 decyzje, 247 historia, 246 metafora, 251 obsługa częstego przesyłania danych, 248 powiązane wzorce, 251 problem, 246

przykłady, 248 refaktoryzacja kodu, 249 rozwiązanie, 246 serwer Lace, 248 Sum, 249 The Fonz, 248 zażądanie przesłania danych przez użytkownika, 247 Jednosekundowa zmiana, 477 alternatywy, 483 backgroundImage, 478 czynniki, 477 decyzje, 479 efekt ukrywania obiektów, 479 formowanie, 478 height, 478 historia, 477 kurczenie, 479 Lemingi, 481 metafora, 483 metamorfoza, 479 okrywanie, 479 overflow, 478 position, 478 powiększanie, 479, 481 problem, 477 przejścia między stanami, 479 przykładowy kod, 481 przykłady, 479 rozwiązanie, 478 Scriptaculous, 481 style CSS, 478 TiddlyWiki, 479, 481 usuwanie, 479 width, 478 wybuch, 479 wysuwanie na stronę, 478 wysuwanie poza stronę, 479 wzorce powiązane, 483 zakrywanie, 479 Jednosekundowe podświetlanie, 49 Jednosekundowe wyróżnienie, 467 37signals, 472 alternatywy, 476 chat.app, 473 color, 469 Couloir, 473 czas ma trwania, 471 czynniki, 468 decyzje, 471 Digg Spy, 473 FAT, 473 historia, 468

Skorowidz

|

641

Jednosekundowe wyróżnienie kolory, 471 materializowanie, 469 metafora, 476 nagłe zmiany, 470 Odeo, 473 opacity, 469, 470 problem, 468 przełączanie stanu, 470 przyciemnianie, 469 przykłady, 472 refaktoryzacja kodu, 474 rozbłyśnięcie, 469 rozwiązanie, 468 samodzielnie utworzony efekt przejścia, 474 Scriptaculous, 473, 475 sekwencyjne częściowe przejścia, 470 sekwencyjne pełne przejścia, 470 style CSS, 469 Time Spotlight, 474 visibility, 469 wzorce powiązane, 476 zanikanie, 469 zdarzenia, 471 Jednosekundowy ruch, 484 alternatywy, 489 Backbase, 487 czynniki, 484 decyzje, 485 efekty estetyczne, 486 gesty, 486 historia, 484 Lemingi, 487 metafora, 490 MS-Windows, 487 problem, 484 przyciąganie uwagi, 486 przykładowy kod, 487 przykłady, 487 rozwiązanie, 485 Scriptaculous, 487 TiddlyWiki, 487 wzorce powiązane, 489 zastosowania, 486 zdarzenia, 485 jednostronicowe aplikacje i środowiska programistyczne, 172 język .NET, 611 C++, 610 DHTML, 340 Java, 79, 616 JavaScript, 23, 32, 59, 337

642 |

Skorowidz

Lisp, 622 Perl, 338, 622 PHP, 623 Python, 626 Ruby, 297, 627 VML, 31 XBL, 273, 274 XHTML, 27 Joasia Kontaktowa, 67 Jotspot, 376 JotSpot Live, 134, 471 JPEG, 416 JPSpan, 200, 624 JS/UIX, 341 JSAN, 144, 337 JSCalc, 423, 425 JSMX, 603, 611 JSON, 7, 203, 220, 224, 608 parse(), 221 stringify(), 221 JSONP, 139 JSON-PHP, 221 JSON-RPC, 203, 608 JSON-RPC-Java, 618 JSP, 284, 285 JSP Controls Tag Library, 619 JSRS, 608 JST, 288 JSTL, 285 JsUnit (Hieatt), 579 JsUnit (Schaible), 579 JUnit, 578 jWic, 619

K kalendarz w witrynie Monket, 431 kata, 54 Kayak, 331, 359, 383, 384, 501 keyCode, 154 keydown, 459 Kiko, 75, 96, 196, 221, 223 klawiatura, 152 klawisze, 152 klient stacjonarny, 343 kliknięcie przycisku myszy, 152 kliknij i czekaj, 157 kod HTML, 45 JavaScript, 45 klawisz, 154 kolekcja nakładek, 229

kolor, 49, 84, 89 tło, 91, 469 komentarze MoveableType, 404 Komponenty działające w różnych przeglądarkach, 300 czynniki, 301 decyzje, 303 historia, 300 HTMLHttpRequest, 305 kryteria specyficzne dla przeglądarek, 303 metafora, 306 opacity, 302 problem, 301 przykłady, 305 rozwiązanie, 302 właściwości nieobsługiwane przez przeglądarkę, 304 wykrywanie wersji przeglądarek, 304 wzorce powiązane, 306 XMLHttpRequest, 302, 305 zależność od wersji, 303 zależność od właściwości, 303 komunikacja, 166 przeglądarka-serwer, 227 komunikaty o działaniach, 140 POST, 115 Komunikaty HTML, 140, 204 alternatywy, 209 Amazon Zuggest, 208 czynniki, 204 decyzje, 206 Digg Spy, 206, 208 historia, 204 metafora, 209 poziom złożoności kodu HTML, 206 problem, 204 przykłady, 206 Rapha, 207 rozwiązanie, 204 starszy kod, 205 style, 206 TalkDigger, 208 wydajność, 205 wzorce powiązane, 209 Komunikaty JSON, 209, 219 Ajax.Net, 223 alternatywy, 224 czynniki, 220 Delicious, 222 historia, 219 Kiko, 221, 223 parse(), 221

problem, 220 przekształcanie łańcuchów znaków na obiekty, 221 przykłady, 221 Route Planning, 222 rozwiązanie, 220 stringify(), 221 wzorce powiązane, 225 Komunikaty w postaci łańcuchów znaków, 255 Komunikaty XML, 192, 198, 209, 213, 224 alternatywy, 219 czynniki, 214 decyzje, 216 definicja DTD, 216 dokumenty XML, 214 Google Maps, 218 historia, 213 problem, 213 Protopage, 217 przekształcanie dokumentów XML, 216 przykłady, 216 rozwiązanie, 214 sposób generowania kodu XML, 216 szablon XML, 216 Top 100 Netflix, 216 XML Sum, 218 Komunikaty ze zwykłym tekstem, 198, 209 alternatywy, 213 czynniki, 210 dane w zwykłym tekście, 210 historia, 210 Housing Maps, 212 klienty zewnętrzne, 211 kod odpowiedzi, 210 Lace, 211 lista, 210 Magnetic Poetry, 211 niestandardowy format danych, 210 problem, 210 proste komunikaty, 211 prosty łańcuch znaków, 210 przykłady, 211 rozwiązanie, 210 kontrola pamięć podręczna, 115 równoległe Wywołania XMLHttpRequest, 228 kontroler przeglądarki, 585 kontrolki, 25, 347 accordion, 364 Ajax, 25 bogaty edytor tekstu, 347, 374 drążenie danych, 361 formularze na żywo, 402

Skorowidz

| 643

kontrolki HTML, 25, 347 IFrame, 123 Midas, 375 podpowiedzi, 347, 380 przyjmujące dane, 349 sandbox, 40 suwaki, 347, 348 tabele danych, 347, 368 wiersz poleceń na żywo, 394 wskaźnik postępu, 354 wyszukiwanie na żywo, 387 Kontrolki do aktualizacji, 452 częstotliwość aktualizacji, 453 czynniki, 453 Digg Spy, 454, 456 historia, 452 kryteria aktualizacji, 453 metafora, 457 problem, 453 przewijanie do przodu, 454 przewijanie do tyłu, 454 przykładowy kod, 456 przykłady, 454 rozwiązanie, 453 Slide, 455 togglePause(), 456 WBIR, 455 wzorce powiązane, 456 koszyk, 190, 504 kradzież przepustowości, 270 kreator wizytówek autorstwa Thomasa Baekdala, 433 krótkie operacje, 421 Krystyna Pieniążek, 67 Kupu, 280 kurczenie, 479 Kuro5hin, 125, 126

L Lace, 236, 248, 526 Lace Chat, 117 left, 94, 415 Lemingi, 340, 416, 417, 481, 487 Lemming, 418 Leniwa rejestracja, 496 Amazon.com, 502 bazy danych, 499 Blummy, 501 ciasteczka, 500 czynniki, 497 decyzje, 499

644 |

Skorowidz

historia, 496 Kayak, 501 manipulowanie ciasteczkami, 499 MemeFlow, 501 metafora, 509 Palmsphere, 502 problem, 496 profil użytkownika, 497 przykładowy kod, 503 przykłady, 501 rodzaj zbieranych danych, 499 rozwiązanie, 497 Shop, 503 sposoby zbierania informacji, 500 śledzenie sesji, 499 technologie, 499 usuwanie danych, 500 wzorce powiązane, 508 XMLHttpRequest, 499 leniwe wczytywanie, 139, 141 wczytywanie kodu JavaScript, 142 Leszek Ziomal, 67 LFU, 310 libXmlRequest, 231, 311, 603 licznik iTunes, 162, 324, 326 licznik zamożności Billa Gatesa, 266 Lightstreamer, 135 limit czasu, 110 Limit czasu, 521 bezwarunkowy limit, 528 dane historyczne, 524 decyzje, 525 długość limitu, 525 historia, 522 interfejs użytkownika, 526 limit czasu, 522 metafora, 531 monitorowanie ruchów myszą, 529 ostrzeżenie o możliwości przekroczenia limitu, 528 Pandora, 526 Periodic Refresh, 527 pesymistyczne blokowanie, 525 planowanie zadań, 525 problem, 522 program ostrzegający o wygaśnięciu sesji, 526 przekroczenie limitu, 524 przykłady, 526 refaktoryzacja kodu, 527 rozwiązanie, 522 serwer Lace, 526 system operacyjny, 527 śledzenie obecności wielu użytkowników, 524

Timeout Wiki, 528 wykrywanie przekroczenia limitu, 523 wzorce powiązane, 530 Lisp, 622 lista parametrów, 255 ListSomething.com, 392 listy, 458 listy kombinowane, 381 Lite, 75 LivePage, 134, 257 log4j, 558 log4js, 559, 560 logika aplikacji, 45, 337 logika biznesowa, 42, 43, 337 logowanie, 510 LRU, 310 Lumberjack, 560

M Magda Spóźniona, 67 MagicAjax.NET, 614 Magnetic Poetry, 211, 235, 322, 412, 413 MAJAX, 604 makePositioned(), 488 manipulowanie ciasteczka, 499 model DOM, 87 tekst, 87 wygląd, 36, 83 map.search.ch, 318, 461 MapBuilder, 142, 256 Marianna Superkiecka, 67 materializowanie, 469 max_execution_time, 130 MD5, 512 mechanizm indeksowania silników wyszukiwarek, 544 mediujące usługi sieciowe, 263 MemeFlow, 501 memoisation, 308 messagesDiv, 259 Meta HTTP Refresh, 163 metamorfoza, 479 metawyszukiwarka, 208 Metoda kija i marchewki, 498 metody obsługi zdarzeń, 148 Microsoft Script Debugger, 563 Midas, 375 Mikroodnośniki, 20, 436 anchor, 440 czynniki, 436 decyzje, 438

Gmail, 439 historia, 436 problem, 436 przykładowy kod, 440 przykłady, 438 rozwiązanie, 437 Rpad, 439 sposoby wyświetlania, 438 strategia postępowania z pozostałą zawartością, 438 Tabtastic, 439 TiddlyWiki, 438, 440 wzorce powiązane, 441 zastosowanie, 437 MiniXML, 268 Mint, 117 Mochikit, 560, 595 mock, 575 model DOM, 27, 36, 62, 83 atrybuty, 85 dodawanie elementów, 93 przesuwanie elementów, 94 struktura, 85 usuwanie elementu, 93 węzły, 87 model zdarzeń, 27 modyfikacja przeglądarki, 166 modyfikatory klawiszy, 154 monitorowanie ruchów myszą, 529 MonoRail, 614 Moo.fx, 605 mousedown, 459 mousemove, 459 Mouseover DOM Inspector, 567 mouseup, 459 MoveableType, 404 MoveBy, 489 mozaika, 419 MS-Windows, 487 MVC, 595 mysz, 152

N NAJAX, 626 nakładające się mapy w witrynie miasta Boston, 352 nakładki, 229 namiastka, 573, 575 navigator, 303 navigator.appName, 304 navigator.appVersion, 304 navigator.UserAgent, 304 nawigowanie po dużym obszarze roboczym, 458

Skorowidz

| 645

Net::HTTP, 582 Netflix, 425 NetVibes, 19, 103, 332, 513 Niepowtarzalne adresy URL, 53, 192, 538 adres URL, 546 alternatywy, 552 bind, 547 częstotliwość sprawdzania adresu, 545 częściowe identyfikatory, 540 czynniki, 539 decyzje, 544 historia, 538, 544 IFrame-URL, 543, 549, 550 implementacja, 543 mechanizm indeksowania silników wyszukiwarek, 544 odnośnik „tutaj”, 552 PairStairs, 546 powrót do aplikacji Ajax, 544 problem, 539 przeglądarki, 542 przycisk Wstecz, 544 przykłady, 546 Really Simple History, 547 refaktoryzacja kodu, 547 roboty, 544 rozwiązanie, 539 sprawdzanie adresów URL, 548 sprawdzanie wartości częściowego identyfikatora, 541 stany aplikacji, 539 Strona-URL, 542, 547 Sum, 547 synchronizacja stanu i adresu URL, 541 zbyt częsta synchronizacja, 545 zmiany w stanie, 545 niepowtarzalność adresu URL, 115 nieskończona pamięć podręczna, 312 niezawodność, 57 nodeType, 86 NumSum, 340, 371 NUnit, 578

O ob_end_flush(), 130 obciążenie łączy, 60 obramowanie, 89 obsługa adresy URL, 544 bogata zawartość, 374 cykl życia żądania, 46 dane XML po stronie serwera, 214

646 |

Skorowidz

działania użytkowników, 148 komunikacja między przeglądarką i serwerem, 106 pamięć podręczna, 309 przekraczanie limitu czasu, 231 wywołania GET, 123 XML, 606 zdalne wywołania języka JavaScript, 601 zdarzenia, 28, 40, 149, 253 żądania POST, 110 Obszar statusu, 448 alternatywy, 452 Betfair, 450 czynniki, 448 decyzje, 449 historia, 448 metafora, 452 problem, 448 przykłady, 450 refaktoryzacja kodu, 450 rozmiar obszaru, 449 rozwiązanie, 448 serwer Lace, 450 Status Wiki, 450 struktura zawartości, 449 wzorce powiązane, 452 zastosowania, 449 ochrona prywatności, 58 oczekiwanie na odpowiedź serwera, 355 oczekiwanie na zdarzenie onblur, 247 Oddpost, 371 oddzielanie warstwy prezentacji od logiki aplikacji, 284 Odeo, 170, 473 odkładanie formalnej rejestracji, 497 odkrywanie, 479 odliczanie czasu, 91 odnośniki, 37, 543 „tutaj”, 552 odpowiedź 204, 121 odświeżanie stron, 119 odtwarzanie muzyki, 166 oferty, 59 ograniczanie liczby wywołań kierowanych na serwer, 321 Okna wyskakujące, 53, 355, 420 alternatywy, 426 czynniki, 421 decyzje, 423 Flickr, 424 historia, 420 HoverSearch, 425 JSCalc, 423, 425

metafora, 426 Netflix, 425 opacity, 422 otwieranie okna, 423 problem, 421 przykładowy kod, 425 przykłady, 423 rodzaje okien, 422 rozwiązanie, 421 style CSS, 422 visibility, 422 wygląd okna, 423 wzorce powiązane, 426 zamykanie okna, 423 zIndex, 422 Okresowe odświeżanie, 136, 232 aktywne monitorowanie, 235 alternatywy, 238 czynniki, 233 decyzje, 234 długość okresu między odświeżeniami, 234 historia, 232 interakcja w czasie rzeczywistym, 234 kategorie częstotliwości aktualizacji, 234 Magnetic Poetry, 235 metafora, 239 portal Claude’a Husseneta, 236 problem, 233 przykłady, 235 rozwiązanie, 233 serwer Lace, 235 sporadyczne monitorowanie, 235 Time, 237 wzorce powiązane, 238 określanie struktury danych, 409 onblur, 152, 247 onchange, 153 onclick, 148, 152 ondblclick, 152 onfocus, 152 onkeydown, 151 onkeypress, 151, 425 onkeyup, 151 onload(), 37 onMessageBlur, 493 onmousedown, 152 onmouseout, 152 onmouseover, 41, 152 onmouseup, 152 onreadystatechange, 39, 114 onselect, 153 onTick(), 91 opacity, 302, 415, 422, 469, 470

open(), 39, 114, 135 OpenRico, 364, 370, 372, 596 opóźnienia w dostępie do usługi, 265 opóźnienie, 60, 77 opróżnianie bufora, 242 optymalizacja wydajności, 307 pobieranie stron, 328 ostrzeżenie o możliwości przekroczenia limitu czasu, 528 outerHTML, 87 overflow, 478

P PairStairs, 546 Palmsphere, 502 pamięć lokalna, 32 poczta Gmail, 325 podręczna, 115 Pamięć podręczna po stronie przeglądarki, 53, 173, 307 alternatywy, 314 czynniki, 308 decyzje, 310 dołączanie zapytania do odpowiedzi, 311 format kluczy i wartości, 309 historia, 307 klucze, 310 kontrola rozmiaru pamięci, 310 libXmlRequest, 311 nieaktualne dane, 310 nieskończona pamięć podręczna, 312 ochrona przed nieaktualnymi danymi, 310 problem, 307 przykłady, 311 rozwiązanie, 308 skończona pamięć podręczna, 313 Sum, 311 synchroniczna obsługa pamięci podręcznej, 309 wartości, 310 wzorce powiązane, 314 zapamiętywanie, 308 Pandora, 526 parentNode, 85 parse(), 221 pasek narzędzi Developer, 567 Google, 170 pasek przewijania, 459 pasek statusu przeglądarki, 452 PEAR::HTML::Ajax, 625 PerfectXML, 274

Skorowidz

|

647

Periodic Refresh, 527 Perl, 284, 338, 622 pesymistyczne blokowanie, 525 PHP, 11, 69, 623 PHP HTTPClient, 583 Pipeline, 625 Planowanie, 51, 157 alternatywy, 163 Backpack, 162 czynniki, 158 expire(), 159 Google Suggest, 161 historia, 157 licznik iTunes, 162 metafora, 163 portal Claude'a Husseneta, 160 problem, 158 przykłady, 160 rozwiązanie, 158 setTimeout(), 159 zegary, 158 planowanie zadań, 525 platforma, 591, 592 AJASON, 623 Ajax Client Engine, 602 AJAX Java Server Faces Framework, 617 AJAX JSP Tag Library, 616 Ajax Pages, 287 Ajax.NET, 223, 611 AjaxAC, 623 AjaxAnywhere, 616 AjaxAspects, 612 AjaxCaller, 601 AjaxCFC, 610 AjaxFace, 592 AjaxGear, 602 AJFORM, 602 AMFPHPKit, 605 Anthem.NET, 611 Atlas, 612 Backbase, 288, 592 Bindows, 593 Bitkraft, 613 Cajax, 624 CGI::Ajax, 622 CL-Ajax, 202, 622 ComfortASP.NET, 613 CrackAJAX, 626 Cross-Platform Asynchronous INterface Toolkit, 608 Direct Web Remoting, 617 Dojo, 593 Drag-Drop, 607

648 |

Skorowidz

DWR, 201 eBusiness Applications, 594 Echo2, 617 Engine for Web Applications, 594 Fade Anything Technique, 605 FAT, 605 Flash JavaScript Integration Kit, 606 Framework for RESTful JavaScript, 595 Giant-Ass Image Viewer, 607 Google AJAXSLT, 606 Guise, 618 HTML::Prototype, 623 HTMLHttpRequest, 603 HTS Web Application Framework, 624 ICEfaces, 618 Interactive Website Framework, 600 JavaScript Object Notation, 608 JavaScript Remote Scripting, 608 JavaScript Templates, 288 JPSpan, 624 JSMX, 603, 611 JSON-RPC, 608 JSON-RPC-Java, 618 JSP Controls Tag Library, 619 JsUnit (Hieatt), 579 JsUnit (Schaible), 579 JUnit, 578 jWic, 619 libXmlRequest, 603 MagicAjax.NET, 614 MAJAX, 604 Mochikit, 560, 595 MonoRail, 614 Moo.fx, 605 OpenRico, 364, 596 PEAR::HTML::Ajax, 625 Pipeline, 625 Plex Toolkit, 596 Prototype, 245, 597 Pushlets, 135 qooxdoo, 597 Rialto, 609 RSLite, 604 Ruby on Rails, 297, 627 Sack, 604 SAJAX, 201, 609 Sarissa, 281, 607 Script.aculo.us, 598 Scriptaculous, 579 SmartClient, 598 Stream, 606 Struts-Layout, 619 SWATO, 620

Sybsys_JsHttpRequest, 604 Symfony, 625 Tacos Tapestry Components, 620 ThinkCAP JX, 621 ThyAPI, 599 TIBCO General Interface, 599 Turbo Gears, 627 WebORB for .NET, 614 WebORB for Java, 621 Widget Server, 621 Wt, 610 XAJAX, 625 XHConn, 605 XOAD, 626 Zimbra AjaxTK, 600 ZK, 609 zumiPage, 615 Plex Toolkit, 596 pliki lokalne, 166 PNG, 416 pobieranie arkusze XSLT, 279 lista kategorii, 197 pojedyncze kategorie, 197 zawartość koszyka, 197 Pobieranie na podstawie przewidywania, 53, 315 alternatywy, 320 bieżące działania użytkownika, 317 czynniki, 315 decyzje, 317 działania innych użytkowników, 317 Google Maps, 318 historia, 315 International Herald Tribune, 319 map.search.ch, 318 metafora, 321 prefetch, 318 problem, 315 profil użytkownika, 317 przewidywanie działań, 317 przykłady, 318 refaktoryzacja kodu, 319 rozwiązanie, 316 Sum, 319 wybór informacji do pobrania, 317 wzorce powiązane, 320 złożone filtrowanie, 317 początkowy kod HTML, 45 podcast, 170, 473 podejście serwerocentryczne, 205 Podpowiedzi, 53, 380 algorytm generujący podpowiedzi, 382 alternatywy, 385 Amazon, 383

czynniki, 380 decyzje, 382 Delicious, 383 Google Suggest, 383 historia, 380 informacje pomocnicze, 383 Kayak, 383, 384 liczba podpowiedzi, 383 problem, 380 przykładowy kod, 384 przykłady, 383 rozwiązanie, 381 uporządkowanie podpowiedzi, 382 wzorce powiązane, 386 podwójne szyfrowanie, 511 podział moduły w leniwym wczytywaniu, 141 strona na bloki, 330 pojedynczy obiekt zdarzenia, 255 pollHash(), 548 pollLatestResponse(), 136 połączenia TCP, 136 z zewnętrznym serwerem, 264 poprawa wydajności, 380 portale, 18 Backbase, 364 Claude’a Husseneta, 236, 444, 446 z drążeniem danych, 365 portlety, 19 Portlety, 53, 442 alternatywy, 447 Backbase, 445 czynniki, 442 decyzje, 444 Dobrado, 445 historia, 442 metafora, 447 portal Claude’a Husseneta, 444, 446 problem, 442 przeciąganie, 444 przykładowy kod, 446 przykłady, 444 Quick Links, 446 rozwiązanie, 443 strona główna Google, 445 wzorce powiązane, 447 position, 478 positioning, 94 POST, 110, 181 postęp obsługi wywołania, 355 postForPlainText(), 118 postForXML(), 118

Skorowidz

| 649

pośrednia komunikacja z serwerem, 27 pośredniczące usługi sieciowe, 263 Pośrednik między domenami, 52, 262 alternatywy, 269 CPaint, 267 Craigslist, 265 czynniki, 262 decyzje, 264 dostęp do zewnętrznej treści, 264 Google Maps, 265 historia, 262 Housing Maps, 265 licznik zamożności Billa Gatesa, 266 obsługa błędów, 265 opóźnienia w dostępie do usługi, 265 połączenie z zewnętrznym serwerem, 264 problem, 262 przykłady, 265 rozwiązanie, 263 WPLicense, 265, 267 wzorce powiązane, 270 zasady licencji na używanie zdalnych usług, 265 powiększanie, 479, 481 powłoka JS/UIX, 341 powtórne wykorzystanie kodu, 293 pozycja kursora myszy, 154 pozycjonowanie, 95 prefetch, 318 prezentacja, 45 procedury pośredniczące, 200 Procedury pośredniczące Ajax, 198 alternatywy, 203 CL-Ajax, 202 czynniki, 199 decyzje, 200 DWR, 201 historia, 199 problem, 199 przykłady, 201 refaktoryzacja kodu, 202 rozwiązanie, 199 SAJAX, 201 wzorce powiązane, 203 zabezpieczanie funkcji działających po stronie serwera, 200 proces, 62 proces tworzenia aplikacji sieciowych, 574 procesor XSLT, 278 produkt, 62 produktywność programistów, 57 profil użytkownika, 497

650

|

Skorowidz

program demonstracyjny, 35, 69 diagnostyczny, 562 ostrzegający o wygaśnięciu sesji, 526 stacjonarny w sieci, 20 programowanie, 33 język JavaScript, 337 Progress Indicator, 359 projektowanie, 57, 58 sterowane testami, 574 użyteczność, 58 zasady, 59 projekty, 54 prosty klient, 343 protokół HTTP, 26, 264 JSON, 203 SOAP, 101 Protopage, 217, 358, 513 Prototype, 245, 462, 597 przechowywanie dane po stronie serwera, 516 dane w buforze przeglądarki, 240 dokumenty XML, 271, 272 Przechowywanie bezpieczne ze względu na serwer, 515 algorytm szyfrowania, 518 alternatywy, 520 Blowfish, 519 czynniki, 516 decyzje, 518 dołączenie skryptu, 517 hasła, 518 historia, 516 metafora, 520 platforma, 518 problem, 516 przykładowy kod, 518 przykłady, 518 rozwiązanie, 516 wzbogacone wtyczki, 520 wzorce powiązane, 520 Przeciąganie, 409 A9 Maps, 412 alternatywy, 413 Backbase, 412 czynniki, 410 decyzje, 412 DOM-Drag, 411, 413 historia, 409 implementacja, 411 Magnetic Poetry, 412, 413

ograniczenia możliwości, 412 operowanie na przestrzeni geometrycznej, 411 problem, 410 przykładowy kod, 413 przykłady, 412 rozwiązanie, 410 Scriptaculous, 411 sekwencja operacji, 412 tworzenie kolekcji, 411 wyrażanie operacji, 411 wzDragDrop, 411 wzorce powiązane, 413 zastosowanie, 411 przeciągnij i upuść, 152 przeglądarki, 8, 30, 58, 61, 301 moc obliczeniowa, 76 niedostateczna obsługa technologii Ajaksa, 76 wymagania, 76 przekazywanie dane uwierzytelniające na serwer, 510 kontekst wywołania, 230 przekształcanie dokumenty XML, 216, 278 komunikaty XML na kod XHTML, 278 wyspy danych XML na kod HTML, 273 przełączanie stanu, 470 przenośność, 337 przepustowość łączy, 33, 77 przesłanianie, 94 przesyłanie dane po kliknięciu przycisku, 246 formularze, 26 zawartość koszyka, 505 przetwarzanie atomowe, 230 kod XML, 215 rozproszone, 101 przewijanie do przodu, 454 do tyłu, 454 przezroczystość, 302 przybliżanie obrazu, 459 przyciąganie uwagi, 486 przyciemnianie, 469 przyciski mysz, 154 opcji, 349, 354 Wstecz, 30, 544 przydatne rozwiązanie, 129 przypisywanie odrębnych adresów URL, 539 przystosowanie przeglądarek, 30 pula, 229 Pushlets, 135

PUT, 181, 191 PXL8, 126 Python, 626

Q qooxdoo, 597 Quek, 417 Quick Links, 446

R Rapha, 207 RC4, 518 Reader, 576, 580 readyState, 108, 114, 357 Real, 167 Really Simple History, 547 Realtime on Rails, 134 refaktoryzacja, 37, 52 do biblioteki zewnętrznej, 51 ze względu na wydajność, 50 referencje, 95 rejestracja metoda obsługi zdarzenia po wczytaniu strony, 155 operacje, 558 użytkownicy, 498 zdarzenia, 150 Rejestrowanie, 557 decyzje, 559 div, 558 fvLogger, 560 historia, 558 log4j, 558 log4js, 560 Lumberjack, 560 Mochikit, 560 narzędzia, 560 operacje w wersji produkcyjnej, 559 pasek statusu przeglądarki, 558 przechodzenie od wersji rozwojowej do produkcyjnej, 559 przykładowy kod, 560 rozwiązanie, 558 zmiana ustawień, 559 relative, 94, 95 Remote Procedure Call, 194 removeChild(), 86 removeEvent(), 150 removeListener(), 254 render(), 488

Skorowidz

|

651

renewSession(), 529, 530 Representational State Transfer, 177 requestContentRefresh(), 463 Requester, 228 responseText, 40, 114, 131, 357 responseXML, 113, 114, 214 REST, 177, 178, 179, 187 przenośność, 187 zasady, 180 ResultFetcher, 309 RGB, 49, 91 Rialto, 609 Rich Internet AppLication TOolkit, 609 Rich Text Editor, 377 right, 94, 415 roboty, 544 rodzaj zdarzenia, 153 rok portali, 18 Route Planning, 222 rozbijanie aplikacji na warstwy, 61 rozbłyśnięcie, 469 rozmawiaj i przeglądaj, 417 rozszerzanie funkcjonalność, 47 użyteczność, 47 rozwiązania prowizoryczne, 59 rozwój oprogramowania, 337 równoległe prowadzenie złożonej komunikacji, 442 Rpad, 439 RPC, 177, 187, 193, 195 RSA, 518 RSLite, 121, 604 RSS, 116 Ruby, 297, 627 Ruby on Rails, 297, 627 ruch myszą, 152, 529 rysunek tła, 89, 415 rysunki, 121, 270

S Sack, 406, 604 SAJAX, 195, 201, 609 SAJAX Sum, 202 sandbox, 39, 40 Sarissa, 215, 273, 281, 282, 607 Scoop, 125 scoreData, 273 Script.aculo.us, 598 Scriptaculous, 411, 473, 475, 481, 483, 487, 579, 580, 587, 598 scrollto(), 437 sekundowe podświetlanie, 49

652

|

Skorowidz

sekwencje, 230 sekwencje uruchamiania aplikacji, 27 sekwencyjne częściowe przejścia, 470 sekwencyjne pełne przejścia, 470 selected, 491 selection, 385 selektory, 349, 354, 385 Selenium, 587 send(), 111, 114, 135, 215 serializacja, 214 Serpent, 518 serwer Lace, 116, 211, 235, 236, 248, 450 sesje, 499 setInitialFigures(), 548 setInterval(), 160, 233 setRequestHeader(), 113, 114 setTimeout(), 159 SHA-1, 512 shiftKey, 154 Shop, 503 shutdown(), 148 sieciowy edytor tekstu, 21 sieć archiwów kodu JavaScript, 144 silnik przekazujący, 135 silnik wyszukiwarki, 544 Single Page Application, 172 Singleton, 229 skierowanie uwagi użytkownika na określony fragment strony, 468 skończona pamięć podręczna, 313 skróty klawiaturowe, 152, 167, 375, 459 skryptozakładki, 172 skrypty działające w różnych domenach, 140 wykonywane po stronie serwera, 26 zewnętrzne, 141 Skype, 392 sleep(), 49, 158 Slide, 455 Slider, 481 SmartClient, 598 SOAP, 101, 194, 203 sortowanie, 369 SPA, 172 SPADA, 172 span, 446 sposoby interakcji, 25 sprajty, 300 Sprajty, 414 alternatywy, 419 animacja, 415, 416 backgroundImage, 415 czynniki, 414

decyzje, 416 format rysunków, 416 Google Maps, 415, 417 historia, 414 Lemingi, 416, 417 metafora, 420 opacity, 415 problem, 414 przykładowy kod, 417 przykłady, 416 Quek, 417 rozwiązanie, 415 rysunek tła, 415 właściwości CSS, 415 wzorce powiązane, 420 zIndex, 415 sprawdzanie adres URL, 548 kontekst węzła modelu DOM, 85 stan modelu DOM, 564 Sprawdzanie zawartości modelu DOM, 564 DOM Inspector, 565 Firefox, 565 historia, 564 IE, 567 IEDocMon, 567 Mouseover DOM Inspector, 567 narzędzia, 565 pasek narzędzi Developer, 567 problem, 564 rozwiązanie, 564 View Rendered Source, 566 Web Developer, 565 sprzęt, 33, 166 stacjonarny klient, 172 stan modelu DOM, 564 standardy, 25, 29, 58 start(), 155 startAnimating(), 481 startPeriodicSync(), 162 start-stop, 59 static, 94, 95 status, 114 Status Wiki, 450 statusText, 114 stop(), 155 stopniowa degradacja, 61, 205 stopniowe przewijanie, 460 stopPeriodicSync(), 162 Strategia, 481 Stream, 137, 606 stringify(), 221 strona główna Google, 445

Strona-URL, 542, 547 struktura modelu DOM, 85 strumieniowanie, 31 dane, 128 strony, 128, 129 usługi, 128, 129, 130, 131 Strumieniowanie HTTP, 99, 120, 127 alternatywy, 136 czas otwarcia połączenia, 133 czynniki, 128 decyzje, 133 długotrwałe połączenie HTTP, 128 historia, 127 IFrame, 132 JotSpot Live, 134 kontrola, 129 Lightstreamer, 135 LivePage, 134 metafora, 137 Okresowe odświeżanie, 136 PHP, 130 połączenia TCP, 136 problem, 128 przykłady, 134 Pushlets, 135 Realtime on Rails, 134 refaktoryzacja kodu, 135 rozróżnianie komunikatów, 133 rozwiązanie, 128 strony, 129 usługi, 131 wzorce powiązane, 137 zamykanie połączenia, 133 Struts-Layout, 619 stub, 573, 575 styl czcionki, 89 styl obramowania, 89 style, 93 style CSS, 48, 87, 88 style.backgroundColor, 89 style.backgroundImage, 89 style.borderColor, 89 style.borderStyle, 89 style.borderWidth, 89 style.fontColor, 89 style.fontSize, 89 style.fontStyle, 89 style.fontWeight, 89 style.innerHTML, 89 style.outerHTML, 89 Sum, 202 sumGet.phtml, 123 Super Maryo World, 96

Skorowidz

|

653

Suwaki, 347, 348, 459 alternatywy, 354 bliskość, 350 czynniki, 348 decyzje, 349 Google Maps, 352 historia, 348 kierunek ułożenia, 349 metafora, 354 nakładające się mapy w witrynie miasta Boston, 352 porównywanie, 350 problem, 348 przykładowy kod, 352 przykłady, 350 rozwiązanie, 348 skala, 350 typ danych, 349 układ, 350 WebFX, 352 wyszukiwanie diamentów na witrynie Amazon, 351 wzorce powiązane, 354 Yahoo! Mindset, 350, 352 SVG, 31, 167 SWATO, 620 Swing, 149 Sybsys_JsHttpRequest, 604 Sygnały kontrolne, 531 czynniki, 532 decyzje, 534 HeartBeat, 535 historia, 532 informacje o użytkowniku, 534 metafora, 538 odstęp między sygnałami, 534 problem, 532 przykłady, 535 refaktoryzacja kodu, 535 rozwiązanie, 532 sekwencja sygnałów testowych, 533 wstrzymanie wysyłania sygnałów kontrolnych, 534 wzorce powiązane, 537 Symfony, 625 symulacja, 575 działania przeglądarki, 586 Symulowanie usług, 573 decyzje, 576 historia, 574 problem, 574 przełączanie się między usługami, 576 przykładowy kod, 576

654 |

Skorowidz

Reader, 576 rozwiązanie, 574 wzorce powiązane, 577 synchroniczna obsługa pamięci podręcznej, 309 synchroniczna obsługa zdarzeń, 256 synchronizacja obiektów, 252 system importowania skryptów, 144 szablon XML, 216 Szablony po stronie przeglądarki, 53, 283 Ajax Pages, 287 alternatywy, 291 Backbase, 288 czynniki, 284 decyzje, 286 historia, 283 JavaScript Templates, 288 kontekst szablonu, 286 pętle, 286 pobieranie szablonu, 286 problem, 284 przygotowanie kontekstu szablonu, 286 przykłady, 287 refaktoryzacja kodu, 288 refaktoryzacja pod kątem wyświetlania strony przy użyciu szablonu, 289 refaktoryzacja rozszerzająca kontekst szablonu, 290 rozwiązanie, 284 Templating Drilldown, 288 umieszczanie kodu w szablonach, 286 warunki, 286 wzorce powiązane, 291 szablony XML, 187 szybka reakcja systemu na działania użytkownika, 315 szybkie nawigowanie po zawartości strony, 436 szybkie przesłanie danych, 402 szybkie wyszukiwanie, 388 szybkość łącza, 60 szyfrowanie, 103, 510

Ś śledzenie aktywność aplikacji, 532 obecność wielu użytkowników, 524 przebieg programu, 558 sesja, 110, 499 ulubione kategorie, 506 Śledzenie przepływu danych, 569 Fiddler, 571 FlangeLib, 571 historia, 569

narzędzia, 570 problem, 569 przykładowy kod, 571 rozwiązanie, 569 wzorce powiązane, 572 XMLHttpRequest Debugging, 570 XMLHttpRequest Tracing, 570, 571 Śledzenie wywołań, 52, 124, 227, 228 ACE, 230, 231 ajaxCaller, 231 alternatywy, 232 czynniki, 228 historia, 227 libXmlRequest, 231 metafora, 232 ograniczanie, 229 problem, 228 przekazywanie kontekstu wywołania, 230 przetwarzanie atomowe, 230 przykładowy kod, 231 przykłady, 230 pula, 229 rozwiązanie, 228 sekwencje, 230 wykrywanie przekroczenia limitu czasu, 230 zapisywanie informacji w dzienniku, 230

T Tabele danych, 53, 347, 368 agregacje, 370 czynniki, 369 decyzje, 370 Delta Vacations, 371 filtrowanie, 369 grupowanie, 370 historia, 368 metafora, 373 modyfikowanie, 370 NumSum, 371 Oddpost, 371 OpenRico, 370, 372 problem, 369 przykładowy kod, 372 przykłady, 370 rozwiązanie, 369 sortowanie, 369 tylko do odczytu, 370 wzorce powiązane, 373 table, 446 Tabtastic, 439 Tacos Tapestry Components, 620

TadaList, 95 tagName, 86 TalkDigger, 208, 332, 358 TDD, 574 TEA, 518 Teacher!, 492 teardown(), 579 technika żółtego zanikania, 49, 468 technologie, 26, 35 rozszerzone, 165 TechRepublic, 274 tekst, 84 Templating Drilldown, 288 testAjaxCaller, 104 Test-Driven Design, 574 testowanie, 573 aplikacje Ajax, 584 komponenty JavaScript, 578 system, 53 usługi, 53 usługi sieciowe, 582 testStringMatches(), 579 testy jednostkowe, 580 Testy po stronie przeglądarki, 577 historia, 578 JsUnit (Hieatt), 579 JsUnit (Schaible), 579 JUnit, 578 narzędzia, 579 problem, 578 przykładowy kod, 580 Reader, 580 rozwiązanie, 578 Scriptaculous, 579, 580 testy jednostkowe, 580 wzorce powiązane, 581 Testy systemu, 584 DojoToolkit, 587 GhostTrain, 586, 587 historia, 584 HTTPUnit, 587 kontrolery przeglądarki, 585 narzędzia, 586 problem, 584 przykładowy kod, 587 rozwiązanie, 584 Scriptaculous, 587 Selenium, 587 symulacja działań przeglądarki, 586 Watir, 586 wzorce powiązane, 588 zagnieżdżone skrypty uruchamiane w przeglądarce, 585

Skorowidz

|

655

Testy usług, 581 historia, 582 HTTPUnit, 582 Jakarta HTTPClient, 583 narzędzia, 582 Net::HTTP, 582 PHP HTTPClient, 583 problem, 582 przykładowy kod, 583 rozwiązanie, 582 wzorce powiązane, 583 textarea, 153, 375 textDecoration, 438 The Fonz, 248 The Pick’em, 359 ThinkCAP JX, 621 ThyAPI, 599 TIBCO General Interface, 599 tick(), 482 TiddlyWiki, 170, 432, 438, 440, 479, 487 Time, 156, 237 Time Spotlight, 472, 474 TimeObserver, 245 Timeout Wiki, 528 tło, 89 togglePause(), 456 top, 94, 415 Top 100 Netflix, 216 transakcje REST, 192 Treehouse, 513 tryb WYSIWYG, 375 Turbo Gears, 627 Twisted, 129 Twofish, 518 tworzenie kolekcje, 411 obiekty XMLHttpRequest, 107 odnośniki, 37 prototypy, 89 usługi sieciowe, 101 wtyczki, 168 zegar, 160 type, 153

U udostępnianie usług sieciowych, 178 ukrywanie elementów, 94 UML, 11 unikanie używania kodu HTML i JavaScript, 294 updateHodelList, 392 uprzedzanie działań serwera, 320

656

|

Skorowidz

URI, 182 URL, 182 URN, 182 urządzenia przenośne, 81 userAgent, 304 Usługi REST, 177 adres URL, 183 alternatywy, 192 bezstanowość, 184 Blogger, 188 czynniki, 178 formaty danych, 187 GET, 184 historia, 177 liczba formatów danych, 187 metafora, 192 metody HTTP, 183 obsługa dowolnych transakcji, 187 odnośniki, 186 operacje jako metody protokołu HTTP, 181 powtarzalność, 186 problem, 178 przesyłanie zapytań, 184 przykłady, 188 rozwiązanie, 178 samodokumentowanie, 186 wczytywanie listy kategorii, 189 wczytywanie poszczególnych kategorii, 190 wczytywanie zawartości koszyka, 190 wzorce powiązane, 192 zasady REST, 180, 183 zasoby jako adresy URL, 181 zmiana zawartości koszyka, 190 Usługi RPC, 193 adres URL, 196 alternatywy, 198 API witryny Flickr, 196 czynniki, 194 czynności, 194 historia, 193 interfejs API, 194 Kiko, 196 metafora, 198 odmiany usług, 194 platformy z procedurami pośredniczącymi Ajax, 195 pobieranie listy kategorii, 197 pobieranie pojedynczych kategorii, 197 pobieranie zawartości koszyka, 197 problem, 194 przykłady, 196 rozwiązanie, 194 SOAP, 194

wzorce powiązane, 198 XML-RPC, 194 zmiana zawartości koszyka, 197 usługi sieciowe, 43, 100, 177 REST, 177 Usługi sieciowe, 100 API Technorati, 103 blokowanie przez niezależnych użytkowników, 102 czynniki, 100 decyzje, 102 filtrowanie, 103 historia, 100 interfejs, 100 NetVibes, 103 parametry, 101 problem, 100 przykłady, 103 rozwiązanie, 100 SOAP, 101 testAjaxCaller, 104 Wish-O-Matic, 104 wzorce powiązane, 105 zastosowanie usługi, 102 uwierzytelnianie, 510 uzupełnienie tekstu, 381 użyteczność, 53, 57, 58 internet, 15

V Vector Markup Language, 31 Venkman, 562 View Rendered Source, 566 visibility, 93, 422, 469 VML, 31

W W3C, 29 Waldemar Bezpieczny, 67 warstwy, 61 aplikacje sieciowe, 336 prezentacja, 45 Watchlist Wiki, 260 Watir, 586 wątki, 338 WBIR, 455 wbudowana pamięć przeglądarki, 314 wciśnięcie klawisza, 151 wczytywanie zawartość koszyka, 190 zawartość strony w etapach, 329

Web Developer, 565 WebContainerServlet, 298 WebFX, 352 WebORB for .NET, 614 WebORB for Java, 621 weryfikacja adres poczty elektronicznej, 506 hasła, 506 wewnętrzny kod HTML, 89 WHAT-WG, 29 which, 154 Whitespace, 492 Widget Server, 621 width, 478 Wieloetapowe pobieranie, 328 alternatywy, 334 czynniki, 329 decyzje, 330 historia, 328 Kayak, 331 metafora, 335 NetVibes, 332 podział strony na bloki, 330 portal, 332 problem, 328 przykłady, 331 rozwiązanie, 329 równoległe zgłaszanie wywołań, 331 struktura strony, 331 TalkDigger, 332 wczytywanie zawartości bloków, 331 wzorce powiązane, 334 wiersz poleceń, 395 Wiersz poleceń na żywo, 394 alternatywy, 400 analiza niepełnych poleceń, 397 Assistive Search, 398 czynniki, 395 decyzje, 397 generowanie informacji dla niepełnych poleceń, 397 historia, 394 problem, 395 przykładowy kod, 398 przykłady, 398 rozwiązanie, 395 wzorce powiązane, 401 YubNub, 398 Wiki, 97 Wikipedia, 377 window.event, 41 window.location.hash, 540, 542, 543 window.location.href, 539

Skorowidz

|

657

window.onload(), 517, 543 window.status, 452, 558 wirtualna lupa, 464 Wirtualny obszar roboczy, 53, 457 alternatywy, 464 bezpośrednie polecenia, 459 blog Dunstana Orcharda, 462 byty zależne od czasu, 459 czynniki, 458 decyzje, 460 dokumenty, 458 Giant-Ass Image Viewer, 462 historia, 458 listy, 458 map.search.ch, 461 metafora, 465 modele trójwymiarowe, 459 narzędzia do przeciągania, 459 nawigacja, 458 paski przewijania, 459 początkowy widok, 460 ponowne zapełnianie obszaru, 460 problem, 458 przybliżanie obrazu, 459 przykłady, 461 refaktoryzacja kodu, 462 rozwiązanie, 458 rysunki fizyczne, 458 skróty klawiaturowe, 459 stopniowe przewijanie, 460 suwaki, 459 tabele, 458 wirtualna lupa, 464 wybór obszaru, 459 wyszukiwarka OpenRico, 461, 462 wzorce powiązane, 464 zmiany istniejącego widoku, 460 Wish-O-Matic, 104 witryny internetowe, 22 Word of the Day, 445 Wordpress, 103 WPLicense, 265, 267, 404, 405 obsługa odpowiedzi użytkownika, 269 pobieranie pytań dotyczących licencji, 268 pobieranie typów licencji, 268 Writely, 21, 376 wskaźnik aktywności, 125 wskaźnik postępu, 48 Wskaźnik postępu, 354 Amazon Zuggest, 358 czas opóźnienia, 356 czynniki, 355 decyzje, 356

658 |

Skorowidz

długie opóźnienia, 356 historia, 354 Kayak, 359 metafora, 360 problem, 355 Progress Indicator, 359 Protopage, 358 przykłady, 357 refaktoryzacja kodu, 359 rodzaje, 356 rozwiązanie, 355 TalkDigger, 358 The Pick’em, 359 wyszukiwanie diamentów na witrynie Amazon, 357 wzorce powiązane, 360 wskaż i kliknij, 400 współdzielona właściwość document.domain, 270 wstawianie elementów, 93 Wstecz, 30 Wstępne szacowanie, 321 częstotliwość pobierania danych, 323 częstotliwość wstępnego szacowania, 323 czynniki, 321 dane historyczne, 322 decyzje, 323 historia, 321 licznik iTunes, 324, 326 łączenie wstępnego szacowania z prawdziwymi danymi, 323 metafora, 328 pamięć poczty Gmail, 325 problem, 321 przykłady, 324 rozwiązanie, 322 serwer, 324 wzorce powiązane, 328 Wt, 610 wybieranie, 153 element z hierarchicznej struktury, 361 wartość z danego przedziału, 348 wybuch, 479 wyciekanie pamięci, 95 wydajność, 50, 57, 205, 307 wygląd, 36, 83 wykrywanie otwarta aplikacja, 532 przekroczenie limitu czasu, 230, 523 użycie aplikacji, 522 wersja przeglądarki, 304 wypychanie, 31, 99 wyrażanie operacji, 411 wyrażenia języka XSLT, 279

Wyróżnianie, 490 A9, 492 className, 491 czynniki, 490 decyzje, 491 deselected, 491 Gmail, 492 historia, 490 metafora, 494 problem, 490 przykładowy kod, 492 przykłady, 492 rozwiązanie, 491 selected, 491 stany, 491 Teacher!, 492 Whitespace, 492 wygląd wyróżnienia, 491 wzorce powiązane, 494 zastosowanie, 491 wyróżnianie elementów, 490 WYSIWYG, 21, 375 WYSIWYN, 375 wyskakujące okna, 421 Wyspy danych XML, 192, 271 alternatywy, 276 czynniki, 272 dołączanie dokumentu XML w czasie wczytywania początkowej strony, 274 historia, 272 metafora, 277 Mozilla.org, 274 PerfectXML, 274 problem, 272 przekształcanie wysp na kod HTML, 273 przykłady, 274 refaktoryzacja kodu, 275 rozwiązanie, 272 Sum, 275 TechRepublic, 274 zachowywanie danych XML, 274 wysuwanie na stronę, 478 wysuwanie poza stronę, 479 wyszukiwanie diamentów na witrynie Amazon, 351, 357, 392 Wyszukiwanie na żywo, 47, 387 Assistive Search, 393 czynniki, 388 decyzje, 390 Delta Vacations, 391, 392 formularz na żywo, 389 historia, 387 interpretacja niepełnego tekstu, 390

kompletność wyników, 390 ListSomething.com, 392 metody obsługi zdarzeń, 389 problem, 388 przykładowy kod, 392 przykłady, 391 rozwiązanie, 388 Skype, 392 wersje, 388 wyszukiwanie diamentów na witrynie Amazon, 392 wzorce powiązane, 393 za dużo wyników, 390 wyszukiwarka OpenRico, 461, 462 Wyślij, 23 wyślij i zapomnij, 232 wyświetlanie, 38 dane XML, 277, 278 elementy, 94 informacje pomocnicze, 448 zawartość na żywo, 23 wywołania asynchroniczne, 108 kierowane do ramek, 127 kierowane do serwera, 27 operacje po stronie serwera, 199 Wywołania IFrame, 119, 122 adres URL, 123 alternatywy, 127 czynniki, 122 fantomowe kliknięcia, 125 Google Maps, 125 historia, 122 HTMLHttpRequest, 126 interfejsy użytkownika przeglądarek, 125 Kuro5hin, 126 metafora, 127 obsługi wywołań GET, 123 problem, 122 przesyłanie formularza, 124 przykłady, 125 PXL8, 126 refaktoryzacja kodu, 127 rozwiązanie, 123 Scoop, 125 wskaźnik aktywności, 125 wywołania kierowane do ramek, 127 Wywołania XMLHttpRequest, 38, 39, 105, 127 alternatywy, 119 Anyterm, 116 asynchroniczne wywołania, 108 Backbase, 116 błędy, 116

Skorowidz

| 659

Wywołania XMLHttpRequest czynniki, 106 decyzje, 115 format XML, 112 historia, 106 import dokumentów XML, 121 interfejs API, 113 kontrola pamięci podręcznej, 115 limit czasu, 110 metafora, 122 Mint, 117 obsługa błędów, 116 obsługa żądań POST, 110 odpowiedź 204, 121 odpowiedź serwera, 107 odpowiedź w formacie XML, 112 odświeżanie stron, 119 pamięć podręczna, 115 problem, 106 przykłady, 116 readyState, 108 rozwiązanie, 106 serwer Lace, 116 status odpowiedzi, 109 Strumieniowanie HTTP, 120 tworzenie obiektów XMLHttpRequest, 107 udostępniana zawartość, 115 wykrywanie błędów, 109 Wywołania IFrame, 119 wywołania przy użyciu arkuszy stylów, 121 Wzbogacone wtyczki, 121 zewnętrzne domeny, 111 wyzwalanie opróżniania bufora, 242 Wzbogacone formularze, 157 Wzbogacone wtyczki, 121, 165 alternatywy, 172 Amazon Mini Shop, 169, 171 czynniki, 166 decyzje, 168 Google Suggest for Firefox, 170 historia, 165 korzyści, 166 metafora, 173 niezależne wtyczki, 168 Odeo, 170 pasek narzędzi Google, 170 problem, 166 przykłady, 169 rozwiązanie, 166 stacjonarny klient, 172 TiddlyWiki, 170 tworzenie wtyczek, 168 wzorce powiązane, 172

660 |

Skorowidz

wzbogacony klient stacjonarny, 172 wzDragDrop, 411 wzorce Ajax, 61 diagnozowania, 53 dla podstawowych technologii, 62, 63, 71 dla usług sieciowych, 52 funkcjonalności i użyteczności, 62, 65, 345 programistyczne, 52, 62, 64, 175 rozwojowe, 53, 62, 555 wzorce projektowe, 41, 61, 66, 631 alternatywy, 68 Aplikacja Ajax, 73 Bezpośrednie logowanie, 509 Blokowanie przesyłania, 239 Bogaty edytor tekstu, 374 budowa, 66 czynniki, 67 decyzje, 68 Diagnozowanie, 561 Drążenie danych, 361 Działania użytkownika, 147 Formularze na żywo, 402 Generowanie kodu po stronie serwera, 293 historia, 66 ilustracja refaktoryzacji, 68 JavaScript na żądanie, 137 Jawne przesyłanie, 246 Jednosekundowa zmiana, 477 Jednosekundowe podświetlanie, 49 Jednosekundowe wyróżnienie, 467 Jednosekundowy ruch, 484 Komponenty działające w różnych przeglądarkach, 300 Komunikaty HTML, 204 Komunikaty JSON, 219 Komunikaty XML, 213 Komunikaty ze zwykłym tekstem, 209 Kontrolki do aktualizacji, 452 Leniwa rejestracja, 496 Limit czasu, 521 metafora, 68 Mikroodnośniki, 20, 436 Niepowtarzalne adresy URL, 538 Obszar statusu, 448 Okna wyskakujące, 420 Okresowe odświeżanie, 232 Pamięć podręczna po stronie przeglądarki, 307 Planowanie, 51, 157 Pobieranie na podstawie przewidywania, 315 Podpowiedzi, 380 popularność, 66 Portlety, 442

Pośrednik między domenami, 262 problem, 67 Procedury pośredniczące Ajax, 198 programy demonstracyjne, 69 Przechowywanie bezpieczne ze względu na serwer, 515 Przeciąganie, 409 przykłady, 68 Rejestrowanie, 557 rozwiązanie, 68 Sprajty, 414 Sprawdzanie zawartości modelu DOM, 564 Strumieniowanie HTTP, 127 Suwaki, 348 Sygnały kontrolne, 531 Symulowanie usług, 573 Szablony po stronie przeglądarki, 283 Śledzenie przepływu danych, 569 Śledzenie wywołań, 227 Tabele danych, 368 Testy po stronie przeglądarki, 577 Testy systemu, 584 Testy usług, 581 Usługi REST, 177 Usługi RPC, 193 Usługi sieciowe, 100 Wieloetapowe pobieranie, 328 Wiersz poleceń na żywo, 394 Wirtualny obszar roboczy, 457 Wskaźnik postępu, 354 Wstępne szacowanie, 321 Wyróżnianie, 490 Wyspy danych XML, 271 Wyszukiwanie na żywo, 387 Wywołania IFrame, 122 Wywołania XMLHttpRequest, 38, 105 Wzbogacone wtyczki, 165 XSLT po stronie przeglądarki, 277 Zdarzenia rozproszone, 251 Złożony klient, 335 Zmiana układu strony, 92 Zmiana wyglądu, 83 Zmienna zawartość, 427 znaczniki, 66

X XAJAX, 625 XBL, 273 XForms, 32 XHConn, 605 XHR, 134 XHTML, 26, 205 XML, 11, 27, 214, 275, 606

XML Sum, 218 XMLHttpRequest, 7, 27, 38, 39, 62, 105, 107, 195, 205, 302, 305, 499 interfejs API, 113 metody, 114 onreadystatechange, 39 open(), 39 responseText, 40, 131 send(), 39 status, 109 tworzenie, 107 właściwości, 114 XMLHttpRequest Debugging, 570 XMLHttpRequest Tracing, 570, 571 XML-RPC, 194, 203 XOAD, 626 XPath, 280 XSLT, 113, 216, 273, 278, 280 XSLT Drilldown, 281 XSLT po stronie przeglądarki, 52, 277 Ajax-S, 280 alternatywy, 283 czynniki, 278 decyzje, 279 Google Maps, 280 historia, 277 Kupu, 280 metafora, 283 pobieranie arkuszy XSLT, 279 problem, 277 przykłady, 280 refaktoryzacja kodu, 281 rozwiązanie, 278 Sarissa, 281 wzorce powiązane, 283 XSLT Drilldown, 281 zapisywanie arkusza po stronie serwera, 280 XUL, 171, 609 xUnit, 578

Y Yahoo! Maps, 78 Yahoo! Mindset, 350, 352 YAML, 224 YubNub, 398

Z zabezpieczanie funkcji działających po stronie serwera, 200 zachowywanie danych XML, 274 zaciemnianie, 103

Skorowidz

|

661

zagnieżdżone portlety, 443 zagnieżdżone skrypty uruchamiane w przeglądarce, 585 zakładki, 447, 543 zakrywanie, 479 zanikanie, 469 zapamiętywanie, 308 zapełnianie modelu DOM, 271 zapisywanie informacji w dzienniku, 230 zapobieganie wyciekaniu pamięci, 95 zarządzanie jednorazowe ziarno, 512 koszyk zakupów, 504 zasada tego samego pochodzenia, 112, 270 zasada tej samej domeny, 112 zasady projektowania oprogramowania, 59 zasady REST, 180, 183 zautomatyzowane testy symulacja działania użytkownika, 584 usługi sieciowe, 582 zdalne wywoływanie poleceń, 27, 38, 99, 370 zdalne wywoływanie procedur, 177 zdarzenia, 28, 40, 149, 151 atrybuty, 153 event, 153 obsługa, 149 onblur, 152, 247 onchange, 153 onclick, 152 ondblclick, 152 onfocus, 152 onkeydown, 151 onkeypress, 151 onkeyup, 151 onmousedown, 152 onmouseout, 152 onmouseover, 152 onmouseup, 152 onselect, 153 rejestrowanie, 150 rodzaj, 153 Zdarzenia rozproszone, 251 ActiveMQ, 256 biblioteka zdarzeń platformy Dojo, 256 czynniki, 252 decyzje, 254 historia, 251 lista odbiorców komunikatu, 258 LivePage, 257 MapBuilder, 256 metafora, 262 powiadomienia o zdarzeniach, 255 problem, 251

662

|

Skorowidz

przetwarzanie asynchroniczne, 255 przetwarzanie synchroniczne, 255 przykłady, 256 refaktoryzacja kodu, 257 refaktoryzacja pod kątem mechanizmu obsługi zdarzeń, 257 rozwiązanie, 252 stany pośrednie, 254 wprowadzanie listy obserwowanych zdarzeń, 260 wykrywanie zmian, 254 wzorce powiązane, 261 zmiany stanu obiektu, 255 zegary, 158 zerowanie referencji, 95 zewnętrzna treść, 264 zewnętrzny kod HTML, 89 zgadywanie liczb, 298 zgodność, 58, 60 zgodność między przeglądarkami, 301 ziarno, 511, 512 Zimbra AjaxTK, 600 zIndex, 94, 349, 415, 422 ZK, 609 złożona grafika, 31 Złożony klient, 53, 335 alternatywy, 343 czynniki, 336 decyzje, 339 Gmail, 340 historia, 335 Lemingi, 340 logika aplikacji, 339 logika biznesowa, 339 metafora, 344 NumSum, 340 powłoka JS/UIX, 341 problem, 335 przykładowy kod, 341 przykłady, 340 rozwiązanie, 336 wzorce powiązane, 344 zadania klienta, 337 zmiana układu, 19, 20 układ elementów listy, 411 układ elementów w przestrzeni geometrycznej, 411 układ obiektów na stronie, 410 Zmiana układu strony, 92 czynniki, 93 decyzje, 95 dodawanie, 93 historia, 92 Kiko, 96

metafora, 97 problem, 92 przesłanianie, 94 przesuwanie, 94 przykłady, 95 rozwiązanie, 93 Super Maryo World, 96 TadaList, 95 usuwanie, 93 wyciekanie pamięci, 95 wzorce powiązane, 97 zmiana wartości, 153 Zmiana wyglądu, 83 Ajax Spell Checker, 91 Ajax-S, 90 czynniki, 84 decyzje, 88 Digg Spy, 90 historia, 84 metafora, 92 problem, 84 przykłady, 90 rozwiązanie, 84 właściwości, 89 wzorce powiązane, 91 zmiana zawartości koszyka, 190, 197 zmiana zawartości przez użytkownika, 427 zmienna zawartość, 19 Zmienna zawartość, 427 alternatywy, 435 czynniki, 427 dane, 430 Decyzje, 429 etykiety, 429 Flickr, 431 historia, 427 informacje pomocnicze, 429 kalendarz w witrynie Monket, 431 kończenie edycji, 430

kreator wizytówek autorstwa Thomasa Baekdala, 433 metafora, 435 problem, 427 przykładowy kod, 433 przykłady, 431 rozwiązanie, 428 technologie Ajaksa, 428 TiddlyWiki, 432 wielkość bloku, 430 Wiki, 433 wyróżnianie zmiennej zawartości, 429 wzorce powiązane, 435 zmienne globalne, 95 znaczące adresy URL, 539 znacznik czasu, 115 znaczniki BXML, 297 Zoomer, 481, 482 Zuggest, 244 zumiPage, 615 zwiększanie jasności elementu przez sekundę, 468 zwykły tekst, 210 Zygmunt Rakieta, 67

Ź źródło rysunku, 89

Ż żądania GET, 39 POST, 110 żółte zanikanie, 49, 468

Skorowidz

| 663

O autorze Michael Mahemoff zajmuje się oprogramowaniem od 22 lat, włączając w to 10 lat doświadczenia w firmach komercyjnych. Na Uniwersytecie Melbourne zdobył dyplomy z dziedziny inżynierii oprogramowania i psychologii, a tytuł doktora otrzymał za pracę zatytułowaną „Design Reuse in Software Engineering and Human-Computer Interaction” (Powtórne wykorzystanie projektów w inżynierii oprogramowania i interakcji między człowiekiem a komputerem). Mieszka w Londynie i jest konsultantem do spraw rozwoju oprogramowania bankowego i medycznego. Na stronie domowej Micheala (http://mahemoff.com) znajdują się odnośniki do jego bloga i projektów prowadzonych w internecie.

Ajax. Wzorce projektowe Aplikacja Ajax Strona 73

Tworzenie Aplikacji Ajax — złożonych aplikacji, które można uruchomić w dowolnej współczesnej przeglądarce internetowej.

Bezpośrednie logowanie Strona 509

Uwierzytelnianie użytkowników przy użyciu Wywołań XMLHttpRequest zamiast przesyłania formularzy z szyfrowaniem obsługiwanym przez przeglądarkę w celu zwiększenia bezpieczeństwa.

Blokowanie przesyłania Strona 239

Zapisywanie danych w buforze przeglądarki i automatyczne przesyłanie ich w określonych odstępach zamiast przesyłania danych w wyniku zajścia dowolnego zdarzenia JavaScript.

Bogaty edytor tekstu Strona 374

Dodawanie kontrolki reprezentującej bogaty edytor tekstu i udostępniającej łatwe formatowanie oraz wyświetlanie danych w trybie WYSIWYG.

Diagnozowanie Strona 561

Diagnozowanie problemów przy użyciu debugera języka JavaScript.

Drążenie danych Strona 361

Udostępnianie dynamicznego Drążenia danych w celu umożliwienia użytkownikom zlokalizowania elementu w hierarchii.

Działania użytkownika Strona 147

Obsługa większości Działań użytkownika za pomocą kodu JavaScript przy użyciu metod obsługi zdarzeń.

Formularze na żywo Strona 402

Sprawdzanie poprawności i modyfikowanie formularzy w czasie trwania interakcji zamiast oczekiwania na jawne przesłanie danych.

Generowanie kodu po stronie serwera Strona 293

Automatyczne generowanie kodu HTML i JavaScript przez kod wykonywany po stronie serwera.

JavaScript na żądanie Strona 137

Pobieranie i uruchamianie fragmentów kodu JavaScript.

Jawne przesyłanie Strona 246

Wymaganie od użytkowników jawnego wysyłania żądań, na przykład przesyłanie w wyniku kliknięcia przycisku zamiast automatycznego przesyłania danych przy każdym zdarzeniu przeglądarki.

Jednosekundowa zmiana Strona 477

Zmiana kształtu elementu na około sekundę w sytuacji zmiany jego wartości lub wystąpienia jakiegoś innego ważnego zdarzenia.

Jednosekundowe wyróżnianie Strona 467

Dynamiczne rozjaśnienie elementu na około sekundę w sytuacji zmiany jego wartości lub wystąpienia jakiejś innej istotnej modyfikacji.

Jednosekundowy ruch Strona 484

Stopniowe przemieszczanie elementów z jednego miejsca w inne lub tymczasowe przesuwanie ich w celu poinformowania o zajściu zdarzenia.

Komponenty działające w różnych przeglądarkach Strona 300

Tworzenie Komponentów działających w różnych przeglądarkach, co pozwala programistom wielokrotnie wykorzystywać te same komponenty bez względu na niezgodności między przeglądarkami.

Komunikaty HTML Strona 204

Generowanie przez serwer fragmentów kodu HTML wyświetlanych w przeglądarce.

Komunikaty JSON Strona 219

Przekazywanie komunikatów między serwerem a przeglądarką przy użyciu formatu notacji obiektowej JavaScript (ang. JavaScript Object Notation — JSON).

Ajax. Wzorce projektowe Komunikaty XML Strona 213

Przekazywanie komunikatów między serwerem a przeglądarką w rozszerzalnym języku znaczników (ang. Extensible Markup Language — XML).

Komunikaty ze zwykłym tekstem Strona 209

Przekazywanie prostych komunikatów ze zwykłym tekstem między serwerem a przeglądarką.

Kontrolki do aktualizacji Strona 452

Umożliwianie użytkownikom kontroli częstotliwości aktualizacji zawartości strony.

Leniwa rejestracja Strona 496

Zbieranie fragmentów informacji dotyczących użytkownika w czasie jego interakcji z aplikacją przy jednoczesnym odroczeniu rejestracji.

Limit czasu Strona 521

Dodanie Limitu czasu powoduje wylogowanie użytkownika po okresie bezczynności i, opcjonalnie, poinformowanie o tym serwera.

Mikroodnośniki Strona 436

Udostępnianie Mikroodnośników, które otwierają nową zawartość na istniejącej stronie, zamiast wczytywać nową stronę.

Niepowtarzalne adresy URL Strona 538

Udostępnianie Niepowtarzalnych adresów URL reprezentujących znaczące stany aplikacji.

Obszar statusu Strona 448

Dołączanie przeznaczonego tylko do odczytu Obszaru statusu w celu przedstawiania bieżących i przeszłych operacji.

Okna wyskakujące Strona 420

Obsługa krótkich zadań i wyszukiwania przy użyciu tymczasowych Okien wyskakujących, czyli bloków z treścią pojawiających się „przed” standardową zawartością.

Okresowe odświeżanie Strona 232

Okresowe zgłaszanie Wywołań XMLHttpRequest przez przeglądarkę w celu pobrania nowych informacji (na przykład co pięć sekund).

Pamięć podręczna po stronie przeglądarki Strona 307

Zapisywanie w Pamięci podręcznej po stronie przeglądarki danych zwróconych przez serwer.

Planowanie Strona 157

Używanie zegarów języka JavaScript do planowania operacji.

Pobieranie na podstawie przewidywania Strona 315

Wcześniejsze pobieranie zawartości na podstawie przewidywania prawdopodobnych działań użytkownika.

Podpowiedzi Strona 380

Proponowanie słów lub zdań, które prawdopodobnie stanowią zakończenie tekstu wpisywanego przez użytkownika.

Portlety Strona 442

Wprowadzenie do portletów — izolowanych bloków z treścią mających niezależny status.

Pośrednik między domenami Strona 262

Tworzenie pośredniczących usług sieciowych wspomagających komunikację między przeglądarką a zewnętrznymi domenami.

Procedury pośredniczące Ajax Strona 198

Model Procedur pośredniczących Ajaksa, które umożliwiają skryptom wykonywanym po stronie przeglądarki bezpośrednie wywoływanie operacji po stronie serwera bez konieczności obsługi szczegółów związanych z obiektem XMLHttpRequest i protokołem HTTP.

Ajax. Wzorce projektowe Przechowywanie bezpieczne ze względu na serwer Strona 515

Przechowywanie poufnych danych w postaci zaszyfrowanej, dzięki czemu klienci mają do nich dostęp i mogą nimi manipulować jedynie po podaniu hasła, które nie jest przesyłane na serwer.

Przeciąganie Strona 409 Udostępnianie mechanizmu przeciągania w celu umożliwienia użytkownikom bezpośredniego zmieniania układu elementów na stronie.

Rejestrowanie Strona 557 Dodawanie do kodu JavaScript obsługi rejestrowania operacji.

Sprajty Strona 414 Ulepszanie wyglądu strony przy użyciu sprajtów, czyli małych, elastycznych i przypominających ikony bloków zawartości strony.

Sprawdzanie zawartości modelu DOM Strona 564 Używanie narzędzi do sprawdzania zawartości modelu DOM w celu dynamicznego pobierania stanu modelu.

Strumieniowanie HTTP Strona 127 Strumieniowanie poprzez długotrwałe połączenie HTTP danych zwracanych przez serwer.

Suwaki Strona 348 Udostępnianie Suwaków umożliwiających użytkownikom wybór wartości z danego przedziału.

Sygnały kontrolne Strona 531 Okresowe przesyłanie przez przeglądarki komunikatów z sygnałami kontrolnymi w celu powiadomienia, że aplikacja wciąż działa w przeglądarce, a użytkownik jest nadal aktywny.

Symulowanie usług Strona 573 Tworzenie aplikacji przy użyciu „fałszywych” usług sieciowych symulujących działanie rzeczywistych usług używanych w systemie produkcyjnym.

Szablony po stronie przeglądarki Strona 283 Tworzenie szablonów zawierających zagnieżdżony kod JavaScript i używanie platformy działającej po stronie przeglądarki w celu generowania ich jako stron HTML.

Śledzenie przepływu danych Strona 569 Diagnostyka problemów poprzez analizę przesyłanych danych.

Śledzenie wywołań Strona 227 Śledzenie Wywołań XMLHttpRequest w czasie ich przesyłania z przeglądarki na serwer i z powrotem.

Tabele danych Strona 368 Wyświetlanie danych w tabelach złożonych i obsługa popularnych zapytań.

Testy po stronie przeglądarki Strona 577 Tworzenie zautomatyzowanych testów komponentów JavaScript działających po stronie przeglądarki.

Testy systemu Strona 584 Tworzenie zautomatyzowanych testów symulujących działania użytkownika i sprawdzanie wyników.

Testy usług Strona 581 Tworzenie zautomatyzowanych testów dla usług sieciowych przy użyciu klientów HTTP służących do imitowania działania przeglądarki w interakcji z serwerem.

Usługi REST Strona 177 Udostępnianie usług sieciowych zgodnie z zasadami REST.

Usługi RPC Strona 193 Udostępnianie usług sieciowych jako zdalnych wywołań proceduralnych (ang. Remote Procedural Calls — RPC).

Ajax. Wzorce projektowe Usługi sieciowe

Strona 100 Udostępnianie funkcjonalności serwera jako dobrze dopasowanych i łatwych w użyciu usług sieciowych.

Wieloetapowe pobieranie Strona 328 Rozbijanie wczytywania zawartości na kilka etapów, dzięki czemu łatwiejsze w pobieraniu i ważniejsze elementy można wyświetlić jako pierwsze.

Wiersz poleceń na żywo Strona 394 Monitorowanie tworzonych poleceń i dynamiczne modyfikowanie interfejsu w celu obsługi interakcji.

Wirtualny obszar roboczy Strona 457 Udostępnianie w przeglądarce widoku fragmentu obszaru roboczego znajdującego po stronie serwera, co pozwala użytkownikom na przeglądanie całej przestrzeni roboczej, tak jakby znajdowała się w systemie lokalnym.

Wskaźnik postępu Strona 354 Informuje o postępie przetwarzania wywołań przekazanych na serwer.

Wstępne szacowanie Strona 321 Wykonywanie sensownych oszacowań zamiast pobierania danych z serwera.

Wyróżnianie Strona 490 Wyróżnianie elementów poprzez wyświetlanie ich w spójny, przyciągający uwagę sposób.

Wyspy danych XML Strona 271 Zapisywanie odpowiedzi w formacie XML jako Wysp danych XML, czyli węzłów w modelu DOM dokumentu HTML.

Wyszukiwanie na żywo Strona 387 Ciągłe wyświetlanie wszystkich poprawnych wyników w czasie tworzenia i poprawiania zapytań przez użytkownika.

Wywołania IFrame Strona 122 Używanie elementów IFrame do obsługi komunikacji między przeglądarką a serwerem.

Wywołania XMLHttpRequest Strona 105 Używanie obiektów XMLHttpRequest do komunikacji między przeglądarką a serwerem.

Wzbogacone wtyczki Strona 165 Tworzenie aplikacji typu „więcej Ajaksa w Ajaksie”.

XSLT po stronie przeglądarki Strona 277 Stosowanie szablonów XSLT do przekształcania komunikatów XML na kod XHTML. Tworzenie szablonów zawierających zagnieżdżony kod JavaScript i używanie platformy działającej po stronie przeglądarki w celu generowania ich jako stron HTML.

Zdarzenia rozproszone Strona 251 Zapewnianie synchronizacji obiektów przy użyciu zdarzeń.

Złożony klient Strona 335 Tworzenie bogatych klientów bazujących na przeglądarce, dzięki czemu zdalne wywołania są potrzebne tylko wtedy, kiedy nie można uzyskać pożądanego efektu w samej przeglądarce.

Zmiana układu strony Strona 92 Dodawanie, usuwanie, przemieszczanie i zakrywanie elementów poprzez manipulowanie modelem DOM.

Zmiana wyglądu Strona 83 Zmienianie elementów strony poprzez zmianę w obiektowym modelu dokumentu (ang. Document Object Model — DOM) stylów i wartości takich jak właściwości tekstu czy koloru.

Zmienna zawartość Strona 427 Składanie strony z bloków ze Zmienną zawartością — małych fragmentów danych, które można zmieniać na stronie.

Notatki