Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00164 008410 10460409 na godz. na dobę w sumie
AJAX i JavaScript. Tworzenie i optymalizacja aplikacji sieciowych - książka
AJAX i JavaScript. Tworzenie i optymalizacja aplikacji sieciowych - książka
Autor: Liczba stron: 336
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-1098-3 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> javascript - programowanie
Porównaj ceny (książka, ebook, audiobook).

Wykorzystaj w projektach najnowsze technologie


Rosnąca popularność internetu sprawiła, że jego użytkownicy stawiają witrynom WWW i aplikacjom sieciowym coraz wyższe wymagania. Nie wystarczy już przygotować efektowny projekt graficzny i atrakcyjną treść. Dziś liczy się szybkość działania, bezpieczeństwo i wygoda obsługi. Ratunkiem dla programistów poszukujących kolejnych metod usprawnienia działania swoich aplikacji jest technologia AJAX. To niesamowite połączenie języka JavaScript i XML pozwoliło wyeliminować największą wadę aplikacji i witryn WWW, czyli konieczność przeładowywania strony po każdej zmianie zawartości. AJAX realizuje proces przeładowania danych w tle, w sposób niezauważalny dla użytkownika. Oczywiście, to nie jedyna zaleta technologii AJAX -- jest ich znacznie więcej.

Czytając książkę 'AJAX i JavaScript. Tworzenie i optymalizacja aplikacji sieciowych', odkryjesz wszystkie zalety tej technologii i dowiesz się, jak projektować i pisać wydajne, bezpieczne oraz ergonomiczne aplikacje WWW. Nauczysz się korzystać z żądań asynchronicznych, przetwarzać pobrane dane i rozbudowywać istniejące aplikacje tak, aby zastosować AJAX. Poznasz proces projektowania i tworzenia aplikacji sieciowych z wykorzystaniem przypadków użycia, zadbasz o wygodę obsługi i zdiagnozujesz oraz rozwiążesz problemy z kodem AJAKSA. W książce znajdziesz także omówienie bibliotek i narzędzi, dzięki którym proces budowania aplikacji przyspieszysz i usprawnisz.

Powiększ swój arsenał narzędzi o technologię AJAX
i popraw komfort swojej pracy oraz jakość aplikacji!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

AJAX i JavaScript. Tworzenie i optymalizacja aplikacji sieciowych Autor: Joshua Eichorn T‡umaczenie: Tomasz Walczak ISBN: 978-83-246-1098-3 Tytu‡ orygina‡u: Understanding AJAX: Using JavaScript to Create Rich Internet Applications Format: B5, stron: 336 Przyk‡ady na ftp: 691 kB Wykorzystaj w projektach najnowsze technologie (cid:149) Poznaj zasady funkcjonowania technologii AJAX (cid:149) Zastosuj narzŒdzia i biblioteki u‡atwiaj„ce budowanie aplikacji internetowych (cid:149) Zaprojektuj aplikacje, pos‡uguj„c siŒ przypadkami u¿ycia Rosn„ca popularno(cid:156)(cid:230) internetu sprawi‡a, ¿e jego u¿ytkownicy stawiaj„ witrynom WWW i aplikacjom sieciowym coraz wy¿sze wymagania. Nie wystarczy ju¿ przygotowa(cid:230) efektowny projekt graficzny i atrakcyjn„ tre(cid:156)(cid:230). Dzi(cid:156) liczy siŒ szybko(cid:156)(cid:230) dzia‡ania, bezpieczeæstwo i wygoda obs‡ugi. Ratunkiem dla programist(cid:243)w poszukuj„cych kolejnych metod usprawnienia dzia‡ania swoich aplikacji jest technologia AJAX. To niesamowite po‡„czenie jŒzyka JavaScript i XML pozwoli‡o wyeliminowa(cid:230) najwiŒksz„ wadŒ aplikacji i witryn WWW, czyli konieczno(cid:156)(cid:230) prze‡adowywania strony po ka¿dej zmianie zawarto(cid:156)ci. AJAX realizuje proces prze‡adowania danych w tle, w spos(cid:243)b niezauwa¿alny dla u¿ytkownika. Oczywi(cid:156)cie, to nie jedyna zaleta technologii AJAX -- jest ich znacznie wiŒcej. Czytaj„c ksi„¿kŒ (cid:132)AJAX i JavaScript. Tworzenie i optymalizacja aplikacji sieciowych(cid:148), odkryjesz wszystkie zalety tej technologii i dowiesz siŒ, jak projektowa(cid:230) i pisa(cid:230) wydajne, bezpieczne oraz ergonomiczne aplikacje WWW. Nauczysz siŒ korzysta(cid:230) z ¿„daæ asynchronicznych, przetwarza(cid:230) pobrane dane i rozbudowywa(cid:230) istniej„ce aplikacje tak, aby zastosowa(cid:230) AJAX. Poznasz proces projektowania i tworzenia aplikacji sieciowych z wykorzystaniem przypadk(cid:243)w u¿ycia, zadbasz o wygodŒ obs‡ugi i zdiagnozujesz oraz rozwi„¿esz problemy z kodem AJAKSA. W ksi„¿ce znajdziesz tak¿e om(cid:243)wienie bibliotek i narzŒdzi, dziŒki kt(cid:243)rym proces budowania aplikacji przyspieszysz i usprawnisz. (cid:149) Obiekty XMLHttpRequest (cid:149) fl„dania asynchroniczne (cid:149) Modyfikowanie aplikacji pod k„tem AJAKSA (cid:149) ZwiŒkszanie u¿yteczno(cid:156)ci witryn internetowych (cid:149) Przetwarzanie danych zwracanych do aplikacji ajaksowych (cid:149) Korzystanie z bibliotek Sarissa i Scriptaculous (cid:149) Przyspieszanie wy(cid:156)wietlania danych (cid:149) Formularze logowania oparte na AJAKSIE (cid:149) Biblioteki AJAKSA dla PHP, Javy, C# i DHTML PowiŒksz sw(cid:243)j arsena‡ narzŒdzi o technologiŒ AJAX i popraw komfort swojej pracy oraz jako(cid:156)(cid:230) aplikacji! Wydawnictwo Helion ul. Ko(cid:156)ciuszki 1c 44-100 Gliwice tel. 032 230 98 63 e-mail: helion@helion.pl Spis treści Podziękowania ................................................................................. 7 O autorze ......................................................................................... 9 Wprowadzenie ................................................................................ 11 Część I ........................................................................................ 17 Rozdział 1. Czym jest AJAX? ............................................................................ 19 1.1. Bogate aplikacje internetowe ................................................................................ 19 1.2. Definicja AJAX-a ................................................................................................. 20 1.3. Technologie AJAX-a ............................................................................................ 21 1.4. Zdalne wykonywanie skryptów ............................................................................ 24 1.5. Gmail popularyzuje obiekty XMLHttpRequest .................................................... 24 1.6. Nowa nazwa — AJAX .......................................................................................... 26 1.7. Podsumowanie ...................................................................................................... 27 Rozdział 2. Zaczynamy .................................................................................... 29 2.1. Wprowadzenie do obiektów XMLHttpRequest .................................................... 29 2.1.1. XMLHttpRequest::Open() .......................................................................... 30 2.1.2. XMLHttpRequest::Send() ........................................................................... 31 2.1.3. XMLHttpRequest::setRequestHeader() ...................................................... 31 2.1.4. XMLHttpRequest::getResponseHeader() i getAllResponseHeaders() ....... 32 2.1.5. Inne metody obiektu XMLHttpRequest ...................................................... 32 2.1.6. Właściwości obiektów XMLHttpRequest ................................................... 33 2.1.7. Informacje o zmiennej readyState ............................................................... 33 2.2. Obiekty XMLHttpRequest działające w różnych przeglądarkach ........................ 34 2.3. Przesyłanie żądań asynchronicznych .................................................................... 36 2.4. AJAX bez obiektów XMLHttpRequest ................................................................ 40 2.5. Pierwsze rozwiązanie rezerwowe — przesyłanie żądań za pomocą ramek IFrame ...................................................................................... 41 2.5.1. Tworzenie ukrytych ramek IFrame ............................................................. 43 2.5.2. Tworzenie formularza ................................................................................. 43 2.5.3. Przesyłanie pobranych danych do oryginalnego dokumentu ...................... 44 2.5.4. Kompletny przykład komunikacji w AJAX-ie przy użyciu ramek IFrame ....44 2.6. Drugie rozwiązanie rezerwowe — przesyłanie żądań za pomocą ciasteczek ....... 47 2.7. Podsumowanie ...................................................................................................... 50 4 Spis treści Rozdział 3. Używanie pobranych danych ........................................................... 51 3.1. Podejścia bazujące na dokumentach ..................................................................... 51 3.1.1. Używanie AJAX-a do dodawania nowych danych HTML do strony ........ 52 3.1.2. Używanie XML-a w modelu DOM ............................................................ 54 3.1.3. Używanie XML-a za pomocą XSLT .......................................................... 57 3.2. Zdalne wykonywanie skryptów ............................................................................ 61 3.2.1. Podstawowe techniki RPC .......................................................................... 62 3.2.2. SOAP i XML-RPC ...................................................................................... 70 3.2.3. Niestandardowe formaty XML ................................................................... 71 3.2.4. JavaScript i JSON ....................................................................................... 77 3.3. Jak wybrać typ żądania? ....................................................................................... 78 3.4. Podsumowanie ...................................................................................................... 79 Rozdział 4. Dodawanie AJAX-a do procesu tworzenia stron ................................ 81 4.1. Zmiany w cyklu tworzenia stron ........................................................................... 81 4.1.1. Zmiany wynikające z rozszerzania ............................................................. 82 4.1.2. AJAX w akcji — zastępowanie wyszukiwania użytkowników w oknie wyskakującym ............................................................................... 83 4.1.3. Zmiany przy tworzeniu aplikacji sterowanych AJAX-em .......................... 85 4.2. Integrowanie AJAX-a w ramach platformy .......................................................... 88 4.3. Język JavaScript jako podstawowy język programowania ..................................... 89 4.4. Problemy wynikające ze stosowania nowego paradygmatu programowania ....... 91 4.5. Zalety stosowania bibliotek .................................................................................. 92 4.6. Przyczyny tworzenia własnych bibliotek .............................................................. 93 4.7. Jak oprogramowanie o otwartym dostępie do kodu źródłowego wpasowuje się w zestaw narzędzi? ................................................................................................ 94 4.7.1. Ocena bibliotek o otwartym dostępie do kodu źródłowego ........................ 94 4.7.2. Biblioteki o otwartym dostępie do kodu źródłowego a biblioteki komercyjne ............................................................................... 95 4.8. Przypadek użycia w dziedzinie tworzenia — licznik pobrań przeglądarki Firefox .....97 4.9. Przypadek użycia w dziedzinie pobierania — witryna intranetowa ..................... 99 4.10.Podsumowanie .................................................................................................... 100 Rozdział 5. Optymalne wykorzystywanie możliwości AJAX-a ............................ 101 5.1. Cele stosowania AJAX-a .................................................................................... 101 5.1.1. Zwiększanie interaktywności .................................................................... 102 5.1.2. Zmniejszanie czasu potrzebnego na wykonywanie operacji .................... 104 5.1.3. Zmniejszanie obciążenia łączy .................................................................. 106 5.1.4. Tworzenie bogatych aplikacji ................................................................... 107 5.2. Pomiar usprawnień .............................................................................................. 108 5.3. Wady i zalety łączenia AJAX-a z innymi nowymi technologiami ..................... 114 5.3.1. Łączenie AJAX-a z technologią Flash ...................................................... 115 5.3.2. Skalowalna grafika wektorowa (SVG) ..................................................... 115 5.3.3. Języki interfejsu użytkownika bazujące na XML-u .................................. 116 5.4. Podsumowanie .................................................................................................... 116 Rozdział 6. Porady dotyczące użyteczności ..................................................... 119 6.1. Definiowanie użyteczności ................................................................................. 119 6.2. Porady dotyczące użyteczności ........................................................................... 121 6.2.1. Pamiętaj o oczekiwaniach użytkowników ................................................ 121 6.2.2. Udostępnianie informacji o zachodzących operacjach ............................. 122 6.2.3. Pamiętanie o użytkownikach w trakcie dodawania zawartości strony ..... 122 6.2.4. Zachowanie możliwości cofnięcia operacji .............................................. 123 6.2.5. Określenie, czy programista tworzy aplikację czy witrynę internetową ......123 Spis treści 5 6.2.6. Stosowanie AJAX-a tylko wtedy, kiedy przynosi to optymalne efekty ... 123 6.2.7. Plan dla użytkowników, których przeglądarki nie obsługują obiektów XMLHttpRequest ................................................ 124 6.3. Często spotykane problemy z użytecznością ...................................................... 124 6.3.1. Odciąganie uwagi przez komunikaty o sprawdzaniu poprawności .......... 124 6.3.2. Uniemożliwienie cofania operacji w wyniku automatycznego zapisywania ................................................... 127 6.3.3. Aktualizowanie fragmentów strony bez zwracania na to uwagi użytkownika .............................................................................................. 128 6.3.4. Problemy z tworzeniem zakładek przy używaniu AJAX-a do wczytywania całych stron ..................................................................... 130 6.3.5. Wymaganie obsługi AJAX-a na witrynie sklepu internetowego .............. 131 6.4. Podsumowanie .................................................................................................... 132 Rozdział 7. Wskazówki dotyczące diagnozowania ........................................... 133 7.1. Dwie strony diagnozowania ................................................................................ 133 7.2. Spojrzenie na komunikację w AJAX-ie .............................................................. 134 7.2.1. Tworzenie AJAX-owego rejestratora ....................................................... 134 7.2.2. Używanie rejestratora ................................................................................ 138 7.2.3. Firebug — rozszerzenie do diagnozowania dla przeglądarki Firefox ...... 139 7.2.4. Fiddler ....................................................................................................... 143 7.2.5. Ogólne scenariusze diagnostyczne ............................................................ 147 7.3. Narzędzia do diagnozowania kodu JavaScript .................................................... 148 7.4. Wyjątki w języku JavaScript ............................................................................... 150 7.5. Zrzuty zmiennych ............................................................................................... 152 7.6. Podsumowanie .................................................................................................... 153 Część II ..................................................................................... 155 Rozdział 8. Biblioteki używane w części II — Sarissa i scriptaculous ............... 157 8.1. Przegląd przypadków użycia .............................................................................. 157 8.2. Biblioteki używane w części II ........................................................................... 158 8.3. Sarissa ................................................................................................................. 158 8.3.1. Instalacja ................................................................................................... 159 8.3.2. Zgłaszanie żądań AJAX-a ......................................................................... 159 8.3.3. Podstawowe funkcje do obsługi XML-a ................................................... 160 8.3.4. Obsługa dokumentów DOM ..................................................................... 160 8.3.5. Używanie XPath do wyszukiwania węzłów w dokumencie ..................... 163 8.3.6. Przekształcanie danych XML za pomocą XSLT ...................................... 166 8.3.7. Porady dla programistów używających Sarissy ........................................ 169 8.4. Scriptaculous ....................................................................................................... 170 8.4.1. Instalacja ................................................................................................... 170 8.4.2. Efekty wizualne ......................................................................................... 170 8.4.3. Pary „wyświetl-ukryj” ............................................................................... 171 8.4.4. Przeciąganie .............................................................................................. 173 8.4.5. Obiekty sortowalne ................................................................................... 174 8.4.6. Suwak ........................................................................................................ 177 8.4.7. Wskazówki dla użytkowników biblioteki scriptaculous ........................... 179 8.5. Podsumowanie .................................................................................................... 180 Rozdział 9. Biblioteki używane w części II — HTML_AJAX ............................... 181 9.1. HTML_AJAX ..................................................................................................... 181 9.1.1. Instalacja ................................................................................................... 182 9.1.2. Interfejs API biblioteki HTML_AJAX dla języka JavaScript .................. 183 9.1.3. Zdalny pośrednik AJAX-a ........................................................................ 189 6 Spis treści 9.1.4. Korzystanie z klasy HTML_AJAX_Action .............................................. 192 9.1.5. Działania języka JavaScript ...................................................................... 193 9.1.6. Metody narzędziowe dla języka JavaScript .............................................. 195 9.1.7. Metody narzędziowe dla języka PHP ....................................................... 196 9.1.8. Wskazówki dotyczące korzystania z HTML_AJAX ................................ 197 9.2. Podsumowanie .................................................................................................... 197 Rozdział 10. Przyspieszanie wyświetlania danych .............................................. 199 10.1.Wprowadzenie do przeglądarki wschodów i zachodów słońca .......................... 199 10.2.Tworzenie przeglądarki wschodów i zachodów słońca bez AJAX-a ................. 200 10.2.1. Klasa SunRiseSet .................................................................................... 203 10.2.2. Plik Graph.php ........................................................................................ 208 10.2.3. Plik Standard.php .................................................................................... 208 10.3.Problemy z przeglądarką bez AJAX-a ................................................................ 212 10.4.Usprawnianie przeglądania za pomocą AJAX-a ................................................ 212 10.4.1. Przeglądarka w wersji HTML usprawniona pod kątem AJAX-a ........... 214 10.4.2. Skrypt PHP przeglądarki zmodyfikowany po kątem AJAX-a ................ 218 10.5.Podsumowanie .................................................................................................... 225 Rozdział 11. Logowanie do blogu przy użyciu AJAX-a ......................................... 227 11.1.Dlaczego AJAX dobrze nadaje się do obsługi logowania? ................................ 227 11.2.Tworzenie systemu logowania bazującego na AJAX-ie ..................................... 228 11.3.Rozbudowywanie formularza logowania ............................................................ 233 11.4.Używanie formatu XML do tworzenia AJAX-owego logowania do systemu komentarzy ....................................................................................... 238 11.5.Podsumowanie .................................................................................................... 245 Rozdział 12. Budowanie systemu sygnalizowania błędów .................................. 247 12.1.System sygnalizowania błędów .......................................................................... 247 12.2.Skala zależności od AJAX-a ............................................................................... 249 12.3.Tworzenie zaplecza ............................................................................................. 250 12.4.Eksportowanie zaplecza ...................................................................................... 256 12.5.Tworzenie aplikacji bazującej na języku JavaScript ........................................... 261 12.6.Komponent do logowania ................................................................................... 271 12.7.Komponent do rejestracji użytkowników ........................................................... 276 12.8.Komponent do edycji kont .................................................................................. 279 12.9.Komponent do tworzenia zgłoszeń ..................................................................... 281 12.10. Komponent do edycji zgłoszeń ........................................................................... 283 12.11. Komponent „moje zgłoszenia” ........................................................................... 288 12.12. Komponent do przypisywania zgłoszeń ............................................................. 293 12.13. Zagadnienia związane z bezpieczeństwem w aplikacjach AJAX-owych ........... 297 12.14. Porównywanie aplikacji sterowanych AJAX-em ze standardowym modelem MVC .................................................................................................... 298 12.15. Podsumowanie .................................................................................................... 299 Dodatki ..................................................................................... 301 Dodatek A Biblioteki AJAX-a dla języka JavaScript ......................................... 303 Dodatek B Biblioteki AJAX-a z warstwami serwera ......................................... 309 Dodatek C Biblioteki dla DHTML JavaScript ................................................... 317 Skorowidz ....................................................................................................... 323 Rozdział 5. Optymalne wykorzystywanie możliwości AJAX-a AJAX daje mnóstwo nowych możliwości, jednak aby osiągnąć korzyści, trzeba skon- centrować się na głównych celach. W rozdziale opisuję pewne ogólne cele, które pro- gramiści sobie stawiają, stosując AJAX-a, a także pokazuję, jak sprawdzić, czy udało się zrealizować zamierzenia. Z tym zagadnieniem wiąże się także określanie, w jaki sposób postawione cele pozwalają usprawnić bieżące aplikacje. Jest to możliwe po- przez porównanie programu sieciowego utworzonego za pomocą zwykłych technik z aplikacją bazującą na AJAX-ie. Jeśli sam AJAX nie spełnia wszystkich wymagań, trzeba czasem zgodzić się na pewne ustępstwa i zastosować go wraz z innymi tech- nologiami. Bierzmy się do pracy! 5.1. Cele stosowania AJAX-a Pierwszym i najważniejszym celem stosowania AJAX-a jest poprawa komfortu pracy użytkownika. Usprawnienia w tej dziedzinie można podzielić na dwie kategorie: uła- twienie wykonywania aktualnych zadań oraz umożliwienie przeprowadzania wcześniej nieobsługiwanych operacji. Oczywiście łatwiej jest skoncentrować się na ułatwianiu bieżących zadań. W obszarze programowania aplikacji sieciowych można podzielić tę kategorię na dwie dalsze grupy: zwiększanie interaktywności i zmniejszanie czasu po- trzebnego na wykonanie zadania. Jeśli aplikacja ma działać poza intranetem, ważny może być też techniczny cel w postaci zmniejszenia obciążenia łączy. Przesyłając do przeglądarki mniejsze ilości danych, można skrócić czas wczytywania stron i poprawić ogólny komfort pracy użytkowników. 102 Rozdział 5. ♦ Optymalne wykorzystywanie możliwości AJAX-a 5.1.1. Zwiększanie interaktywności Jednym z ogólnych celów dodawania dowolnej ilości kodu JavaScript do witryny in- ternetowej jest zwiększenie jej interaktywności. Nawet bez AJAX-a można udostęp- niać informacje związane z treścią, kiedy użytkownik umieści kursor myszy nad od- nośnikiem, lub sprawdzić poprawność formularza bez konieczności odświeżania strony. Dodatkowa interaktywność pozwala przekazać więcej informacji bez jednoczesnego przytłaczania użytkowników danymi. Za pomocą AJAX-a można bazować na ogól- nym procesie udostępniania danych, zamiast koncentrować się na dodawaniu jedynie następnych statycznych informacji. Inaczej mówiąc — można wyświetlać dodatkowe dane dynamicznie. Dobry przykład zwiększania interaktywności za pomocą AJAX-a to dodanie funkcji wyszukiwania w czasie rzeczywistym do standardowego formularza wyszukiwania na witrynie internetowej. Jedna z takich aplikacji to Google Suggest (www.google.com/ webhp?complete=1 hl=en), która sugeruje możliwe wyrażenia za pomocą listy roz- wijanej wyświetlanej w trakcie wpisywania zapytania. Lista ta zawiera także liczbę wyników wyszukiwania powiązanych z danym wyrażeniem. Na rysunku 5.1 przedsta- wione jest wyszukiwanie w Google Suggest pojęcia „AJAX”. Podobnej techniki można użyć w dowolnej aplikacji wyszukującej informacji. Zastosowania tego mechanizmu są bardzo szerokie — od wyboru użytkownika, dla którego należy zmienić uprawnienia, po wybór docelowego miasta dla danej przesyłki. Rysunek 5.1. Używanie strony Google Suggest do wyszukiwania pojęcia AJAX 5.1. Cele stosowania AJAX-a 103 Można także użyć AJAX-a do zwiększenia interaktywności strony w inny sposób, niż usprawniając wyszukiwanie. Jedną z możliwości jest zastosowanie paska przewijania do poruszania się po stronie z wynikami, zamiast udostępniania sieciowej techniki w postaci odnośników do następnej strony. AJAX działa dobrze dla elementów tego typu, ponieważ dane są pobierane wtedy, kiedy są potrzebne (podobnie jak w przypadku zwykłych tabel), ale dostęp do następnych wierszy jest dużo szybszy. Rysunek 5.2 przedstawia standardową kontrolkę do przełączania stron, podczas gdy na rysunku 5.3 widać tabelę z paskiem przewijania AJAX-a. Strona widoczna na rysunku 5.3 umoż- liwia także sortowanie kolumn bez konieczności wczytywania strony. Ponadto do tabeli można dodać filtry bazujące na AJAX-ie, co pozwala przeglądać dane w szybki i na- turalny sposób. Rysunek 5.2. Standardowa kontrolka do przełączania stron na witrynie internetowej. Każdy odnośnik powoduje ponowne odświeżenie strony AJAX otwiera wiele nowych możliwości zwiększania interaktywności, ponieważ w razie potrzeby można wczytać i wyświetlić dodatkowe dane. Jest to szczególnie przydatne w zbiorach danych średniego rozmiaru, ponieważ można wtedy wyświetlać wszystkie informacje bez zwiększania czasu wczytywania oryginalnej strony lub potrzeby po- nownego odświeżenia w celu wyświetlenia danych. Największy problem ze zwiększa- niem interaktywności polega na tym, że trudno jest ją zmierzyć, dlatego jej zwiększenie jest najbardziej przydatne przy okazji zajmowania się drugim celem — zmniejszaniem czasu potrzebnego na wykonywanie operacji. 104 Rozdział 5. ♦ Optymalne wykorzystywanie możliwości AJAX-a Rysunek 5.3. Bazująca na AJAX-ie przewijana tabela, w której dane są wczytywane w wyniku przeciągnięcia paska przewijania 5.1.2. Zmniejszanie czasu potrzebnego na wykonywanie operacji Jedną z największych wad aplikacji sieciowych jest to, że każdy wieloetapowy proces trwa przez wiele minut. W przypadku szybkiego połączenia każde odświeżenie strony to dwie do pięciu sekund samego oczekiwania na wygenerowanie nowej strony i po- branie jej przez przeglądarkę, a jeśli łącze jest wolne, czas ten może być dwu- lub trzykrotnie dłuższy. Używanie AJAX-a do pobierania nowych danych pozwala unik- nąć odświeżania stron, co umożliwia płynną pracę z krótkimi jedno- lub dwusekundo- wymi okresami oczekiwania na pobranie dodatkowych danych. AJAX umożliwia skrócenie czasu trwania procesów także w wielu innych sytuacjach. Obejmują one wykonywanie zadań w wieloetapowych kreatorach czy przeglądanie oraz aktualizowanie danych dostępnych w internecie. Po wykryciu operacji, która zaj- muje dużo czasu — może to być na przykład moderowanie forum pomocy technicz- nej — należy poszukać konkretnych najdłuższych zadań. W przypadku moderowania forum problem polega na tym, że każde odświeżenie strony zajmuje dużo czasu, po- nieważ moderator może wyświetlać 20, a nawet 100 wiadomości jednocześnie. Mody- fikowanie wiadomości wymaga jednego odświeżenia w celu rozpoczęcia edycji oraz 5.1. Cele stosowania AJAX-a 105 drugiego, aby zapisać zmiany. Jest to proces kosztowny. Inne zadania, takie jak prze- noszenie wiadomości, także wymagają dużo czasu, ponieważ po każdym odświeżeniu strony moderator może zostać przeniesiony w inne miejsce na liście wiadomości. Wyobraź sobie system rezerwowania sal konferencyjnych w dużej korporacji. Po wy- braniu sali trzeba znaleźć każdego uczestnika zebrania i dodać go do listy, aby można wysłać mu wiadomość z powiadomieniem o spotkaniu. Ponieważ korporacja zatrud- nia ponad 100 pracowników, używanie listy rozwijanej z nazwiskami nie jest dobrym rozwiązaniem. Jej użycie znacznie zwiększyłoby czas wczytywania strony, ponieważ trzeba wstępnie pobrać duże ilości danych. Ponadto niezwykle długa lista byłaby tak- że nieporęczna w użyciu. Rozwiązanie problemu z wybieraniem osób z czasów sprzed wprowadzenia AJAX-a polegało na dodaniu systemu wyszukiwania, który pozwalał znaleźć każdego pracowni- ka. Taki system można nawet wyświetlać w oknie wyskakującym, aby zmniejszyć ilość odświeżanych danych, jednak niezależnie od zastosowanej techniki dodanie każdej osoby wymaga od 5 do 30 sekund. Ten niewygodny interfejs nie stanowi problemu, jeśli trzeba dodać jedną lub dwie osoby, jednak staje się nie do przyjęcia przy doda- waniu 20 lub więcej pracowników. Podejście bazujące na AJAX-ie pozwala na wyszu- kiwanie w czasie rzeczywistym. Interfejs może wyglądać podobnie jak Google Suggest na rysunku 5.1 i wyświetlać nazwiska pracowników zamiast szukanych pojęć. W tym przypadku dzięki zastosowaniu AJAX-a dodanie 20 pracowników zajmie minutę za- miast pięciu. Za pomocą AJAX-a można przyspieszyć proces, dodając możliwość edycji w miejscu i używając techniki przeciągania do przenoszenia wiadomości. Edycja w miejscu wy- maga utworzenia pola tekstowego bez odświeżania strony. Ponieważ treść jest już wi- doczna, nie trzeba przesyłać żądania na serwer w celu rozpoczęcia edycji. Po zakoń- czeniu pracy zmiany są zapisywane w niewidoczny sposób, kiedy użytkownik przejdzie do następnej wiadomości. Na rysunku 5.4 widać przykład zastosowania techniki edycji w miejscu. Przenoszenie wiadomości za pomocą przeciągania także pozwala zaoszczę- dzić wiele czasu, ponieważ dużo łatwiej jest zobaczyć docelową lokalizację na zwy- kłej stronie z wiadomościami niż na liście ich tytułów, z której trzeba korzystać, jeśli nie można użyć AJAX-a. Jedną z przyczyn, dla których skrócenie czasu wykonywania zadań do doskonały cel przy dodawaniu AJAX-a, jest to, że bardzo łatwo je zmierzyć. Wystarczy usiąść i wy- konać wybrane operacje, zliczając ilość czasu, jaki zajmują. W przypadku niektórych zadań można nawet dodać do aplikacji zegary i zarejestrować dane w trakcie normalne- go użytkowania programu. Po uzyskaniu wyjściowych liczb można określić specyficzne miejsce wdrożenia AJAX-a. W połączeniu z dalszymi testami po dodaniu AJAX-a można uzyskać dane pozwalające ocenić wartość rozszerzeń. Dzięki praktycznym i po- wtarzalnym pomiarom ocena efektywności AJAX-a nie polega na zgadywaniu, a na prostych obliczeniach. Można nawet użyć miar czasu wykonywania zadań do uspraw- nienia AJAX-a i zmienić stosowane techniki lub dodać wstępne pobieranie, aby skrócić dany proces. 106 Rozdział 5. ♦ Optymalne wykorzystywanie możliwości AJAX-a Rysunek 5.4. Edycja w miejscu 5.1.3. Zmniejszanie obciążenia łączy W niektórych zastosowaniach AJAX-a użytecznym celem może być zmniejszenie ob- ciążenia łączy, ponieważ mniejsza ilość danych wymaga krótszego przesyłania, co pro- wadzi do bardziej płynnej pracy użytkowników. Jeśli musisz płacić za hosting, zmniej- szenie obciążenia łączy może być także skutecznym sposobem na zaoszczędzenie pieniędzy. Jednak jeśli korzystasz z aplikacji w sieci wewnętrznej, ten cel może być nieistotny, ponieważ w przypadku szybkich sieci czas wczytywania jest niski nieza- leżnie od ilości przesyłanych danych. Pomiar obciążenia łączy jest prosty. Zawsze lepiej jest używać odpowiednich pomiarów niż subiektywnych ocen. Oczywiście w przeciwieństwie do czasów wykonywania za- dań obciążenie łączy nie wyraża się liczbą, którą zawsze warto zmniejszyć. Ograni- czenie ilości przesyłanych danych w trakcie wczytywania wyjściowej strony może być użyteczne, zwłaszcza jeśli dane są rzadko używane lub można je łatwo pobrać w razie potrzeby. Jednak w niektórych sytuacjach największy komfort pracy użytkownik może zapewnić, pobierając wstępnie dane i zwiększając ogólne obciążenie łączy. Dane można wstępnie pobierać bezpośrednio, w trakcie wczytywania początkowej strony, lub za pomocą wywołań AJAX-a. Można jednak zauważyć, że jeśli dane nie są potrzebne natychmiast, korzystniejsze jest stosowanie AJAX-a. Wstępne pobiera- nie przy użyciu AJAX-a może mieć miejsce po załadowaniu strony, co sprawia, że pro- ces ten jest mniej zauważalny dla użytkowników. Wczytywanie danych można także powiązać z rozpoczęciem wykonywania zadania, które ich wymaga. Jest to szczegól- nie istotne w przypadku przeglądania dużych zbiorów danych, ponieważ użytkownicy korzystają z nich zwykle według spójnych wzorców, które można wykryć, monitorując zachowania osób korzystających z aplikacji. 5.1. Cele stosowania AJAX-a 107 AJAX nie gwarantuje spadku obciążenia łączy, a w niektórych wzorcach prowadzi nawet do wzrostu ilości przesyłanych danych. Jest to szczególnie widoczne przy ob- słudze żądań AJAX-a sterowanych zdarzeniami. Każde pojedyncze żądanie może być małe, jednak sprawdzanie wszystkich wciśnięć klawiszy może szybko spowodować duże obciążenie. Te efekty można złagodzić, ograniczając liczbę zdarzeń do jednego w danym okresie, jednak z czasem obciążenie i tak wzrośnie. Celem powinno być zminimalizowanie wielkości każdego żądania, a jednocześnie należy pamiętać, że uzyskane w ten sposób zmniejszenie obciążenia może nie mieć znaczenia z powodu większej częstotliwości żądań i wstępnego pobierania danych, co pozwala na utwo- rzenie wysoce interaktywnego interfejsu. 5.1.4. Tworzenie bogatych aplikacji Trzy pierwsze cele dotyczyły głównie usprawniania istniejących aplikacji sieciowych, jednak AJAX umożliwia także tworzenie programów sieciowych o zupełnie nowej jakości. W trakcie tworzenia bogatych aplikacji programiści mają na celu jak najwięk- sze upodobnienie ich do programów stacjonarnych przy zachowaniu zalet aplikacji sieciowych w zakresie łatwości wdrażania i implementacji. Ponadto tworzenie bogatych aplikacji ma prowadzić do zwiększenia interaktywności programów i zmniejszenia czasu potrzebnego na wykonywanie operacji, choć projekty i techniki prowadzące do speł- nienia tych zamierzeń mogą być różne. Ponieważ w tym przypadku nie rozwiązujemy problemów z powolnymi fragmentami istniejącego programu, nie ma wyjściowych pomiarów szybkości działania standar- dowej aplikacji sieciowej. Z tego powodu trzeba porównać funkcjonowanie utworzo- nego programu z jego stacjonarnym odpowiednikiem. Może to być trudne, ponieważ aplikacje stacjonarne używają dużych, trwałych magazynów danych w celu zmniejsze- nia liczby wolnych interakcji, podczas gdy aplikacje AJAX-owe są ograniczone do korzystania z mniejszych buforów bazujących na sesji. W zależności od ilości danych potrzebnych do wykonania zadania osiągnięcie wyników porównywalnych ze stacjo- narnymi programami może być niemożliwe, dlatego trzeba skoncentrować się na in- nych wzorcach użycia, które pozwolą ukryć problem. Najłatwiej jest naśladować te aplikacje stacjonarne, które obsługują duże zbiory danych przechowywane poza lokal- nym programem klienckim. Ponieważ czas dostępu do baz danych jest podobny w obu typach programów, aplikacje sieciowe muszą współzawodniczyć jedynie w zakresie jakości interfejsu użytkownika. Wiele bogatych aplikacji powoduje większe obciążenie łączy niż ich odpowiedniki w postaci standardowych programów sieciowych. Wynika to z szerokiego stosowania wstępnie pobranych danych, co pozwala zapewnić płynną pracę. Powoduje to, że bogate aplikacje najlepiej nadają się do zastosowań w środowiskach wewnętrznych, w których szybka sieć i brak opłat za przesył danych pozwalają pominąć cel w postaci zmniejszenia obciążenia łączy. Nie należy pochopnie decydować się na tworzenie bogatej aplikacji zamiast rozbudo- wanej witryny internetowej. Bogate aplikacje działają najlepiej, kiedy mają wykony- wać operacje zwykle znane ze stacjonarnych programów. Klienty pocztowe, czytniki RSS i aplikacje generujące raporty to dobre przykłady stacjonarnych aplikacji, które 108 Rozdział 5. ♦ Optymalne wykorzystywanie możliwości AJAX-a łatwo jest naśladować. Jednocześnie usługi zwykle udostępniane przez witryny inter- netowe, na przykład zakupy w sklepie internetowym czy wyświetlanie informacji o pro- duktach, nie przekładają się dobrze na bogate aplikacje. Te zadania lepiej jest udostęp- niać poprzez rozbudowane witryny internetowe, w których wolne, złożone operacja można zastąpić ich AJAX-owymi wersjami. 5.2. Pomiar usprawnień Czas wykonywania zadania to jedna z najbardziej przydatnych miar przy ocenie po- wodzenia wdrożenia AJAX-a. Sam proces pomiaru można rozbić na trzy proste etapy: 1. Określenie punktu początkowego i końcowego zadania. 2. Dodanie narzędzi do pomiaru czasu rozpoczynania i kończenia operacji. 3. Połączenie wielu danych w przydatne informacje. Określenie, jakie zadanie mierzyć, to zwykle prosty proces. Trzeba jedynie wykryć obszary w aplikacji, na które użytkownicy wciąż narzekają. Jeśli proces jest powolny i niewygodny, jest dobrym kandydatem na przeprowadzenie pomiarów i zastosowanie w nim AJAX-a. Po wyborze zadania należy określić jego punkty początkowy i koń- cowy. Ważne jest, aby zmierzyć cały proces. Nie należy koncentrować się na pobie- raniu strony lub elementach technicznych, ale na operacjach wykonywanych przez użytkownika. Jeśli proces jest złożony, przydatne może być obserwowanie osób w celu zobaczenia, jak wykonują zadania. Po wyznaczeniu punktów początkowego i końcowego trzeba dodać oprzyrządowanie. W większości przypadków można dokonać pomiaru przy użyciu prostych żądań AJAX-a kierowanych do rejestrującego skryptu. Jedno wywołanie oznacza początek procesu, a drugie — koniec. Przykładowy program rejestruje czas potrzebny na wybór użyt- kownika, którego dane mają być zmodyfikowane, co przedstawia rysunek 5.5. Ten przy- kład jest sztuczny, ale użyteczny, ponieważ pozwala pokazać, jak dodać oprzyrządo- wanie do procesu, a nie jak utworzyć edytor użytkowników w AJAX-ie. Rysunek 5.5. Wybór użytkownika 5.2. Pomiar usprawnień 109 Zadanie podzielone jest na następujące fragmenty: wczytanie strony, wyszukanie danej osoby i wybór użytkownika spośród wyników. Operacja rozpoczyna się w momencie wczytania strony lub kliknięcia przycisku Znajdź użytkownika. W tym przypadku uży- wamy kliknięcia przycisku, ponieważ pomaga to zmniejszyć wariancję pomiarów. Pro- ces kończy się wraz z uruchomieniem funkcji selectUser języka JavaScript. W samym kodzie ta funkcja albo otwiera edytor użytkownika, albo zapełnia formularz służący do wprowadzania zmian, który znajduje się pod panelem wyboru. Trzeba także utwo- rzyć niepowtarzalny identyfikator, dzięki czemu można dopasować do siebie czas po- czątkowy i końcowy, jednak jeśli klient zgłasza tylko jedno żądanie naraz, identyfikator można utworzyć i zapisać w skrypcie przechowującym dane. Do dodawania oprzyrządowania posłuży prosta nakładka HttpClient na obiekty XMLHttpRequest. Program będzie wykonywał na początku i na końcu procesu wywo- łania AJAX-a do strony process.php. Ta strona zapisuje czas rozpoczęcia w sesji, a następnie funkcja endProcess z tego pliku dopasowuje go do drugiego wywołania zgłaszanego po zakończeniu procesu. Można wyświetlić prosty raport (rysunek 5.6), aby zobaczyć, jak długo trwała każda operacja wyboru użytkownika. W tym rozwią- zaniu magazyn danych jest bardzo prosty i warto zastąpić go bazą danych, jeśli dane mają pochodzić z różnych komputerów. Rysunek 5.6. Prosty raport z długościami czasu wyboru użytkownika Niektóre fragmenty procesu pomiaru można wykorzystać wielokrotnie: przechowujący dane skrypt z pliku process.php (listing 5.1) i klasę Monitor języka JavaScript (listing 5.2). Listing 5.1. Plik process.php 1 ?php 2 session_start(); 3 4 if (!isset($_SESSION[ data ])) { 5 $_SESSION[ data ] = array(); 6 } 7 if (!isset($_SESSION[ id ])) { 8 $_SESSION[ id ] = false; 9 } 10 11 12 function startProcess() { 13 if (!$_SESSION[ id ]) { 14 $now = time(); 110 Rozdział 5. ♦ Optymalne wykorzystywanie możliwości AJAX-a 15 $id = uniqid( m ); 16 $_SESSION[ id ] = $id; 17 $_SESSION[ data ][$id][ start ] = $now; 18 $_SESSION[ data ][$id][ name ] = $_GET[ process ]; 19 } 20 } 21 22 function endProcess() { 23 $now = time(); 24 $_SESSION[ data ][$_SESSION[ id ]][ end ] = $now; 25 $_SESSION[ id ] = false; 26 } 27 28 function printStats() { 29 echo table border=1 tr th Nazwa /th th Czas rozpoczęcia /th 30 th Czas działania (w sekundach) /th /tr ; 31 foreach($_SESSION[ data ] as $process) { 32 echo tr td $process[name] /td td . 33 date( Y-m-d H:i:s ,$process[ start ]) . 34 /td td ; 35 if (isset($process[ end ])) { 36 echo ($process[ end ] - $process[ start ]); 37 } 38 echo /td /tr ; 39 } 40 echo /table ; 41 } 42 43 switch($_GET[ action ]) { 44 case start : 45 startProcess(); 46 break; 47 case end : 48 endProcess(); 49 break; 50 case data : 51 printStats(); 52 break; 53 } 54 ? Kod pokazany na listingu 5.1 wykorzystuje sesję PHP do przechowywania danych, dlatego skrypt rozpoczyna się od jej konfiguracji. Program otwiera sesję w wierszu 2., a następnie ustawia pewne domyślne wartości w wierszach 4 – 9. W wierszach 12 – 41 znajduje się definicja trzech funkcji — po jednej dla każdej operacji, jaką wykonuje skrypt. Funkcja startProcess (wiersze 12 – 20) najpierw sprawdza, czy w sesji zapisa- ny jest bieżący identyfikator. Ten test pozwala zignorować wielokrotne żądania rozpo- częcia tego samego procesu. Jeśli tego identyfikatora nie ma, funkcja startProcess zapisuje bieżący czas, tworzy nowy identyfikator losowy, a następnie umieszcza te dane w sesji wraz z nazwą procesu. Funkcja endProcess (wiersze 22 – 26) zapisuje czas koń- cowy, a następnie usuwa identyfikator, aby umożliwić rozpoczęcie następnego procesu. Te dwie funkcje obsługują podstawową funkcjonalność pobierania czasu. 5.2. Pomiar usprawnień 111 Trzecia funkcja, printStats (wiersze 28 – 41), tworzy tabelę z prostym raportem. Ta funkcja przechodzi w pętli po danych zapisanych w sesji i tworzy tabelę w kodzie HTML. W trakcie tej operacji używa czasu początkowego i końcowego do obliczenia długości każdego procesu. Na rysunku 5.6 przedstawione są dane wyjściowe tej funk- cji. Wiersze 43 – 53 określają, która z tych funkcji zostanie wykonana. To, która funkcja zostanie wywołana, zależy od wartości zmiennej action żądania GET. Po stronie HTML służący do monitorowania kod JavaScript (listing 5.2) zgłasza żądania AJAX-a do strony process.php w celu zapisania danych na temat użytkowania aplikacji. Listing 5.2. Plik Monitor.js 1 // Klasa do monitorowania czasu wykonywania operacji przez użytkowników 2 3 function Monitor() { 4 this.httpclient = new HttpClient(); 5 this.httpclient.isAsync = true; 6 this.httpclient.callback = function() {}; 7 } 8 Monitor.prototype = { 9 startProcess: function(name) { 10 this.httpclient.makeRequest( 11 process.php?action=start process= +name); 12 }, 13 endProcess: function(name) { 14 this.httpclient.makeRequest( 15 process.php?action=end process= +name); } 17 } 16 Klasa do monitorowania jest dość prosta. Konstruktor (wiersze 3 – 7) tworzy egzemplarz nakładki HttpClient do wykonywania operacji asynchronicznych, a następnie definicje dwóch funkcji. Pierwsza z nich, startProcess, wysyła do strony process.php żądanie wyzwalające funkcję startProcess z tego pliku. Druga funkcja, endProcess (wiersze 13 – 16), wysyła do strony process.php podobne żądanie, jednak tym razem żądanie AJAX-a wywołuje powiązaną funkcję endProcess języka PHP. Główne zadanie tej klasy to ułatwienie dodania oprzyrządowania do stron aplikacji, dlatego zawiera kod szablonowy, dzięki czemu programista nie musi go pisać. Jest to także dobre miejsce na dodanie nowych metod, jeśli potrzebne jest pobieranie innych danych, na przykład rejestrowanie tego, jakie operacje wykonał użytkownik. Teraz, kiedy podstawowa platforma narzędzi jest już skonfigurowana pod kątem rejestro- wania czasu procesów, trzeba dodać ją do skryptu. W przypadku stron AJAX-owych informacje o czasach wykonywania zadań mogą być przydatne do pobierania danych wygenerowanych w wyniku wprowadzenia określonych zmian. Te dane mogą być także wartościowe na stronach bez AJAX-a, gdzie pomagają w pomiarze wolnych pro- cesów i wykryciu tych, które należy usprawnić. Pobieranie danych w taki sposób może być także pomocne w podejmowaniu decyzji o tym, które dane program ma wstępnie pobierać, jednak zwykle potrzebnych jest więcej informacji niż sam czas, ponieważ trzeba sprawdzić, jakie operacje użytkownicy wykonują najczęściej. Listing 5.3 przed- stawia prosty skrypt do wybierania użytkowników, który wykorzystuje klasę Monitor języka JavaScript z listingu 5.2 do rejestrowania czasu każdego wyboru. 112 Rozdział 5. ♦ Optymalne wykorzystywanie możliwości AJAX-a Listing 5.3. Strona selectUser.class.php 1 ?php 2 /** 3 * Przykładowa klasa, która wyszukuje użytkownika w tablicy. 4 * W większości przypadków takie klasy przeszukują bazę danych. 5 */ 6 class selectUser { 7 8 var $users = array( 9 1 = Joshua Eichorn , 10 2 = Travis Swicegood , 11 3 = Inna osoba 1 , 12 4 = Inna osoba 2 , 13 ); 14 15 function search($input) { 16 $ret = array(); 17 18 foreach($this- users as $key = $name) { 19 if (stristr($name,$input)) { 20 $ret[$key] = $name; 21 } 22 } 23 return $ret; 24 } 25 } 26 ? Samo wyszukiwanie odbywa się w klasie powiązanej, selectUser. Skrypt przeszukuje tablicę, aby przykład był jak najbardziej prosty, jednak w większości przypadków proces ten wymagałby korzystania z bazy danych. Przedstawiona klasa ma jedną meto- dę, search (wiersze 15 – 24), która przyjmuje dane wejściowe. Metoda ta sprawdza, nieuwzględniając wielkości znaków, czy podana nazwa znajduje się w tablicy użytkow- ników przechowywanej w klasie. Na zakończenie metoda tworzy tablicę na podstawie dopasowanych wyników i zwraca ją. Listing 5.4 przedstawia interfejs użytkownika w kodzie HTML. Strona ta do obsługi kierowanych do niej żądań POST używa klasy selectUser. Listing 5.4. Plik selectUser.php 1 html 2 head 3 title Wybieranie użytkowników (bez AJAX-a) /title 4 5 6 script type= text/javascript src= HttpClient.js /script 7 script type= text/javascript src= Monitor.js /script 8 script type= text/javascript 9 var monitor = new Monitor(); 10 function selectUser(el) { 11 alert( Wybrano użytkownika o ID: +el.value); 12 monitor.endProcess( Select User ); 13 } 14 /script 5.2. Pomiar usprawnień 113 15 /head 16 body 17 18 div id= HttpClientStatus /div 19 20 h1 Wybierz użytkownika /h1 21 22 form action= selectUser.php method= post 23 input name= name onclick= monitor.startProcess( Select User ) 24 input type= submit value= Znajdź użytkownika 25 /form 26 27 ?php 28 require_once selectUser.class.php ; 29 30 if (isset($_POST[ name ]) !empty($_POST[ name ])) { 31 $users = new selectUser(); 32 $results = $users- search($_POST[ name ]); 33 34 foreach($results as $key = $val) { 35 echo input type= radio name= user value= $key . 36 id= user_$key onclick= selectUser(this) . 37 label for= user_$key $val /label br ; 38 } 39 } 40? Skrypt rozpoczyna się od prostej konfiguracji. Następnie, w wierszu 6., dołączana jest nakładka na obiekty XMLHttpRequest, a w wierszu 7. — klasa Monitor języka JavaScript. Kod w wierszu 9. tworzy egzemplarz klasy Monitor, dzięki czemu można łatwo wywo- ływać funkcje startProcess i endProcess w całym kodzie strony. W wierszach 10 – 13 znajduje się definicja funkcji języka JavaScript wywoływana na zakończenie procesu wybierania użytkownika. Ta funkcja wyświetla wybrany komunikat, a następnie uru- chamia funkcję endProcess. Kod w wierszach 20 – 25 to prosty interfejs użytkownika w języku HTML. Jest to formularz, który wysyła do bieżącej strony żądanie POST z wy- nikami. Wejściowe pole wyszukiwania uruchamia funkcję startProcess po kliknięciu go w celu rozpoczęcia wpisywania szukanego wyrażenia. Kod w wierszach 27 – 40 odpowiada za proces wyszukiwania po przesłaniu do strony żądania POST z formularzem. Za samo wyszukiwanie odpowiada egzemplarz klasy selectUser. Skrypt przechodzi następnie w pętli po wynikach tej operacji, tworząc przy- cisk opcji dla każdej pozycji. Do każdego z tych przycisków program dodaje akcję onclick, która wywołuje funkcję selectUser zdefiniowaną w wierszach 10 – 13. Poniższe punkty opisują przepływ żądań, a podstawowy schemat działania strony przed- stawia rysunek 5.7. 1. Użytkownik klika pole wejściowe wyszukiwania, wysyłając żądanie startProcess. 2. Użytkownik klika przycisk Wyszukiwanie użytkowników, przesyłając formularz w żądaniu POST. 114 Rozdział 5. ♦ Optymalne wykorzystywanie możliwości AJAX-a Rysunek 5.7. Przepływ strony umożliwiającej pomiar czasu wybierania użytkowników 3. Skrypt używa nazwy wysłanej w żądaniu POST do utworzenia listy przycisków opcji umożliwiających wybór określonego użytkownika. 4. Użytkownik klika przycisk opcji, zgłaszając żądanie endProcess. Pomiar czasu to istotny pierwszy etap w procesie podejmowania trafnych decyzji do- tyczących tego, jak i kiedy zaimplementować AJAX-a. Jeśli można już szybko wybie- rać użytkowników, nie ma sensu usprawniać tej operacji poprzez dodawanie AJAX-a. W zamian warto zająć się innym procesem. Jeśli mierzona operacja jest powolna, moż- na utworzyć wersję z AJAX-em zawierającą oprzyrządowanie, a następnie dokonać pomiarów efektywności zmian. Może się okazać, że wersja formularza z AJAX-em nie pozwala w wystarczającym stopniu zwiększyć szybkości, ponieważ wyszukiwanie według nazw nie skaluje się względem liczby użytkowników systemu. Najlepsze wy- niki może dać ograniczenie wyników wyszukiwania według określonych kryteriów, na przykład według wydziału lub stanowiska. 5.3. Wady i zalety łączenia AJAX-a z innymi nowymi technologiami Korzystając z AJAX-a, można natrafić na powiązane technologie, które mogą z nim współdziałać. Dzielą się one na dwie główne kategorie: dojrzałe technologie dostępne w wielu współczesnych przeglądarkach oraz nowe technologie obsługiwane tylko w niektórych z nich. Technologie dojrzałe obejmują Javę i Flasha. Flash jest najbar- dziej istotny, ponieważ wtyczka tej technologii jest szeroko instalowana, a jej budowa jest zoptymalizowana pod kątem umieszczania interaktywnych elementów i animacji na witrynach internetowych. Także Javy można używać do zwiększania interaktywno- ści witryn, jednak jej popularność zmalała w ciągu pięciu ostatnich lat, a platforma ta nie jest już domyślnie instalowana na każdej maszynie. 5.3. Wady i zalety łączenia AJAX-a z innymi nowymi technologiami 115 5.3.1. Łączenie AJAX-a z technologią Flash Flash to dobra technologia towarzysząca technikom AJAX-a, ponieważ pozwala ko- rzystać z różnych funkcji niedostępnych w czystym języku JavaScript. Obejmują one płótno, na którym można dodawać obrazy i przemieszczać je, a także interfejs API pozwalający na rysowanie grafiki. Ponadto Flash umożliwia strumieniowanie wideo i dźwięku oraz obsługę animacji wektorowych. Największą wadą Flasha jest to, że wymaga nowego, odrębnego środowiska programistycznego, a choć możliwe jest prze- kazywanie wywołań między kodem JavaScript stron a kodem ActionScript filmu we Flashu, nie można ściśle powiązać tej technologii z resztą strony. Ponadto elementy strony we Flashu wyglądają inaczej niż pozostałe fragmenty strony HTML, co utrudnia udostępnianie spójnego wyglądu i operacji, jeśli tej technologii używa się do obsługi drobnych funkcji w obrębie większego rozwiązania. Wady Flasha — słabą integrację z językiem JavaScript oraz odmienny wygląd i styl — można przezwyciężyć, jednak powodują one, że wiele osób decyduje się na wybór rozwiązań bazujących całkowicie na tej technologii przy tworzeniu bardziej skompli- kowanych programów. Pomaga to kontrolować złożoność, jednak powoduje całkowitą zależność od jednego producenta i oznacza, że w warstwie komunikacji trzeba używać zdalnych wywołań Flasha zamiast AJAX-a. Użycie Flasha w aplikacji AJAX-owej umożliwia dodanie obsługi wielu graficznych operacji niemożliwych w innych warun- kach, jednak programista musi liczyć się z bardziej złożonym procesem projektowa- nia i diagnozowania. 5.3.2. Skalowalna grafika wektorowa (SVG) Nowe technologie w świecie przeglądarek nie są tak szeroko spopularyzowane jak Flash, a niektóre z nich, na przykład język XAML (ang. Extensible Application Markup Language) Microsoftu, doczekały się jedynie wersji beta. Mają one zalety w postaci pełnej integracji z przeglądarką, co sprawia, że można używać ich w skryptach języka JavaScript oraz jako elementów najwyższego poziomu na stronach internetowych. Ska- lowalna grafika wektorowa (ang. Scalable Vector Graphics — SVG) to nowy ustan- daryzowany przez W3C język do tworzenia grafiki wektorowej. Ma wiele tych samych funkcji co Flash i umożliwia dodawanie do stron animacji oraz interaktywnych ele- mentów graficznych. SVG pozwala uniknąć wielu problemów występujących przy korzystaniu z Flasha, ponieważ w skryptach tej technologii można używać języka Java- Script. Ponadto można zagnieżdżać takie skrypty bezpośrednio w stronach HTML i modyfikować je podobnie jak wszystkie inne elementy. Największy problem z SVG polega na tym, że obsługa tej technologii w przeglądar- kach rozwija się dość powoli. Obecnie wtyczka firmy Adobe pozwala korzystać z więk- szości funkcji SVG, jednak występują podobne problemy z integracją jak w przypadku Flasha. Następne wersje przeglądarek Firefox i Opera będą miały wbudowaną obsłu- gę SVG, jednak wciąż jest to niszowa technologia, której można używać jedynie w we- wnętrznych projektach. 116 Rozdział 5. ♦ Optymalne wykorzystywanie możliwości AJAX-a Ponadto SVG nie udostępnia płótna, dlatego nie ma sposobu na rysowanie elementów, co jest możliwe we Flashu. Aby rozwiązać ten problem, firma Apple utworzyła płótno bitmapowe dla przeglądarki Safari. To narzędzie zostało od tego czasu unormowane przez grupę WHATWG (ang. Web Hypertext Application Technology Working Group). Jest ona wspierana przez wielu producentów przeglądarek, między innymi Mozilli i Opery, dlatego w nowych wersjach tych programów znajdzie się obsługa SVG, jed- nak w przypadku przeglądarki Internet Explorer jest ona mniej pewna. 5.3.3. Języki interfejsu użytkownika bazujące na XML-u Wiele nowych technologii nie jest obsługiwanych w przeglądarkach, a języki interfej- su użytkownika bazujące na XML-u nie są tu wyjątkiem. Języki te — XUL (ang. XML User Interface Language) Mozilli i XAML — umożliwiają opis standardowych ele- mentów aplikacji (takich jak menu, paski przewijania, pola tekstowe i przyciski) za pomocą łatwych w użyciu znaczników XML. Języki bazujące na XML-u Microsoftu i Mozilli mają umożliwiać tworzenie wysoce interaktywnych bogatych aplikacji, które bez dodatkowych modyfikacji wyglądają i działają podobnie jak programy stacjonar- ne. Jednak ponieważ technologie te są obsługiwane tylko przez jednego producenta, powodują problem w postaci powiązania z określoną przeglądarką. Ta zależność znacz- nie zmniejsza atrakcyjność rozwiązania w porównaniu z bardziej zgodnymi technikami bazującymi na językach JavaScript i HTML. Język XUL został utworzony w celu definiowania interfejsu użytkownika w przeglą- darce Mozilla i był dostępny przez kilka lat. Ostatnio ma swoje pięć minut wraz ze wzrostem popularności przeglądarki Firefox, jednak nie przestanie być produktem ni- szowym dopóty, dopóki inne przeglądarki nie zaczną go obsługiwać. XAML został utwo- rzony przez Microsoft jako część projektu .NET i ma być udostępniony wraz z syste- mem Windows Vista. Trudno stwierdzić, jaki wpływ będzie miała ta technologia. Będzie można to ocenić dopiero wtedy, kiedy zostanie szeroko rozpowszechniona i kiedy znany będzie jej poziom dostępności dla programistów aplikacji sieciowych. Wzrost popularności nowych przeglądarek internetowych doprowadził do utworzenia ciekawych technologii sieciowych. Największy problem polega na tym, że obsługa większość z nich ogranicza się do jednej przeglądarki. Wraz ze wzrostem dostępności nowych technologii mogą one zacząć odgrywać większą rolę, umożliwiając zwięk- szenie interaktywności ponad poziom zapewniany przez sam AJAX i dynamiczny język HTML (DHTML). 5.4. Podsumowanie Aby optymalnie wykorzystać możliwości AJAX-a, trzeba wykryć i usprawnić obszary, w których jego zastosowanie da największe korzyści, a następnie podjąć kroki do zmie- rzenia tego efektu. AJAX-a można używać w większości projektów witryn interneto- wych, jednak najbardziej przydatny jest do przyspieszania wykonywania wyszukiwania 5.4. Podsumowanie 117 i wieloetapowych procesów. Przy rozwiązywaniu prostszych problemów dobre efekty daje wybór odpowiednich elementów AJAX-a, jednak wraz ze wzrostem złożoności warto dodać do aplikacji oprzyrządowanie i uzyskać twarde dane dotyczące zmian wywołanych przez AJAX-a. Używając tych informacji, można dostosować zastosowane podejście i rozpocząć drogę do efektywnego wykorzystania tej technologii. Ostatni etap w skutecznym korzystaniu z AJAX-a to analiza użyteczności interfejsu graficznego. Ten proces opisuję w następnym rozdziale.
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

AJAX i JavaScript. Tworzenie i optymalizacja aplikacji sieciowych
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: