Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00057 005555 13609994 na godz. na dobę w sumie
Head First Ajax. Edycja polska - książka
Head First Ajax. Edycja polska - książka
Autor: Liczba stron: 516
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-1778-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> ajax
Porównaj ceny (książka, ebook, audiobook).

Technologia AJAX (skrót od ang. Asynchronous JavaScript and XML) tchnęła nowe życie w strony internetowe. Sprawiła, że stały się one interaktywne, przyjazne w użyciu oraz dynamiczne. Dzięki niej aplikacje internetowe coraz bardziej przypominają te standardowe, znane z codziennej pracy. Jeśli jednak ogrom możliwości tej technologii wydaje Ci się trudny do opanowania -- jesteś w błędzie! Przekonaj się, że z dobrym podręcznikiem nic nie bywa trudne! 'Head First Ajax. Edycja polska' to kolejny przyjazny podręcznik z cieszącej się wielkim uznaniem Czytelników serii Head First. Znajdziesz tu nowatorskie i skuteczne techniki nauki, a przy tym dużo praktycznych informacji i humoru. Trudno wyobrazić sobie lepsze warunki do zdobywania nowej wiedzy. Dzięki tej książce dowiesz się, jak myśleć 'po ajaksowemu', obsługiwać zdarzenia, okiełznać asynchroniczność oraz wykorzystać model DOM i format JSON. Te oraz wiele innych ciekawych wiadomości, dzięki którym szybko opanujesz tajniki AJAX-a, znajdziesz właśnie w tym wyjątkowym podręczniku.

Odkryj, jak skuteczny i przyjazny może być podręcznik do nauki AJAX-a!

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

Darmowy fragment publikacji:

Head First Ajax. Edycja polska Autor: Rebecca Riordan T³umaczenie: Marcin Rogó¿ ISBN: 978-83-246-1778-4 Tytu³ orygina³u: Head First Ajax Format: 200230, stron: 516 Technologia AJAX (skrót od ang. Asynchronous JavaScript and XML) tchnê³a nowe ¿ycie w strony internetowe. Sprawi³a, ¿e sta³y siê one interaktywne, przyjazne w u¿yciu oraz dynamiczne. Dziêki niej aplikacje internetowe coraz bardziej przypominaj¹ te standardowe, znane z codziennej pracy. Jeœli jednak ogrom mo¿liwoœci tej technologii wydaje Ci siê trudny do opanowania – jesteœ w b³êdzie! Przekonaj siê, ¿e z dobrym podrêcznikiem nic nie bywa trudne! „Head First Ajax. Edycja polska” to kolejny przyjazny podrêcznik z ciesz¹cej siê wielkim uznaniem Czytelników serii Head First. Znajdziesz tu nowatorskie i skuteczne techniki nauki, a przy tym du¿o praktycznych informacji i humoru. Trudno wyobraziæ sobie lepsze warunki do zdobywania nowej wiedzy. Dziêki tej ksi¹¿ce dowiesz siê, jak myœleæ „po ajaksowemu”, obs³ugiwaæ zdarzenia, okie³znaæ asynchronicznoœæ oraz wykorzystaæ model DOM i format JSON. Te oraz wiele innych ciekawych wiadomoœci, dziêki którym szybko opanujesz tajniki AJAX-a, znajdziesz w³aœnie w tym wyj¹tkowym podrêczniku. • Przeznaczenie technologii AJAX • Skutki asynchronicznoœci ¿¹dañ w AJAX-ie • Obs³uga zdarzeñ w jêzyku JavaScript • Wykorzystanie wielu procedur dla jednego zdarzenia • Operacje na drzewie DOM • Zastosowanie frameworków oraz innych bibliotek • U¿ycie formatu XML w ¿¹daniach i odpowiedziach • Format JSON • Tworzenie formularzy i ich walidacja • ¯¹dania POST Odkryj, jak skuteczny i przyjazny mo¿e byæ podrêcznik do nauki AJAX-a! Spis treści (skrócony) Spis treści Wprowadzenie 1. Ajax — zastosowanie. Aplikacje internetowe dla nowego pokolenia 2. Projektowanie aplikacji w metodologii Ajax. Myślenie „po ajaksowemu” 3. Zdarzenia w JavaScripcie. Reagowanie na użytkowników 4. Kilka procedur obsługi zdarzeń. Dwoje to już towarzystwo 5. Aplikacje asynchroniczne. To jak odnawianie prawa jazdy 6. Obiektowy model dokumentu. Leśnictwo na stronie WWW 7. Manipulowanie DOM-em. Moje życzenie jest dla ciebie rozkazem 8. Frameworki i zestawy narzędzi. Nie ufaj nikomu 9. Żądania i odpowiedzi XML. Więcej niż mogą wyrazić słowa 10. 11. Formularze i walidacja. Powiedz to, co chciałeś powiedzieć 12. Żądania POST. Paranoja to twoja przyjaciółka A Pozostałości. Pięć najważniejszych tematów (których nie omówiliśmy) B Funkcje narzędziowe. Po prostu daj mi kod JSON. Syn JavaScriptu 21 33 73 123 169 201 255 307 351 365 399 427 465 491 503 W Spis treści (z prawdziwego zdarzenia) Wprowadzenie Skierujmy mózg na Ajaksa. Ty starasz się czegoś nauczyć, natomiast mózg stara ci się wyświadczyć przysługę, pilnując, aby to, czego się uczysz, nie zostało zapamiętane. Mózg myśli sobie: „Lepiej zostawię miejsce na bardziej istotne sprawy, na przykład których zwierząt unikać, czy też dlaczego uprawianie snowboardingu nago jest złym pomysłem”. A więc jak można zmylić mózg, aby myślał, że twoje życie zależy od znajomości Ajaksa? Dla kogo jest ta książka? Wiemy, co myślisz Wiemy, co myśli twój mózg Metapoznanie: myślenie o myśleniu Oto co zrobiliśmy Oto co TY możesz zrobić, aby skłonić swój mózg do posłuszeństwa Przeczytaj Zespół korektorów merytorycznych Podziękowania 22 23 23 25 26 27 28 30 31 7 Spis treści 1 Ajax — zastosowanie Aplikacje internetowe dla nowego pokolenia Zmęczony czekaniem na przeładowanie strony? Sfrustrowany pokracznymi interfejsami aplikacji internetowych? Czas, aby zaczęły one przypominać przyjemne w użyciu aplikacje desktopowe. Jak to zrobić? Za pomocą Ajaksa — twojej przepustki do tworzenia bardziej interaktywnych, sprawniej reagujących i łatwiejszych w użyciu aplikacji internetowych. Pomiń drzemkę, musisz dopieścić swoje witryny. Czas na zawsze pozbyć się niepotrzebnych i długotrwałych przeładowań strony. Strony WWW: podejście tradycyjne Strony WWW: podejście nowoczesne Kiedy możemy mówić o stronie w metodologii Ajax? Rockandrollowe pamiątki Roba Ajax i rock and roll w 5 krokach Etap 1. Modyfikujemy kod XHTML Etap 2. Inicjalizacja JavaScriptu Etap 3. Tworzenie obiektu żądania Etap 4. Pobieranie informacji o przedmiocie Napiszmy kod żądający informacji o przedmiocie Zanim rozpoczniesz pracę z obiektem żądania, upewnij się, że on istnieje Obiekt żądania jest po prostu obiektem Hej, serwerze, wywołaj potem u mnie displayDetails(), dobrze? Do wysłania żądania użyj send() Na żądanie Ajaksa serwer zwykle zwraca dane Ajax jest agnostykiem serwerowym Użyj funkcji zwrotnej do pracy z danymi zwróconymi przez serwer Pobierz odpowiedź serwera z właściwości responseText obiektu żądania Żegnajcie, tradycyjne aplikacje internetowe! 34 35 37 38 44 46 48 52 54 56 57 58 59 60 62 63 67 68 70 getDetails() function getDetails { ... } displayDetails() (cid:304)(cid:267)danie getDetails.php Serwer zawsze coś przetwarza i zwraca dane... czasem kod HTML, a czasem surowe informacje. thumbnails.js (cid:304)(cid:267)danie serwer WWW Kod JavaScript może użyć danych z serwera do zaktualizowania tylko fragmentu strony. Serwer odpowiada, a przeglądarka uruchamia funkcję zwrotną. Jestem zdesperowany, ale nie stać mnie na szybsze serwery ani na zespół specjalistów. Strony ajaksowe rozmawiają z serwerem tylko wtedy, kiedy muszą... i tylko o tym, o czym serwer wie. Problemem witryny Roba nie są zbyt wolne serwery, ale fakt, że strony ciągle wysyłają żądania... nawet wtedy, gdy nie muszą. 8 Spis treści 2 Projektowanie aplikacji w metodologii Ajax Myślenie „po ajaksowemu” Witamy wśród aplikacji ajaksowych — to zupełnie nowy świat internetowy. Utworzyłeś już swoją pierwszą aplikację w metodologii Ajax i zaczynasz zastanawiać się, jak wprowadzić żądania asynchroniczne do pozostałych swoich witryn. Ale w Ajaksie nie wszystko sprowadza się do programowania. Musisz inaczej myśleć o aplikacji. Samo wykonywanie żądań asynchronicznych nie sprawia, że staje się ona bardziej przyjazna dla użytkownika. To ty powinieneś mu pomóc uniknąć popełnienia błędów, a to oznacza konieczność powtórnego przemyślenia projektu całej aplikacji. Tradycyjna witryna Mike’a jest do bani Użyjmy Ajaksa do ASYNCHRONICZNEGO przesyłania żądań rejestracji Aktualizacja strony rejestracji PROGRAMOWA konfiguracja procedury obsługi zdarzenia window.onload Kod JavaScript znajdujący się poza funkcjami jest wykonywany podczas odczytu skryptu Co kiedy się wydarza? A na serwerze... Niektóre części projektów ajaksowych będą takie same... zawsze Funkcja createRequest() jest zawsze taka sama Twórz obiekt żądania... w wielu przeglądarkach Projekt aplikacji ajaksowej obejmuje zarówno stronę WWW, jak i program po stronie serwera Co już zrobiliśmy... Co jeszcze musimy zrobić... Obiekt żądania łączy twój kod z przeglądarką Porozumiewasz się z przeglądarką, a nie z serwerem Przeglądarka wywołuje kod zwrotnie i przekazuje do niego odpowiedź serwera Pokaż Mike’owi ajaksową stronę rejestracji Teraz formularz może przesyłać żądania do serwera na dwa sposoby Utwórzmy klasy CSS dla każdego stanu przetwarzania żądania... ...i zmieńmy klasę CSS za pomocą JavaScriptu Zmiany? Nie potrzebujemy ich! Zezwalaj na rejestrację tylko wtedy, gdy wprowadzono odpowiednie dane W trakcie... Nazwa użytkownika jest w porządku. Nazwa użytkownika jest zajęta. Przycisk wysyłania jest wyłączony. Po wpisaniu nazwy użytkownika powinien zostać wyświetlony ten obrazek postępu. Ten obrazek informuje, że nazwa użytkownika jest w porządku. Teraz możesz przesłać stronę. 74 76 81 84 86 87 88 90 91 94 96 99 99 102 103 106 108 109 112 113 114 115 9 Spis treści Reagowanie na użytkowników 3 Zdarzenia w JavaScripcie Czasami kod musi reagować na inne rzeczy dziejące się w aplikacji internetowej... W takiej sytuacji przydatne są zdarzenia. Zdarzenie jest czymś, co dzieje się na stronie, w przeglądarce, a nawet na serwerze. Nie wystarczy jedynie wiedzieć o zdarzeniach... Czasami trzeba na nie odpowiedzieć. Tworząc kod i rejestrując go jako procedurę obsługi zdarzenia, możesz sprawić, aby przeglądarka wykonywała go zawsze, gdy wystąpi określone zdarzenie. Połącz zdarzenia i ich procedury obsługi, a otrzymasz interaktywne aplikacje internetowe. Wszystko zaczęło się od „psa z głową w dół” Aplikacje ajaksowe to coś więcej niż suma ich części Oto kod XHTML strony Marty... Zdarzenia są kluczem do interaktywności Połącz zdarzenia ze strony WWW z procedurami obsługi w kodzie JavaScript Za pomocą zdarzenia window.onload zainicjalizuj pozostałe elementy interaktywne strony Niech przyciski po lewej stronie reagują na kliknięcia Użyj treści i struktury XHTML Dopisz też kod funkcji hideHint() Karty: złudzenie optyczne (i graficzne) Sięgaj po obrazy za pomocą pętli for... Klasy CSS są (znowu) kluczem do rozwiązania problemu Hm... ale karty nie są a ! To popsuło nasz JavaScript, prawda? Użyj obiektu żądania do pobrania z serwera informacji o zajęciach Zachowaj ostrożność, gdy masz dwie funkcje zmieniające tę samą część strony Gdy musisz zmieniać obrazy w skrypcie, myśl o zmienianiu klas CSS W XHTML-u odnośniki są reprezentowane przez elementy a Potrzebujemy też funkcji wyświetlającej i ukrywającej przycisk 124 131 132 134 137 138 143 144 147 148 149 150 151 152 157 158 163 164 165 Pocz(cid:200)tkuj(cid:200)cy. Tu powiniene(cid:258) zacz(cid:200)(cid:202), je(cid:285)eli nie uprawia(cid:239)e(cid:258) jeszcze jogi. (cid:165)rednio zaawansowany. Je(cid:285)eli kurs dla pocz(cid:200)tkuj(cid:200)cych przesta(cid:239) by(cid:202) wyzwaniem, spróbuj swoich si(cid:239) tutaj. Zaawansowany. Bardzo wymagaj(cid:200)cy! 10 Spis treści Dwoje to już towarzystwo 4 Kilka procedur obsługi zdarzeń Jedna procedura obsługi zdarzenia nie zawsze wystarcza. Czasami zdarzenie musi wywołać kilka procedur obsługi. Być może musisz utworzyć jakieś operacje specyficzne dla zdarzenia oraz kod generyczny; wówczas umieszczenie tego wszystkiego w jednej procedurze obsługi nie uda się. Albo po prostu chcesz utworzyć jasny kod wielokrotnego użytku i masz dwa fragmenty funkcjonalności wyzwalane przez to samo zdarzenie. Na szczęście możemy użyć metod z DOM Poziom 2, aby przypisać kilka procedur obsługi do jednego zdarzenia. 170 171 171 172 Do zdarzenia może być przypisana tylko jedna procedura obsługi (a przynajmniej tak się wydaje) Procedury obsługi zdarzeń są po prostu właściwościami Właściwość może mieć tylko JEDNĄ wartość Przypisz kilka procedur obsługi zdarzeń, korzystając z addEventListener() W DOM Poziom 2 do jednego zdarzenia na obiekcie można przypisać kilka procedur obsługi Co się dzieje z Internet Explorerem? Internet Explorer używa zupełnie innego modelu zdarzeń attachEvent() i addEventListener() są funkcjonalnymi odpowiednikami addEventHandler() działa we WSZYSTKICH aplikacjach, nie tylko na stronie Marty Użyjmy naszej nowej funkcji narzędziowej w initPage() W poszukiwaniu rozwiązania użyj alert() Co jeszcze może być problemem? W IE właścicielem procedur obsługi jest szkielet zdarzeń IE, a NIE aktywny obiekt strony attachEvent() i addEventListener() przesyłają jeszcze jeden argument do naszych funkcji 190 Musimy nazwać argument Event, aby nasze funkcje mogły z nim pracować 191 192 Ty mówisz target, ja mówię srcElement A więc jak POBIERAMY obiekt, który wyzwolił zdarzenie? 196 174 178 179 179 184 185 187 187 189 a id= advanced id= advanced href= # ... / XHTML file onmouseover = showHint id= advanced title= advanced href= # currentBtn. onmouseover = showHint; JavaScript file a element Obiekt a ma właściwości: id, title, href i onmouseover. Każda właściwość posiada swoją nazwę i wartość. 11 Spis treści 5 Aplikacje asynchroniczne To jak odnawianie prawa jazdy Masz dość czekania? Nienawidzisz opóźnień? Możesz coś z tym zrobić, wykorzystując asynchroniczność! Utworzyłeś już kilka stron wykonujących żądania asynchroniczne do serwera, aby użytkownik nie musiał czekać na odświeżenie strony. W tym rozdziale jeszcze dokładniej omówimy szczegóły budowania aplikacji asynchronicznych. Dowiesz się, co tak naprawdę oznacza asynchroniczność, nauczysz się używać kilku żądań asynchronicznych, a nawet utworzysz funkcję monitorującą, aby asynchroniczność nie wprawiała w zakłopotanie ani ciebie, ani użytkowników. Co tak naprawdę oznacza asynchroniczność? Cały czas budowałeś aplikacje asynchroniczne Ale czasem możesz ledwo zauważyć... Mówiąc o przetwarzaniu po stronie serwera... Asynchroniczność w trzech łatwych krokach Potrzebujemy dwóch pól na hasła oraz div na zdjęcia okładek Jeżeli potrzebujesz nowego zachowania, prawdopodobnie potrzebujesz też nowej funkcji obsługującej zdarzenie Za pomocą JEDNEGO obiektu żądania możesz bezpiecznie wysłać i odebrać JEDNO żądanie asynchroniczne Żądania asynchroniczne nie czekają na nic... nawet na siebie! Jeżeli wykonujesz DWA oddzielne żądania, użyj DWÓCH osobnych obiektów Asynchroniczność oznacza, że nie możesz polegać na KOLEJNOŚCI żądań i odpowiedzi Funkcja monitorująca OBSERWUJE aplikację... SPOZA wykonywanego kodu Funkcję monitorującą wywołuj wtedy, gdy podjęcie działania MOŻE być konieczne Dzięki zmiennym stanu funkcje monitorujące wiedzą, co się dzieje A oto nasza ostatnia sztuczka Żądania synchroniczne uniemożliwiają wykonanie czegokolwiek CAŁEMU KODOWI Użyj setInterval(), aby to JavaScript, a nie twój kod, uruchamiał proces 202 204 205 206 209 210 215 224 225 226 232 237 238 240 244 246 249 Asynchroniczne żądanie coli Rufus, przyniósłbyś mi jeszcze jedną colę? Poproszę go o podwyżkę. Więcej gryzaków. A to oznacza, że czekając na colę, możesz robić, co chcesz. Nie jesteś unieruchomiony jak wtedy, gdy Rufus był synchroniczny. Zanim Rufus wróci, będziesz przy siedemnastym dołku. Idealny moment na przerwę! Wynik jest taki sam — dostałeś colę. Różnica wiąże się z tym, że podczas oczekiwania nie byłeś unieruchomiony. I znowu żądasz od Rufusa, aby przyniósł ci colę, lecz tym razem mówisz mu, że jest psem asynchronicznym. Rufus ponownie idzie po colę, ale teraz jest psem ASYNCHRONICZNYM. 12 Spis treści 6 Obiektowy model dokumentu Leśnictwo na stronie WWW Poszukiwany: Łatwe w aktualizacji strony WWW. Czas wziąć sprawy w swoje ręce i zacząć pisać kod aktualizujący strony WWW w trakcie ich przeglądania. Dzięki obiektowemu modelowi dokumentu twoje aplikacje będą w całkowicie nowy sposób odpowiadały na działania użytkowników, a ty na zawsze wyeliminujesz niepotrzebne przeładowania stron. Po przeczytaniu tego rozdziału będziesz potrafił wyszukać, przenieść i zaktualizować zawartość znajdującą się dosłownie w dowolnym miejscu strony. A więc przewróć kartkę i udajmy się na przechadzkę po Szkółce Leśnej Webville. Możesz zmieniać ZAWARTOŚĆ strony... ...albo STRUKTURĘ strony Do reprezentowania strony przeglądarki wykorzystują obiektowy model dokumentu Oto kod XHTML, który napisałeś... ...a tak go widzi przeglądarka Strona jest zbiorem powiązanych obiektów Wykorzystajmy DOM do utworzenia dynamicznej aplikacji Rozpoczynamy od XHTML-u... appendChild() dodaje do węzła nowego potomka Możesz wyszukiwać elementy według nazwy (name) lub identyfikatora (id) Czy mogę przenieść klikniętą płytkę? Możesz poruszać się po drzewie DOM, używając relacji RODZINNYCH Drzewo DOM zawiera węzły dla WSZYSTKIEGO, co znajduje się na stronie WWW Właściwość nodeName węzła tekstowego ma wartość #text Wygrałem? Wygrałem? Ale poważnie... wygrałem? 256 257 258 260 261 263 270 272 281 282 286 288 298 300 304 305 document Obiekt document zawiera strukturę strony zdefiniowaną przez kod XHTML. html script src= ”...js” / img src= ”siteLogo .png” / /html classes.html #tabs { ... } yoga.css schedule.js Style, a nawet kod dołączony do struktury, są również reprezentowane w DOM-ie. 13 Spis treści 7 Manipulowanie DOM-em Moje życzenie jest dla ciebie rozkazem DOM - em Czasami potrzebujesz tylko trochę kontroli nad umysłem. Dobrze wiedzieć, że przeglądarki przekształcają kod XHTML w drzewa DOM. Możesz wiele osiągnąć, poruszając się po nich. Ale potężne możliwości daje dopiero przejęcie kontroli nad drzewem DOM i sprawienie, by wyglądało ono tak, jak Ty tego chcesz. Zdarza się, że musisz dodać nowy element i trochę tekstu lub usunąć ze strony element taki jak img . To i wiele innych rzeczy możesz osiągnąć za pomocą DOM-u, a przy okazji pozbyć się tej kłopotliwej właściwości innerHTML. Wynik? Kod, który potrafi zrobić ze stroną więcej, bez mieszania prezentacji i struktury w JavaScripcie. 308 Webville Puzzles... franszyza 312 W Woggle płytki nie są przechowywane w komórkach tabeli 313 Płytki z XHTML-em są pozycjonowane za pomocą CSS-u 315 „Nie chcemy ZUPEŁNIE przypadkowych liter” 317 Cała prezentacja znajduje się w CSS-ie 319 Potrzebujemy nowej procedury obsługi zdarzenia dla kliknięć Zaczynamy tworzyć procedurę obsługi kliknięcia płytek 320 Procedurę obsługi zdarzenia możemy przypisać w funkcji randomizeTiles() 320 321 W JavaScripcie wartości właściwości są po prostu łańcuchami Do div currentWord musimy dodać treść ORAZ strukturę 324 324 Do zmian struktury strony użyj DOM-u Do tworzenia elementu DOM służy createElement() 325 Musisz POWIEDZIEĆ przeglądarce, gdzie ma umieścić tworzony węzeł DOM Musimy wyłączać poszczególne płytki. To oznacza zmienianie klasy CSS płytki... ...ORAZ WYŁĄCZENIE procedury obsługi zdarzenia addLetter() Przesłanie słowa jest po prostu (kolejnym) żądaniem Nasz kod JavaScript nie interesuje się tym, jak serwer opracowuje odpowiedź na nasze żądanie Test użyteczności: KIEDY wywołujemy submitWord()? 334 334 336 326 336 341 Gra rozpoczyna się od wyświetlenia liter umieszczonych na siatce o wymiarach 5 na 5. Za każdym razem układ liter powinien być przypadkowy. Gracze mogą klikać litery w celu „budowania” słów w tym okienku. Gracze mogą przesyłać słowo, aby sprawdzić jego poprawność... ...i otrzymać wynik — 1 punkt za każdą samogłoskę i 2 punkty za spółgłoskę. Każda płytka może być użyta tylko raz w jednym słowie. Po wykorzystaniu płytki nie można jej kliknąć do momentu rozpoczęcia tworzenia nowego słowa. Użyte słowa są umieszczane w tym okienku. 14 Spis treści 8 Frameworki i zestawy narzędzi Nie ufaj nikomu A więc czym tak naprawdę są te frameworki ajaksowe? Jeżeli spędziłeś trochę czasu, pracując nad aplikacjami internetowymi, prawdopodobnie natknąłeś się na przynajmniej jeden framework JavaScript lub Ajax. Niektóre frameworki oferują wygodne metody pracy z DOM-em. Inne ułatwiają walidację i wysyłanie żądań. Jeszcze inne zawierają biblioteki z gotowymi efektami wizualnymi w JavaScripcie. Ale który powinieneś wybrać? I skąd masz wiedzieć, co tak naprawdę dzieje się w takim frameworku? Musisz zrobić coś więcej, niż tylko skorzystać z kodu napisanego przez innych... Czas przejąć kontrolę nad swoimi aplikacjami. Zalety frameworków Wady frameworków A więc jakie frameworki SĄ dostępne W każdym frameworku obowiązuje inna składnia Składnia może być inna, ale JavaScript pozostaje niezmieniony Używać frameworków czy ich nie używać? Wybór należy do ciebie... 357 358 359 362 364 9 Żądania i odpowiedzi XML Więcej niż mogą wyrazić słowa Jak opisałbyś siebie za 10 lat? A za 20? Czasami potrzebujesz danych, które zmieniają się razem z twoimi potrzebami... lub potrzebami twoich klientów. Dane, z których teraz korzystasz, mogą się zmienić za kilka godzin, dni lub miesięcy. Dzięki XML-owi, rozszerzalnemu językowi znaczników, dane mogą same się opisywać. Oznacza to, że twoje skrypty nie będą wypełnione instrukcjami if, else i switch. Zamiast tego możesz wykorzystać dostarczane przez XML opisy do określenia, jak użyć danych zawartych w XML-u. Wynik: większa elastyczność i łatwiejsza obsługa danych. Rob chce dodać cenę każdego przedmiotu. Dostosowujemy rock klasyczny do XXI wieku Jak serwer powinien przesłać odpowiedź z WIELOMA wartościami? innerHTML jest łatwy tylko w aplikacji po stronie klienta Do pracy z XML-em wykorzystujesz DOM, tak jak w przypadku XHTML-u XML sam się opisuje Każdy przedmiot będzie zawierał kilka odnośników odsyłających do dalszych informacji. 366 369 375 381 388 15 Spis treści 10 JSON Syn JavaScriptu JavaScript, obiekty i notacja, o rany! Jeżeli będziesz musiał kiedyś reprezentować obiekty w JavaScripcie, pokochasz JSON, JavaScript Standard Object Notation. Dzięki JSON-owi możesz reprezentować złożone obiekty i odwzorowania za pomocą tekstu i kilku nawiasów klamrowych. Co więcej, możesz wysyłać i odbierać JSON w innych językach, takich jak PHP, C# i Ruby. Ale jak JSON sprawuje się jako format danych? Obróć kartkę i się przekonaj... JSON może być tekstem ORAZ obiektem Dane JSON można traktować jak obiekt JavaScript A więc jak pobrać dane JSON z odpowiedzi serwera? JavaScript potrafi interpretować dane tekstowe Użyj eval(), aby ręcznie interpretować tekst Interpretowanie danych JSON zwraca ich obiektową reprezentację Obiekty JavaScript są JUŻ dynamiczne... ponieważ nie są obiektami SKOMPILOWANYMI Możesz uzyskać dostęp do składników obiektu... a następnie pobrać za ich pomocą wartości z obiektu Odpowiedź serwera musisz PARSOWAĆ, a nie tylko INTERPRETOWAĆ Który format danych jest lepszy? 401 402 403 405 405 406 412 413 419 422 JSON może być tekstem ORAZ obiektem CSV itemDetails = response.split( ; ); Serwer WWW XML responseDoc = request.responseXML; Serwer WWW JSON description = item.description; Serwer WWW 16 Spis treści 11 Formularze i walidacja Powiedz to, co chciałeś powiedzieć Od czasu do czasu każdy popełnia błędy. Pozwól człowiekowi mówić (lub pisać) przez kilka minut, a prawdopodobnie popełni przynajmniej jeden błąd lub dwa. A jak mają odpowiadać na błędy nasze aplikacje internetowe? Musimy sprawdzać poprawność wprowadzanych przez użytkowników danych i reagować, gdy występują w nich jakieś usterki. Ale co powinno się czym zajmować? Co powinna robić strona WWW? Co powinien robić JavaScript? I jaka jest rola serwera w walidacji i integralności danych? Przewróć kartkę, aby poznać odpowiedzi nie tylko na te pytania. Joga dla programistów... świetnie prosperujący interes Walidacja powinna przebiegać od strony WWW w kierunku serwera Możesz sprawdzać poprawność FORMATU danych i możesz sprawdzać poprawność ZAWARTOŚCI danych Musimy sprawdzić poprawność FORMATU danych z formularza zapisów Nie powtarzaj się: DRY Napiszmy jeszcze kilka procedur obsługi zdarzeń POWRÓT SYNA JavaScriptu Wartość właściwości może być kolejnym obiektem JavaScriptu Ostrzeżmy klientów Marty, gdy wystąpi błąd we wprowadzonych danych Jeżeli nie ostrzegamy, stosujemy unwarn() JEŻELI istnieje ostrzeżenie, usuń je Powtarzanie danych jest problemem SERWERA A więc skończyliśmy, prawda? 428 434 440 441 443 446 450 450 453 457 457 463 464 (cid:304)(cid:267)danie enroll.js serwer WWW Strona WWW JavaScript Serwer 17 Spis treści 12 Żądania POST Paranoja to twoja przyjaciółka Ktoś cię obserwuje. Teraz. Naprawdę. Freedom of Information Act? Czy to nie ta ustawa, która ułatwiła powstanie internetu? Obecnie wszystko, co użytkownik wpisze do formularza lub kliknie na stronie WWW, podlega kontroli. A to przez administratora sieci, a to przez firmę próbującą poznać preferencje klientów, a to przez hakera lub spamera — twoje informacje nie są bezpieczne, jeżeli ich nie zabezpieczasz. W przypadku stron WWW musisz chronić dane użytkowników po kliknięciu przycisku Wyślij. W filmie występuje czarny charakter W żądaniach GET parametry żądania są przesyłane jako jawny tekst Żądania typu POST NIE przesyłają jawnego tekstu Dane w żądaniu POST są ZAKODOWANE, dopóki nie znajdą się na serwerze Wysyłamy dane w żądaniu POST Zawsze upewniaj się, że dane żądania zostały OTRZYMANE Dlaczego żądanie POST nie zadziałało Serwer dekoduje dane POST Musisz POWIEDZIEĆ serwerowi, co wysyłasz Ustaw nagłówek żądania za pomocą metody setRequestHeader() obiektu żądania 466 469 470 472 474 476 478 479 480 482 Ponieważ jest to żądanie typu POST, do URL żądania nie są dołączone żadne dane. register.php? Serwer WWW Serwer pobiera dane z żądania i przekształca je w coś, z czego może skorzystać program pracujący po stronie serwera. Serwer otwiera żądanie POST i dekoduje dane z żądania... ...którymi w przypadku witryny Mike’a są informacje o kliencie oraz jego preferencje filmowe. username=jkowalski password=iheartalba firstname=Jan lastname=Kowalski email=jk@mac.com genre=action favorite=Casino Royale tastes=Akcja, akcja, akcja! W końcu serwer przesyła dane do programu określonego przez URL. ?php... ? register.php 18 Spis treści A Pozostałości Pięć najważniejszych tematów (których nie omówiliśmy) To była długa podróż... i niemal dotarłeś do końca. Trudno jest nam pogodzić się z myślą, że nas opuścisz, ale zanim odejdziesz, musimy omówić jeszcze kilka zagadnień. Nie mogliśmy zmieścić całej tematyki związanej z Ajaksem w jednej 600-stronicowej książce. Cóż, próbowaliśmy... ale dział marketingu stwierdził, że 14-kilogramowa książka techniczna nie będzie zbyt dobrze prezentowała się na półce. Więc wyrzuciliśmy wszystko, co nie jest niezbędne, a pozostałe ważne informacje zamieściliśmy w tym dodatku. 1. Inspekcja DOM-u 2. Łagodna degradacja 3. Biblioteki script.aculo.us oraz Yahoo UI 4. Użycie bibliotek JSON w kodzie PHP 5. Ajax i ASP.NET 492 495 496 498 500 B S Funkcje narzędziowe Po prostu daj mi kod Czasami chcesz mieć po prostu wszystko w jednym miejscu. Spędziłeś wiele czasu, używając utils.js, naszej małej klasy funkcji narzędziowych, które obsługują Ajax, DOM i zdarzenia. Na kolejnych stronach wszystkie te funkcje zostaną umieszczone w jednym miejscu i będziesz mógł ich używać we własnych skryptach narzędziowych oraz aplikacjach. Po raz ostatni przyjrzyj się tym funkcjom i bierz się do pracy nad własnymi narzędziami! utils.js: etapy rozwoju Skorowidz 504 507 19 2. Projektowanie aplikacji w metodologii Ajax Myślenie „po ajaksowemu” Wykonywanie z Ajaksem dwóch czynności jednocześnie... Rety, to jest super! Ale przyznam, że muszę zupełnie zmienić sposób myślenia. Witamy wśród aplikacji ajaksowych — to zupełnie nowy świat internetowy. Utworzyłeś już swoją pierwszą aplikację w metodologii Ajax i zaczynasz zastanawiać się, jak wprowadzić żądania asynchroniczne do pozostałych swoich witryn. Ale w Ajaksie nie wszystko sprowadza się do programowania. Musisz inaczej myśleć o aplikacji. Samo wykonywanie żądań asynchronicznych nie sprawia, że staje się ona bardziej przyjazna dla użytkownika. To ty powinieneś mu pomóc uniknąć popełnienia błędów, a to oznacza konieczność powtórnego przemyślenia projektu całej aplikacji. to jest nowy rozdział (cid:23) 73 Aplikacja internetowa potrzebująca przemiany w ajaksową Tradycyjna witryna Mike’a jest do bani Mike pisze świetne recenzje filmowe i zapragnął przenieść je do internetu. Niestety, pojawiły się problemy ze stroną rejestracji. Internauci odwiedzają witrynę, wybierają nazwę użytkownika, wpisują jeszcze kilka informacji i wysyłają formularz, aby uzyskać dostęp do recenzji. Jednak gdy nazwa użytkownika jest już zajęta, pojawia się problem — serwer zwraca ponownie początkową stronę, komunikat o błędzie... bez żadnych informacji wpisanych przez użytkownika. Ponadto internauci denerwują się, że muszą czekać na nową stronę, a potem nie otrzymują niczego poza komunikatem o błędzie. Oni chcą recenzji filmów! Uwaga od działu HR: Czy możemy użyć mniej obraźliwego określenia? Na przykład „irytuje wszystkich użytkowników”? Użytkownicy nie powinni być zmuszani do wypełnienia ośmiu pól tylko po to, aby dowiedzieć się, czy dane w pierwszym polu są poprawne. Teraz użytkownik wypełnia formularz i klika przycisk „Zarejestruj”... Następnie czeka, mając nadzieję, że wszystko się uda. Rejestrują się setki osób, więc wiele nazw użytkowników jest już zajętych. Wszystkie inne witryny obsługują zapisy w ten sposób, ale to ja jestem zalewany skargami. Możesz mi pomóc? Witryna wygląda świetnie i zawiera mnóstwo świetnych recenzji... ale tylko dla użytkowników, którym uda się zarejestrować i przejść dalej, poza stronę rejestracji. 74 Rozdział 2. Projektowanie aplikacji w metodologii Ajax Mike jest w prawdziwych tarapatach. Ty jednak, nawet po napisaniu jednej aplikacji ajaksowej, powinieneś mieć kilka pomysłów na usprawnienie jego witryny. Spójrz na schemat obecnego sposobu działania aplikacji i napisz, co twoim zdaniem powinno się dziać. Następnie odpowiedz na pytania znajdujące się na dole strony. Ćwiczenie 1 Użytkownik wypełnia formularz rejestracji. 2 Formularz jest przesyłany do serwera WWW. serwer WWW 3 Program po stronie serwera weryfikuje informacje podane przez użytkownika podczas rejestracji... 4 ...i zwraca do przeglądarki nową stronę WWW. Serwer wyświetla ekran powitalny... lub ...lub ponownie wyświetla stronę rejestracji z komunikatem o błędzie. Wszystkie informacje wpisane przez użytkownika zostają utracone... Wszystkie pola są puste. Jak sądzisz, jaki jest największy problem z witryną Mike’a? ……………………………………………………………. ……………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………… Co byś zrobił, aby usprawnić witrynę Mike’a?..………………….…………………………………………………...... ……………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………… jesteś tutaj (cid:23) 75 Żądania asynchroniczne Użyjmy Ajaksa do ASYNCHRONICZNEGO przesyłania żądań rejestracji Ajax jest idealnym narzędziem do rozwiązania problemu ze stroną Mike’a. W tej chwili największy problem polega na tym, że użytkownik musi czekać na pełne przeładowanie strony tylko po to, aby dowiedzieć się, że nazwa użytkownika jest już zajęta. Co więcej, jeżeli będzie chciał wybrać inną nazwę, musi ponownie wpisać pozostałe informacje. Obydwa problemy możemy rozwiązać, korzystając z metodologii Ajax. Wciąż musimy porozumieć się z serwerem, aby dowiedzieć się, czy nazwa użytkownika jest już zajęta, ale po co czekać, aż użytkownik wypełni cały formularz? Gdy internauta skończy wpisywać nazwę, możemy wysłać żądanie asynchroniczne do serwera, sprawdzić nazwę i zakomunikować problemy bezpośrednio na stronie — bez konieczności jej przeładowania i bez utraty innych informacji wprowadzonych przez użytkownika. To jest potencjalny fan witryny z recenzjami Mike’a. Czy jako największy problem witryny Mike’a opisałeś coś podobnego? Nic złego się nie stało, jeżeli nie pomyślałeś o wysłaniu żądania tuż po zakończeniu wpisywania nazwy przez użytkownika... Dostajesz jednak dodatkowy punkt, jeżeli o tym pomyślałeś! Sprawdźmy wybraną nazwę użytkownika zaraz po opuszczeniu pola. Wiesz już, jak wysłać żądanie asynchroniczne do serwera. żądanie żądanie Serwer przekazuje do naszej funkcji zwrotnej, czy nazwa użytkownika jest wolna, czy zajęta. Użytkownik może wypełnić resztę formularza, podczas gdy serwer sprawdza nazwę użytkownika. zwrotne wywołanie funkcji { ... } JavaScript Funkcja zwrotna wyświetli komunikat o błędzie tylko wtedy, gdy wystąpi problem. W międzyczasie użytkownik wciąż może pracować. 76 Rozdział 2. Projektowanie aplikacji w metodologii Ajax miłośnik filmów nie musiał jeszcze raz wpisywać swojego nazwiska i adresu e-mail? A to wszystko po to, żeby jakiś Czy to nie lekka przesada? Nie irytuj użytkowników... nigdy! W internecie twoja konkurencja jest oddalona tylko o jedno kliknięcie. Jeżeli od razu nie powiadomisz użytkowników o problemie czy też zmusisz ich do ponownego wykonania czegokolwiek, prawdopodobnie stracisz ich na zawsze. Witryna Mike’a może nie przynosi (jeszcze) zbyt dużych dochodów ani nawet nie wydaje ci się zbyt ważna... ale jest ważna dla jego fanów. Pewnego dnia jeden z użytkowników, którego nie zirytujecie, może mu zlecić pisanie recenzji filmowych dla „The New York Times” za sześciocyfrową sumę. Ale Mike nadal nie będzie wiedział, że jego witryna odstrasza internautów. Tutaj pomocne będą twoje umiejętności wykorzystania metodologii Ajax. Ważna zasada projektowa w Ajaksie Nie irytuj użytkowników. Jeżeli wystąpi problem z aplikacją internetową, poinformuj o tym użytkowników możliwie szybko i zrozumiale. Nie powinieneś też nigdy wyrzucać tego, co użytkownicy już zrobili, nawet jeżeli stało się coś, czego oni (ani ty) się nie spodziewali. Nie istnieją głupie pytania P: Ta: zasada projektowa nie odnosi się tylko do Ajaksa, prawda? O: Nie, stosuje się ona do wszystkich aplikacji internetowych, tak naprawdę do wszystkich rodzajów aplikacji. Jednak w przypadku aplikacji ajaksowych, a zwłaszcza żądań asynchronicznych, wiele rzeczy może pójść nie po naszej myśli. Częścią twojej pracy, jako dobrego programisty, jest ochrona użytkowników przed takimi problemami, a przynajmniej powiadomienie internautów o tym, co się dzieje. jesteś tutaj (cid:23) 77 Plan aplikacji Mike’a Czas popracować nad witryną Mike’a. Poniżej spisano 5 kroków, które należy wykonać, aby witryna działała, ale brakuje szczegółowych informacji na ich temat. Ponadto pomieszano kolejność czynności. Uporządkuj je i napisz jedno lub dwa zdania o tym, co powinno się wydarzyć na każdym z etapów. Ćwiczenie ? Utwórz i skonfiguruj nowy obiekt żądania. ........................................................................................................... ........................................................................................................... ........................................................................................................... ........................................................................................................... ? ? Ustaw procedury obsługi zdarzeń dla pól formularza. ........................................................................................................... ........................................................................................................... ........................................................................................................... ........................................................................................................... ? Sprawdź wybraną nazwę użytkownika. ........................................................................................................... ........................................................................................................... ........................................................................................................... ........................................................................................................... Zgłoś wszelkie problemy z wybraną nazwą użytkownika. .................................................................................................................. .................................................................................................................. .................................................................................................................. .................................................................................................................. ? Zaktualizuj kod XHTML i CSS strony rejestracji. ........................................................................................................... ........................................................................................................... ........................................................................................................... ........................................................................................................... 78 Rozdział 2. Projektowanie aplikacji w metodologii Ajax Po uporządkowaniu etapów pracy nad witryną przyjrzyj się poniższym schematom przedstawiającym wybrane interakcje w ajaksowej wersji aplikacji Mike’a. Sprawdź, czy potrafisz uzupełnić puste pola. Zdarzenie ____ wywołuje nasz kod JavaScript. Funkcja JavaScript tworzy i _____ obiekt _____. window.onload = initPage; urlHeader=... żądanie username validation.js Obiekt żądania przekazuje do ____ wybraną ____. Funkcja ____ aktualizuje stronę, aby wyświetlić informacje o sukcesie lub niepowodzeniu bez ____. window.onload = initPage; urlHeader=... validation.js żądanie 0 ____ zwraca wartość wskazującą, czy _____ została _____. Możemy wyświetlić mały symbol, aby dać użytkownikowi jakąś wskazówkę wizualną. jesteś tutaj (cid:23) 79 Asynchroniczność może zmniejszać irytację Twoje zadanie polegało na uporządkowaniu etapów tworzenia ajaksowej wersji witryny z recenzjami i na dodaniu brakujących opisów poszczególnych czynności. Miałeś również uzupełnić brakujące słowa w schematach. Ćwiczenie: Rozwiązanie 1 2 3 4 5 Zaktualizuj kod XHTML i CSS strony rejestracji. Musimy dopisać elementy script do formularza rejestracji w celu odwołania się do kodu JavaScript, który napiszemy. Ustaw procedury obsługi zdarzeń dla pól formularza. Potrzebujemy trochę inicjalizującego kodu, który ustawia zdarzenie onblur dla pola z nazwą użytkownika. Dzięki temu, gdy użytkownik opuści pole, rozpoczniemy przetwarzanie żądania. Utwórz i skonfiguruj nowy obiekt żądania. W celu utworzenia żądania możemy wykorzystać funkcję createRequest() napisaną w rozdziale 1., następnie do łańcucha URL dodamy nazwę wybraną przez użytkownika, aby przesłać ją do serwera. Sprawdź wybraną nazwę użytkownika. Po utworzeniu obiektu żądania musimy go przesłać do serwera, aby sprawdzić, czy wybrana nazwa użytkownika jest wolna. Możemy to zrobić asynchronicznie, dzięki czemu internauta będzie mógł wypełniać pozostałe pola formularza podczas weryfikacji nazwy użytkownika przez serwer. Kod dla poszczególnych etapów możesz napisać w dowolnej kolejności, ale w taki sposób będzie działać aplikacja i zgodnie z nim będziemy aktualizowali aplikację w tym rozdziale. W poprzednim rozdziale prześlizgnęliśmy się przez tę funkcję, ale teraz omówimy ją szczegółowo. Zdarzenie onblur wywołuje nasz kod JavaScript. Funkcja JavaScript tworzy i wysyła obiekt żądania. window.onload = initPage; urlHeader=... validation.js żądanie username Obiekt żądania przekazuje do serwera wybraną nazwę użytkownika. Zgłoś wszelkie problemy z wybraną nazwą użytkownika. Po powrocie obiektu żądania funkcja zwrotna może zaktualizować stronę, aby wyświetlić wynik weryfikacji nazwy użytkownika. Funkcja zwrotna aktualizuje stronę, aby wyświetlić informacje o sukcesie lub niepowodzeniu bez utraty informacji wpisanych przez użytkownika. 80 Rozdział 2. window.onload = initPage; urlHeader=... validation.js żądanie 0 Serwer zwraca wartość wskazującą, czy nazwa użytkownika została zaakceptowana. Projektowanie aplikacji w metodologii Ajax Aktualizacja strony rejestracji Podstawowa struktura strony rejestracji jest już gotowa, więc przejdźmy dalej i dodajmy znacznik script ładujący kod JavaScript, który napiszemy. Później będziemy mogli skonfigurować pole z nazwą użytkownika, aby wywoływało funkcję JavaScript w celu wykonania żądania do serwera. Używaj otwierającego i zamykającego znacznika script . Uwaga! Niektóre przeglądarki nie obsługują poprawnie samozamykającego się znacznika script — np. script/ . Zawsze używaj osobnego znacznika otwierającego i zamykającego dla znacznika script . head meta http-equiv= content-type content= text/html; charset=utf-8 / title Filmy Mike a /title link rel= stylesheet href= css/movies.css / script src= scripts/validation.js type= text/javascript /script /head Tak jak w poprzednim rozdziale plik validation.js będziemy uzupełniać stopniowo. Uruchom to! Pobierz kod XHTML i CSS strony rejestracji. Jeżeli jeszcze tego nie zrobiłeś, pobierz przykładowe pliki pod adresem ftp://ftp.helion.pl/przyklady/hfajax.zip. W folderze r02 znajdziesz plik registration.html. Dopisz do niego pogrubiony wyżej znacznik script . html script src=” ... js” / img src=”siteLogo. png” / /html registration.html Wprowadź zmiany do pliku registration.html — strony rejestracji witryny Mike’a. P: I w czym problem? Przecież to samo robiliśmy w poprzednim rozdziale w witrynie z rockandrollowymi pamiątkami, prawda? O: Jak na razie tak. Ale większość aplikacji ajaksowych rozpoczyna się kilkoma znacznikami script i zewnętrznymi plikami z kodem JavaScript. Nie istnieją głupie pytania P: Ale i tak będziemy tylko przesyłać żądanie i uzyskiwać odpowiedź, nieprawdaż? O: Pewnie. W zasadzie niemal wszystkie aplikacje ajaksowe można opisać tak prosto. Chociaż — jak się przekonasz, gdy dojdziemy do strony rejestracji — tak naprawdę możliwe są dwie interakcje z serwerem: jedna, którą budujemy do sprawdzenia nazwy użytkownika, oraz kliknięcie przycisku Wyślij po wypełnieniu formularza. P: I co w tym takiego strasznego? O: Jak sądzisz? Potrafisz dostrzec jakieś problemy z utworzeniem dwóch sposobów przesyłania dwóch różnych żądań do serwera? jesteś tutaj (cid:23) 81 Oddzielaj zawartość od prezentacji i od zachowania Hej, ale zdaje się, że nie skończyliśmy jeszcze z kodem XHTML. Co z procedurą obsługi zdarzenia onblur dla pola z nazwą użytkownika? Chcemy uruchamiać jakiś kod po każdym wpisaniu nazwy użytkownika, prawda? Oddzielaj zawartość strony od jej zachowania. Moglibyśmy wywołać kod JavaScript bezpośrednio z kodu XHTML, np. umieszczając zdarzenie onblur w polu nazwy użytkownika. Ale byłoby to mieszanie zawartości strony z jej zachowaniem. Kod XHTML opisuje zawartość i strukturę strony: dane, które są na stronie, takie jak nazwa użytkownika i opis witryny z recenzjami, oraz układ tych danych. Natomiast sposób, w jaki strona reaguje na czynności użytkownika, jest zachowaniem strony. Tym zwykle zajmuje się JavaScript. Z kolei kod CSS definiuje prezentację strony, czyli jej wygląd. Oddzielenie zawartości, zachowania i prezentacji jest dobrym rozwiązaniem, nawet jeżeli samodzielnie tworzysz stosunkowo prostą stronę. A jeśli należysz do zespołu budującego złożone aplikacje, jest to jeden z najlepszych sposobów pozwalających uniknąć przypadkowego wmieszania się w czyjąś pracę. Oddzielaj zawartość, zachowanie i prezentację strony. Jeżeli tylko jest to możliwe, staraj się oddzielić od siebie zawartość strony (XHTML), jej zachowanie (JavaScript i procedury obsługi zdarzeń) oraz jej prezentację (CSS). Dzięki temu witryny będą elastyczniejsze i łatwiejsze w utrzymaniu i aktualizacji. WYTĘŻ UMYSŁ Jak sądzisz, dlaczego oddzielenie zawartości witryny od jej zachowania i prezentacji ułatwia wprowadzanie zmian? 82 Rozdział 2. Tę zasadę nazywa się czasem unobtrusive JavaScript (dyskretny JavaScript). Projektowanie aplikacji w metodologii Ajax Cała prawda o procedurach obsługi zdarzeń Wywiad tygodnia: Skąd naprawdę pochodzicie? Head First: Cieszę się, że z nami jesteś. W tym tygodniu mamy bardzo ciekawe pytania. Procedura obsługi: Naprawdę? Zawsze chętnie odpowiadam na pytania. Head First: Jest jedno pytanie, które wszyscy zadają. Skąd dokładnie pochodzisz? Procedura obsługi: Przybyłam z krainy ECMA, czyli... Head First: Nie, nie, mam na myśli: skąd zostałaś wywołana? Procedura obsługi: Hm... Myślę, że ludzie z ECMA opowiedzieliby własną historię, ale skoro nalegasz... Zwykle jestem wywoływana z pola lub przycisku formularza XHTML. Czasem też z okien. Head First: Czyli jesteś wywoływana ze stron XHTML? Procedura obsługi: Tak, zazwyczaj. Head First: Tak myślałem. To rozwiązuje spór. U nas usłyszeliście to jako pierwsi. Procedura obsługi: Czekaj, czekaj. Jaki spór? Head First: Dzwonił do nas JavaScript i zaklinał, że może cię wywołać. Mówił coś o zachowaniu wywołującym zachowanie... Kompletny bełkot. Procedura obsługi: A, pewnie mówisz o przypisywaniu mnie programowo. Bardzo mądry ten JavaScript. Head First: Programowo? Co to znaczy? Procedura obsługi: Widzisz, w głębi duszy jestem po prostu właściwością... Head First: Yyy, to ma związek z ECMA? Procedura obsługi: ...którą można ustawić za pomocą JavaScriptu. Nie, słuchaj dalej. Wiesz, czym jest DOM, prawda? Head First: Nie za bardzo... Tego dotyczy któryś z późniejszych rozdziałów. Procedura obsługi: Trudno. Zrozum, każdy element na stronie WWW jest po prostu obiektem. Pola i przyciski są tylko obiektami mającymi określone właściwości. Head First: Jasne, spotkaliśmy już kilka pól. Było całkiem miło. Ale Przycisk nigdy nie odpowiadał na wywołanie. Procedura obsługi: Cóż, zdarzenia takie jak onblur i onload są związane ze mną za pośrednictwem tych właściwości. Head First: Masz na myśli sytuację, gdy w XHTML-u piszemy np. onblur=”checkUsername()” dla elementu przyjmującego dane? Procedura obsługi: Dokładnie! To jest tylko właściwość pola. Ty jedynie wskazujesz przeglądarce, którą funkcję ma uruchomić oraz jak ma obsłużyć to zdarzenie. Head First: Kompletnie się pogubiłem. Procedura obsługi: Za pomocą JavaScriptu możesz przypisać wartość właściwości obiektu, prawda? Head First: Mówisz, że procedur obsługi zdarzeń nie trzeba przypisywać w kodzie XHTML? Procedura obsługi: Tak! Możesz to zrobić bezpośrednio w kodzie JavaScript... i oddzielić treść od zachowania. Head First: To zaskakujące. Ale jak najpierw uruchomić JavaScript, aby przypisać procedurę obsługi zdarzenia? Procedura obsługi: Jest pewien trik. Jakieś pomysły? Head First: Nie jestem pewien. Spytajmy publiczność. W jaki sposób możesz uruchomić inicjalizujący fragment JavaScriptu bez odwoływania się do funkcji na stronie XHTML? ………………………………………………………………… ………………………………………………………………… ………………………………………………………………… jesteś tutaj (cid:23) 83 onload zdarza się pierwsze PROGRAMOWA konfiguracja procedury obsługi zdarzenia window.onload Chcemy, aby część kodu JavaScript była uruchamiana przy ładowaniu strony rejestracji, a to oznacza, że należy go dołączyć jako procedurę obsługi jednego z pierwszych zdarzeń — window.onload. Możemy to zrobić programowo, ustawiając właściwość onload obiektu window. Jak? Przyjrzyjmy się, co dokładnie się dzieje podczas otwierania strony rejestracji przez użytkownika witryny Mike’a: Na początku użytkownik otwiera stronę rejestracji w przeglądarce. Ciekaw jestem, czy film „Juno” jest naprawdę tak śmieszny, jak miał być. http://headfirstlabs.com/.../registration.html Przeglądarka żąda strony rejestracji (XHTML)... ...a serwer zwraca stronę. html script src= ...js / img src= siteLogo .png / /html registration.html Następnie przeglądarka zaczyna przetwarzać stronę i prosi o kolejne pliki, do których napotka odwołania. validation.js bgContent.jpg Przeglądarka prosi o każdy plik, do którego odwołanie znajduje się w kodzie XHTML... bgContent.jpg validation.js ...a serwer zwraca wszystkie żądane pliki (w dowolnej kolejności). html script src= ...js / img src= bgContent. jpg / /html registration.html 84 Rozdział 2. Projektowanie aplikacji w metodologii Ajax Jeżeli plik jest skryptem, przeglądarka parsuje go, tworzy obiekty i wykonuje wszystkie instrukcje nieznajdujące się w funkcjach. Niektóre instrukcje tworzą obiekty. theImg Każdy element strony XHTML (np. obraz) jest reprezentowany przez obiekt. window. onload.= initPage; urlHeader= ... validation.js Inne instrukcje mogą ustawiać właściwości tych obiektów. initPage() Definiowane są również funkcje. Znajdujące się w nich instrukcje nie są wykonywane do momentu wywołania funkcji. window onload = initPage Ustawiana jest właściwość onload obiektu window. Te przypisania znajdują się poza funkcjami, dzięki czemu są uruchamiane przy pierwszym parsowaniu kodu JavaScript. W końcu, po załadowaniu i przetworzeniu wszystkich plików, przeglądarka wywołuje zdarzenie window.onload i funkcję zarejestrowaną do obsługi tego zdarzenia. To wszystko dzieje się, jeszcze zanim można korzystać ze strony... a więc błyskawicznie! window onload = initPage Wyświetlana jest już cała zawartość strony... ...więc przeglądarka wywołuje onload. window. onload.= initPage; urlHeader= ... validation.js jesteś tutaj (cid:23) 85 Inicjalizacja strony rejestracji Mike’a Kod JavaScript znajdujący się poza funkcjami jest wykonywany podczas odczytu skryptu Chcemy, aby nasza procedura obsługi zdarzenia była uruchamiana wraz z wyświetleniem strony. Dlatego musimy przypisać funkcję do właściwości onload obiektu window. Aby mieć pewność, że procedura ta zostanie przypisana wraz z załadowaniem strony, umieścimy kod przypisujący poza funkcjami w pliku validation.js. Dzięki temu przypisanie zostanie wykonane, zanim użytkownik będzie mógł cokolwiek zrobić na stronie. Ten kod nie jest funkcją... Jest on wykonywany podczas odczytu skryptu przez przeglądarkę. Ten wiersz nakazuje przeglądarce wywołanie funkcji initPage() tuż po załadowaniu elementów strony. window.onload = initPage; window.onload.= initPage; urlHeader= ... validation.js function initPage() { document.getElementById(”username”).onblur = checkUsername; } Oto kolejny przypadek programowego przypisania procedury obsługi zdarzenia. W rozdziałach 5. i 6. dokładnie omówimy metodę getElementById. Na razie musisz jedynie wiedzieć, że zwraca ona element XHTML o określonym identyfikatorze. function checkUsername() { // uzyskaj obiekt żądania // i wyślij go do serwera } function showUsernameStatus() { // aktualizuj stronę, aby wskazać, // czy nazwa użytkownika została przyjęta } To zaktualizuje stronę po otrzymaniu odpowiedzi z serwera. Uruchom to! Napisz początkową wersję validation.js. W edytorze tekstu utwórz nowy plik, validation.js, i napisz w nim przedstawione wyżej deklaracje funkcji. Pamiętaj, aby przypisać funkcję initPage() do właściwości onload obiektu window! To nakazuje przeglądarce wywołać funkcję checkUsername(), gdy użytkownik opuści pole nazwy użytkownika w formularzu. To jest funkcja, która będzie tworzyła i wysyłała obiekt żądania. Napiszemy ją troszeczkę później. 86 Rozdział 2. Projektowanie aplikacji w metodologii Ajax Co kiedy się wydarza? Na tym etapie wiele się dzieje. Omówmy to dokładnie, aby mieć pewność, że wszystko odbywa się dokładnie wtedy, gdy tego chcemy. Na początku... Gdy przeglądarka ładuje plik XHTML, znacznik script nakazuje jej załadować plik JavaScript. Cały kod, który znajduje się na zewnątrz funkcji, w tym pliku zostanie wykonany natychmiast, a interpreter JavaScriptu w przeglądarce utworzy funkcje, choć kod znajdujący się w nich nie zostanie jeszcze wykonany. Następnie... Instrukcja window.onload nie znajduje się w funkcji, więc zostanie uruchomiona tuż po załadowaniu pliku skryptowego validation.js przez przeglądarkę. Instrukcja window.onload przypisuje funkcję initPage() jako procedurę obsługi zdarzenia. Funkcja ta zostanie wywołana, gdy tylko wszystkie pliki, do których znajdują się dowołania w kodzie XHTML, zostaną załadowane, ale zanim użytkownik będzie mógł skorzystać ze strony WWW. Mimo że odbywa się to po kolei, WSZYSTKO dzieje się, zanim użytkownicy będą mogli wykonać jakiekolwiek czynności na stronie. I w końcu... Funkcja initPage() zostaje uruchomiona. Wyszukuje ona pole o identyfikatorze username. Następnie przypisuje funkcję checkUsername() do zdarzenia onblur tego pola. Efekt jest taki sam jak po wpisaniu onblur=”checkUsername()” w kodzie XHTML. Jednak nasz sposób jest bardziej czytelny, ponieważ oddziela kod (funkcję JavaScript) od struktury i zawartości (XHTML). head ... script src=... script src=... /head registration.html window.onload.= initPage; urlHeader= ... validation.js function initPage() { ... } validation.js window.onload.= initPage; urlHeader= ... validation.js Skrypt validation.js ustawia właściwość window.onload, aby po wystąpieniu zdarzenia onload była wywoływana funkcja initPage(). window.onload initPage() Zarówno przypisanie window.onload, jak i funkcja initPage() znajdują się w pliku validation.js. Funkcja initPage() tworzy łącze między polem umożliwiającym wprowadzenie nazwy użytkownika i procedurą obsługi zdarzenia. username.onblur registration.html jesteś tutaj (cid:23) 87 Wymagania po stronie serwera A na serwerze... Zanim będziemy mogli przetestować efekty naszej pracy nad stroną rejestracji, musimy sprawdzić serwer. Co serwer powinien dostać od nas w żądaniu? Czego możemy oczekiwać od serwera? Zamierzamy przesłać do serwera nazwę użytkownika wybraną przez odwiedzającego witrynę. żądanie username „okay” lub „denied” Jeżeli nazwa użytkownika jest dostępna, serwer zwróci „okay”. W przeciwnym przypadku zwróci „denied”. Nie jest istotne, czy na serwerze działa PHP, ASP, czy jeszcze coś innego, jeżeli tylko odpowiada on na nasze żądanie w ten sam sposób. Spokojnie Pomoc dla serwera jest dostępna online. Pamiętaj, że wybrane programy pracujące po stronie serwera są dostępne wśród przykładów do tej książki pod adresem ftp://ftp.helion.pl/przyklady/hfajax.zip. P: Jeszcze raz, czym jest ten obiekt window? O: Obiekt window reprezentuje okno przeglądarki użytkownika. P: A więc window.onload jest wykonywane, gdy tylko użytkownik zażąda strony? O: Nie tak szybko. Przeglądarka zaczyna od parsowania kodu XHTML i wszystkich plików, do których znajdują się odwołania w kodzie XHTML — np. CSS i JavaScript. Zatem kod znajdujący się w skryptach poza funkcjami jest wykonywany przed funkcją określoną w zdarzeniu window.onload. 88 Rozdział 2. Nie istnieją głupie pytania P: Dlatego mogę w pliku ze skryptem przypisać funkcję do window.onload? O: Dokładnie tak. Wszystkie skrypty, do których znajdują się odwołania w kodzie XHTML, są czytane przed wyzwoleniem zdarzenia onload. Następnie, po wyzwoleniu onload, użytkownicy faktycznie mogą zacząć korzystać ze strony. P: Myślałem, że aby uruchomić kod JavaScript, trzeba go wywołać. Jak to jest? O: Dobre pytanie. Przez wywołanie musisz uruchamiać kod JavaScript znajdujący się w funkcjach, a kod znajdujący się poza funkcją jest wykonywany przy parsowaniu danego wiersza kodu przez przeglądarkę. P: Ale powinniśmy to chyba przetestować, aby upewnić się, że wszystko działa poprawnie? O: Fakt. Zawsze przetestuj projekt aplikacji, zanim uznasz, że działa. P: W tym kodzie nic się nie dzieje. Jak mam go przetestować? O: To jest kolejne dobre pytanie. Jeżeli masz kod, który nie daje widocznych rezultatów, możesz poratować się wierną funkcją alert(). Projektowanie aplikacji w metodologii Ajax Jazda próbna Zabierz nową stronę rejestracji na przejażdżkę. Upewnij się, że wprowadziłeś wszystkie zmiany do plików registration.html i validation.js, a następnie załaduj stronę rejestracji w przeglądarce. Niewiele się zmieniło, prawda? Funkcja initPage() nie przynosi żadnych widocznych rezultatów, a funkcja checkUsername() jeszcze w ogóle nic nie robi... Musimy jednak sprawdzić, czy funkcja checkUsername() jest wywoływana, gdy użytkownik wpisze nazwę użytkownika i przejdzie do wypełniania innego pola. To trochę toporne, ale dodajmy kilka instrukcji alert(), aby upewnić się, że funkcje, które napisaliśmy, są faktycznie wywoływane. window.onload = initPage; function initPage() { document.getElementById( username ).onblur = checkUsername; alert( Wewnątrz funkcji initPage(). ); } function checkUsername() { // uzyskaj obiekt żądania i wyślij go do serwera alert( Wewnątrz funkcji checkUsername(). ); } function showUsernameStatus() { // aktualizuj stronę, aby wskazać, czy nazwa użytkownika została przyjęta } Sprawdź, czy wszystko działa. Funkcja alert() daje nam wizualną informację zwrotną. Wiemy, że funkcja initPage() jest wywoływana... window.onload.= initPage; urlHeader= ... validation.js ...podobnie jak checkUsername(), która jest wywoływana po wpisaniu nazwy użytkownika i opuszczeniu tego pola formularza przez internautę. jesteś tutaj (cid:23) 89 Wielokrotne wykorzystywanie rządzi Niektóre części projektów ajaksowych będą takie same... zawsze Metodę window.onload i funkcję initPage() wykorzystaliśmy już dwukrotnie — raz w rockandrollowym sklepie Roba, a drugi raz na stronie rejestracji Mike’a. W kolejce czeka tworzenie obiektu żądania działającego na stronie rejestracji tak samo jak w witrynie Roberta. Wiele elementów w aplikacjach ajaksowych się powtarza. Część twojej pracy polega na tworzeniu kodu w taki sam sposób, abyś nie musiał nieustannie pisać identycznych fragmentów. Spójrzmy, jak w witrynie Mike’a wygląda tworzenie i używanie obiektu żądania: 1 Strona ładuje się oraz wykonuje zadania i inicjalizację specyficzne dla aplikacji. Serwer zwraca „okay” lub „denied”. 5 Serwer zwraca odpowiedź do przeglądarki, używając obiektu żądania. 90 Rozdział 2. serwer WWW Dobrzy projektanci aplikacji szukają podobieństw i starają się ponownie wykorzystywać kod z innych projektów i aplikacji. Większość tych szczegółów zmienia się w różnych aplikacjach zależnie od ich funkcjonalności, układu, stylu itd. 2 Wywoływany jest kod JavaScript specyficzny dla aplikacji, który musi wysłać żądanie do serwera. request = createRequest(); window.onload.= initPage; urlHeader= ... 3 Tworzony jest nowy obiekt żądania. validation.js żądanie createRequest() {...} żądanie username okay denied Ta część — czyli tworzenie obiektu żądania — jest taka sama we wszystkich aplikacjach w metodologii Ajax. 4 Obiekt żądania jest konfigurowany z użyciem danych aplikacji i wysyłany do serwera. Projektowanie aplikacji w metodologii Ajax Funkcja createRequest() jest zawsze taka sama Niemal w każdej aplikacji ajaksowej potrzebujemy funkcji tworzącej obiekt żądania... i taką już mamy. To funkcja createRequest(), którą widzieliśmy w rozdziale 1. Przyjrzyjmy się dokładniej, jak tworzy ona obiekt żądania w różnych sytuacjach we wszystkich typach przeglądarek. U w a g a ! IE5 na komputerach Macintosh wciąż nie działa, nawet z tym kodem niezależnym od rodzaju przeglądarki. Aby ta funkcja nadawała się do wielokrotnego użytku, nie może ona zależeć od konkretnej przeglądarki ani od szczegółów konkretnej aplikacji. To jest obsługiwane przez wiele przeglądarek, a tym samym przez wielu użytkowników. function createRequest() { try { request = new XMLHttpRequest(); } catch (tryMS) { try { request = new ActiveXObject( Msxml2.XMLHTTP ); } catch (otherMS) { try { request = new ActiveXObject( Microsoft.XMLHTTP ); } catch (failed) { request = null; } } } Ten wiersz zwraca żądanie do kodu wywołującego. Pamiętaj, że musimy próbować, dopóki nie znajdziemy składni zrozumiałej dla każdej przeglądarki. return request; } Nie istnieją głupie pytania P: A więc jak naprawdę nazywa się ten obiekt żądania? O: Większość osób nazywa go XMLHttpRequest, ale to jest naprawdę trudne do wymówienia. Oprócz tego w niektórych przeglądarkach nazywa się go inaczej, np. XMLHTTP. Zdecydowanie łatwiej jest nazywać go po prostu obiektem żądania, unikając tym samym przywiązania do konkretnej przeglądarki. I tak większość osób myśli o tym w ten sposób — jak o żądaniu. jesteś tutaj (cid:23) 91 Unikaj kopiowania i wklejania Poczekaj... Jeżeli jest to dokładnie taki sam kod, jak wcześniej, dlaczego go po prostu nie skopiujemy i nie wkleimy? Kopiowanie i wklejanie nie jest dobrym pomysłem na wielokrotne wykorzystanie kodu. Funkcja createRequest() dla witryny Mike’a jest dokładnie taka sama, jak funkcja createRequest() w witrynie Roba, nad którą pracowaliśmy w rozdziale 1. Skopiowanie kodu, który napisaliśmy w rozdziale 1., i wklejenie go do pliku validation.js jest jednak złym pomysłem. Jeżeli się okaże, że trzeba wprowadzić jakąś zmianę, będziesz musiał to zrobić w dwóch miejscach. A jak sądzisz, co będzie się działo podczas pracy nad dziesięcioma lub dwudziestoma aplikacjami? Jeżeli trafisz na kod wspólny dla kilku aplikacji, wydziel go ze skryptów specyficznych dla aplikacji i umieść w skrypcie narzędziowym wielokrotnego użytku. A więc w przypadku createRequest() możemy usunąć tę funkcję z pliku validation.js witryny z recenzjami i utworzyć nowy skrypt. Nazwiemy go utils.js i będziemy umieszczać w nim kod wspólny dla różnych aplikacji. Później każda nowa aplikacja, którą stworzymy, będzie mogła odwoływać się zarówno do utils.js, jak i skryptu zawierającego kod JavaScript specyficzny dla aplikacji. request = createRequest(); validation.js żądanie createRequest() {...} okay ay username Funkcja createRequest() jest taka sama we wszystkich aplikacjach, więc wyciągniemy ją z pliku validation.js i umieścimy w nowym skrypcie narzędziowym, którego będziemy używać we wszystkich aplikacjach. function createReq { ... } utils.js Większość tego jest specyficzna dla aplikacji... Trudno wykorzystać to ponownie. 92 Rozdział 2. Projektowanie aplikacji w metodologii Ajax Utwórz nowy plik o nazwie utils.js. Napisz w nim funkcję createRequest(), której kod znajdziesz w poprzednim rozdziale lub na stronie 91, i zapisz zmiany. Wprowadź każdą z tych zmian do własnego kodu, odhaczając kolejne punkty. function createReq { ... } utils.js function createRequest() {
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Head First Ajax. Edycja polska
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ą: