Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00151 010452 11038680 na godz. na dobę w sumie
Head Rush Ajax (Rusz głową!) - książka
Head Rush Ajax (Rusz głową!) - książka
Autor: Liczba stron: 440
Wydawca: Helion Język publikacji: polski
ISBN: 83-246-0556-8 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> ajax
Porównaj ceny (książka, ebook, audiobook).

Poznaj technologię Ajax w szybki i niekonwencjonalny sposób!

Jeśli masz dosyć czekania na przeładowanie strony po każdym kliknięciu łącza, zastanawiasz się, dlaczego potwierdzanie transakcji w sieci trwa tak długo i chcesz, aby tworzone przez Ciebie aplikacje internetowe były pozbawione tych irytujących cech, naprzeciw wychodzi Ci technologia Ajax. Jest to połączenie języka JavaScript i XML, dzięki któremu strony WWW działają naprawdę błyskawicznie. Jeśli obawiasz się, że nauka tej technologii wiąże się z koniecznością zaopatrzenia się w kilka opasłych tomisk, z analizowaniem przykładów liczących setki linii kodu i żmudnym zapamiętywaniem dziesiątek parametrów, jesteś w błędzie. Sięgnij po 'Head Rush Ajax', otwórz swój umysł i przekonaj się, że nauka może być świetną zabawą!

Książka 'Head Rush Ajax' to niezwykły podręcznik, za którego pomocą Ajax odsłoni przed Tobą wszystkie swoje sekrety. Autor książki, korzystając z najnowszych odkryć dotyczących metod przekazywania wiedzy, przedstawi Ci wszystkie zagadnienia, które są niezbędne, aby projektować i budować wydajne aplikacje sieciowe. Poznasz język JavaScript i nauczysz się pisać asynchroniczne żądania będące podstawą Ajaksa, użyjesz obiektowego modelu dokumentu (DOM) i znaczników XML. Zanim się zorientujesz, zostaniesz ekspertem specjalizującym się w Ajaksie.

Zapomnij o powolnych witrynach WWW i nudnej nauce.
Zajmij się tworzeniem aplikacji internetowych następnej generacji!

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

Darmowy fragment publikacji:

Head Rush Ajax Autor: Brett McLaughlin T‡umaczenie: Piotr Rajca ISBN: 978-83-246-0556-8 Tytu‡ orygina‡u: Head Rush Ajax Format: B5, stron: 440 Poznaj technologiŒ Ajax w szybki i niekonwencjonalny spos(cid:243)b! (cid:149) Napisz wydajny kod JavaScript generuj„cy ¿„dania asynchroniczne (cid:149) Dowiedz siŒ, czym jest obiektowy model dokumentu (cid:149) Opanuj tajniki przetwarzania plik(cid:243)w XML (cid:149) Tw(cid:243)rz w‡asne aplikacje w technologii Ajax Je(cid:156)li masz dosy(cid:230) czekania na prze‡adowanie strony po ka¿dym klikniŒciu ‡„cza, zastanawiasz siŒ, dlaczego potwierdzanie transakcji w sieci trwa tak d‡ugo i chcesz, aby tworzone przez Ciebie aplikacje internetowe by‡y pozbawione tych irytuj„cych cech, naprzeciw wychodzi Ci technologia Ajax. Jest to po‡„czenie jŒzyka JavaScript i XML, dziŒki kt(cid:243)remu strony WWW dzia‡aj„ naprawdŒ b‡yskawicznie. Je(cid:156)li obawiasz siŒ, ¿e nauka tej technologii wi„¿e siŒ z konieczno(cid:156)ci„ zaopatrzenia siŒ w kilka opas‡ych tomisk, z analizowaniem przyk‡ad(cid:243)w licz„cych setki linii kodu i ¿mudnym zapamiŒtywaniem dziesi„tek parametr(cid:243)w, jeste(cid:156) w b‡Œdzie. SiŒgnij po (cid:132)Head Rush Ajax(cid:148), otw(cid:243)rz sw(cid:243)j umys‡ i przekonaj siŒ, ¿e nauka mo¿e by(cid:230) (cid:156)wietn„ zabaw„! Ksi„¿ka (cid:132)Head Rush Ajax(cid:148) to niezwyk‡y podrŒcznik, za kt(cid:243)rego pomoc„ Ajax ods‡oni przed Tob„ wszystkie swoje sekrety. Autor ksi„¿ki, korzystaj„c z najnowszych odkry(cid:230) dotycz„cych metod przekazywania wiedzy, przedstawi Ci wszystkie zagadnienia, kt(cid:243)re s„ niezbŒdne, aby projektowa(cid:230) i budowa(cid:230) wydajne aplikacje sieciowe. Poznasz jŒzyk JavaScript i nauczysz siŒ pisa(cid:230) asynchroniczne ¿„dania bŒd„ce podstaw„ Ajaksa, u¿yjesz obiektowego modelu dokumentu (DOM) i znacznik(cid:243)w XML. Zanim siŒ zorientujesz, zostaniesz ekspertem specjalizuj„cym siŒ w Ajaksie. (cid:149) Podstawy technologii Ajax (cid:149) JavaScript i ¿„dania asynchroniczne (cid:149) Aplikacje oparte na DOM (cid:149) Tworzenie interfejs(cid:243)w u¿ytkownika (cid:149) Korzystanie z plik(cid:243)w XML (cid:149) Mo¿liwo(cid:156)ci technologii JSON (cid:149) Obs‡uga ¿„daæ POST Zapomnij o powolnych witrynach WWW i nudnej nauce. Zajmij siŒ tworzeniem aplikacji internetowych nastŒpnej generacji! Wydawnictwo Helion ul. Ko(cid:156)ciuszki 1c 44-100 Gliwice tel. 032 230 98 63 e-mail: helion@helion.pl Spis treści (skrócony) Spis treści Wprowadzenie 1 Zastosowanie technologii Ajax: aplikacje internetowe dla nowego pokolenia 2 Zastosowanie odpowiedniego języka: zgłaszanie żądań w technologii Ajax Przerywnik 3 Oślepiła mnie asynchronicznością: aplikacje asynchroniczne 4 Dendrologia stron WWW: obiektowy model dokumentu 4,5 Dodatkowa pomoc: tworzenie aplikacji korzystających z DOM-u 5 Powiedz więcej — użyj metody POST: żądania POST Przerywnik 6 Więcej niż mogą wyrazić słowa: żądania i odpowiedzi XML 7 Walka do samego końca: JSON a XML Dodatek 1.: Kilka specjalnych dodatków: dodatki Dodatek 2.: „Interesuje mnie jedynie KOD!”: Narzędzia ułatwiające korzystanie z technologii Ajax i obsługę DOM Skorowidz 15 27 91 153 165 227 269 303 343 361 395 417 427 433 Spis treści (na serio) Wprowadzenie Twój mózg koncentruje się na technologii Ajax. Podczas gdy Ty starasz się czegoś nauczyć, Twój mózg robi Ci przysługę i dba o to, abyś przez przypadek nie zapamiętał zdobywanych informacji. Twój mózg myśli sobie: „Lepiej zostawić trochę miejsca na bardziej istotne informacje, na przykład: jakich zwierząt unikać albo czy jeżdżenie na snowboardzie nago jest dobrym pomysłem”. A zatem, w jaki sposób możesz oszukać swój mózg i przekonać go, że Twoje życie zależy od znajomości tworzenia aplikacji asynchronicznych? Dla kogo jest ta książka? Wiemy, co sobie myśli Twój mózg Metapoznanie Zmuś swój mózg do posłuszeństwa Przeczytaj mnie Korektorzy techniczni Podziękowania 16 17 19 21 22 24 25 jesteś tutaj 5 head_rush_ajax.indd 5 head_rush_ajax.indd 5 2007-08-29 16:43:29 2007-08-29 16:43:29 Spis treści 1 Czy nie napisałeś wcześniej, że Ajax pozwoli mi na aktualizację wyświetlanych informacji bez konieczności odświeżania całej strony? Czy chodziło o zmianę zawartości jej fragmentu? Aplikacje internetowe dla nowego pokolenia Zastosowanie technologii Ajax Nadaj nowego blasku swoim aplikacjom internetowym. Czy męczy Cię toporny interfejs aplikacji internetowych i konieczność ciągłego czekania na wyświetlenie kolejnych stron? Cóż, nadszedł zatem czas, byś nadał swoim aplikacjom internetowym tego samego sosnowego zapachu i wyglądu, jaki mają normalne aplikacje. O czym myślimy? Myślimy o najnowszej technologii, jaka pojawiła się w dziedzinie WWW: technologii Ajax (ang. Asynchronous JavaScript and XML, czyli asynchroniczny JavaScript i XML), która stanowi dla Ciebie przepustkę do tworzenia wzbogaconych aplikacji internetowych — bardziej interaktywnych, szybciej reagujących na wykonywane operacje i łatwiejszych w obsłudze. Sięgnij zatem po próbną buteleczkę Ajaksa dołączoną do niniejszej książki: zabieramy się do wypolerowania i nadania nowego blasku Twoim aplikacjom internetowym. WWW odświeżona Witamy w nowym tysiącleciu „Odświeżanie? Nie potrzebujemy żadnego odświeżania!” Film utrwalający: rozdział 1. Utworzenie obiektu żądania PHP… na rzut oka Co serwer robił do tej pory… Co obecnie powinien robić serwer Inicjalizacja połączenia Nawiązanie połączenia z serwerem WWW Dodawanie procedury obsługi zdarzenia Pisanie kodu funkcji updatePage() W jaki sposób postrzegamy aplikacje internetowe… Przedstawiamy przeglądarkę WWW Co przeglądarka powinna zrobić z odpowiedzią przesłaną z serwera? Przekazywanie instrukcji przeglądarce Pobieranie odpowiedzi z serwera Sprawdzanie stanu gotowości żądania 60-sekundowe podsumowanie 28 29 33 38 42 46 48 49 52 56 61 62 64 66 70 72 74 81 86 Przeglądarka określa, w jaki sposób należy wykonać żądanie skierowane do serwera Kaśki. Przeglądarka WWW Żądanie przekazania liczby wszystkich sprzedanych desek getBoardsSold() 6 Spis treści JavaScript Twój kod prosi o przesłanie żądania, wywołując metodę request.send(null); Skrypt PHP Żądanie jest wysyłane przez przeglądarkę, a nie bezpośrednio przez kod napisany w JavaScripcie. head_rush_ajax.indd 6 head_rush_ajax.indd 6 2007-08-29 16:43:30 2007-08-29 16:43:30 Spis treści 2 Zgłaszanie żądań w technologii Ajax Zastosowanie odpowiedniego języka Czas dowiedzieć się, jak należy rozmawiać w sposób asynchroniczny. Jeśli chcesz napisać następną odlotową aplikację, będziesz musiał doskonale zrozumieć najdrobniejsze szczegóły technologii Ajax. W tym rozdziale znajdziesz szczegółowe informacje, a także plotki o pisaniu asynchronicznych skryptów JavaScript: dowiesz się, w jaki sposób wysyłać żądania z różnych przeglądarek, opanujesz stany gotowości i kody statusu, a nawet poznasz kilka dodatkowych sztuczek z repertuaru dynamicznego HTML-a. Kiedy skończysz lekturę tego rozdziału, będziesz zgłaszał żądania i obsługiwał odpowiedzi jak prawdziwy profesjonalista… A swoją drogą, czy wspominałem, że Twoi użytkownicy nie będą musieli na Ciebie czekać, kiedy Ty będziesz się uczył Ajaksa? Błyskawiczne dostawy pizzy Pizza Na Złamanie Karku z technologią Ajax ABC HTML-a: pobieranie informacji wpisywanych przez użytkownika Kod HTML i skrypty są łączone przez procedury obsługi zdarzeń Zastosuj DOM, by pobrać numer telefonu Gdzie jest przeglądarka Tworzenie obiektu żądania Zapewnienie poprawności działania w wielu przeglądarkach Kod JavaScript nie musi być umieszczany wewnątrz funkcji PHP… rzut oka Adresy URL żądań przekazują informacje do serwera Przesłanie żądania do serwera Pobieranie danych przesłanych z serwera Stany gotowości HTTP Sprawdzanie stanu gotowości Co robi przeglądarka? Pobranie odpowiedzi serwera z obiektu żądania Testowanie aplikacji do obsługi zamówień Kiedy przeglądarka zapisuje adresy URL żądań w pamięci podręcznej… 60-sekundowe podsumowanie 92 96 101 102 108 110 112 114 118 122 126 127 129 130 133 134 135 138 142 150 ; ) l l u n ( d n e s . t s e u q e r 1 i e n e z c ą ł o P e n a w o z i l a j c i n a z i ; e g a P e t a d p u = e g n a h c e t a t s y d a e r n o . t s e u q e r ; ) e u r t , l r u , T E G ( n e p o . t s e u q e r 2 e i c k a r t W i i a n a w o r e n e g i z d e w o p d o P H P t p y r k S W W W r e w r e S 3 i i e n a r e b o P i z d e w o p d o i a r e w r e s 4 i ź d e w o p d O a n a t y z c d o ) ( o f n I r e m o t s u C t e g t p i r c S a v a J ) ( e g a P e t a d p u t p i r c S a v a J 0 i e n e z c ą ł o P t s e j e n i e n a w o z i l a j c i n a z i . . . = t s e u q e r r a v W W W a n o r t S head_rush_ajax.indd 7 head_rush_ajax.indd 7 2007-08-29 16:43:31 2007-08-29 16:43:31 jesteś tutaj 7 Spis treści 3 Aplikacje asynchroniczne Oślepiła mnie asynchronicznością Poczekalnia? Przykro nam, ale u nas coś takiego nie istnieje. To jest WWW, a nie gabinet lekarski i nikt tu nie chce siedzieć i czekać na zakończenie pracy serwera, czytając ilustrowane magazyny sprzed sześciu miesięcy. Zobaczyłeś już, w jaki sposób technologia Ajax pozwoli Ci pozbyć się konieczności odświeżania stron, jednak teraz nadszedł czas, by do listy cech wyróżniających Twoje aplikacje dodać wrażliwość i szybkość reakcji na działania wykonywane przez użytkownika. W tym rozdziale dowiesz się, w jaki sposób przesyłać żądania użytkownika do serwera i zapewnić mu możliwość dalszego korzystania z aplikacji w trakcie oczekiwania na odpowiedź. Chociaż w sumie… źle się wyraziłem. W tym rozdziale nie będzie żadnego oczekiwania. Formularz HTML JavaScript Skrypt PHP Co tak naprawdę oznacza asynchroniczność? Tworzenie internetowego ekspresu do kawy, wykorzystującego technologię Ajax Cykle programowania aplikacji używających technologii Ajax Umieszczanie kodu JavaScript w osobnych plikach Podział kodu JavaScript Wysyłanie żądań asynchronicznych Pobieranie wartości zaznaczonego przycisku z grupy przycisków opcji Rozmowy przy espresso: Aplikacja Asynchroniczna i Synchroniczna Odczyt tekstowej zawartości elementu div Zapis tekstu wewnątrz elementu div Czyszczenie pól formularza PHP… na rzut oka Pisanie funkcji zwrotnej Przedstawiamy metodę substring() JavaScriptu Ostateczny test (prawda?) Potrzeba nam dwóch obiektów żądań! Tworzenie dwóch obiektów żądania Witamy w asynchronicznym świecie! 166 171 177 180 182 185 189 190 192 192 200 202 204 205 210 214 215 221 8 Spis treści head_rush_ajax.indd 8 head_rush_ajax.indd 8 2007-08-29 16:43:32 2007-08-29 16:43:32 Spis treści 4 Obiektowy model dokumentu Dendrologia stron WWW Poszukiwane: strony WWW zapewniające możliwość łatwej modyfikacji swojej zawartości. Czas wziąć sprawy w swoje ręce i rozpocząć pisanie kodu, który będzie dynamicznie modyfikował zawartość stron WWW. Dzięki wykorzystaniu obiektowego modelu dokumentu (w skrócie DOM, z ang. Document Object Model) Twoje strony mogą rozpocząć zupełnie nowe życie, odpowiadać na czynności wykonywane przez użytkowników i pomóc Ci raz na zawsze pozbyć się konieczności tego koszmarnego odświeżania. Kiedy zakończysz lekturę tego rozdziału, będziesz w stanie dodawać, usuwać i aktualizować zawartość stron WWW praktycznie we wszystkich jej miejscach. Czy potrzebujesz dynamicznej aplikacji? Poznaj DOM Stosowanie DOM wraz z technologią Ajax Jak ten kod HTML widzi przeglądarka Napisz swój własny… słownik WWW Dla przeglądarki kolejność ma znaczenie Przeglądarki widzą świat do góry nogami Drzewa DOM Poruszanie się po drzewie DOM Węzeł wie… niemal wszystko Niektóre przeglądarki nie rozpoznają klasy Node Wielki konkurs programistyczny rozdziału 4. 229 230 234 239 241 244 251 252 258 259 263 265 head title p „Przeszukiwanie drzew binarnych” „Poniżej przedstawiliśmy dwa sposoby przeszukiwania drzew binarnych:” „Przeszukiwanie” div em „w głąb” „jest optymalne w przypadkach poszukiwania elementów, które znajdują się w odległych od siebie miejscach drzewa.” html body „Przeszukiwanie” div em „wszerz” się do „lepiej nadaje poszukiwania elementów położonych blisko siebie.” „Listę naszych produktów możesz znaleźć w” p a . „Menu głównym” jesteś tutaj 9 head_rush_ajax.indd 9 head_rush_ajax.indd 9 2007-08-29 16:43:33 2007-08-29 16:43:33 Spis treści 4 .5 Tworzenie aplikacji korzystających z DOM-u Dodatkowa pomoc Z niecierpliwością czekasz na kolejne informacje o DOM? W poprzednim rozdziale przeszedłeś błyskawiczny kurs najlepszego sposobu aktualizacji stron WWW: obiektowego modelu dokumentu, w skrócie DOM. Przypuszczam jednak, że chciałbyś dalej zajmować się tym tematem, dlatego też w tym rozdziale wykorzystasz poznane informacje i bazując na nich, napiszesz świetną aplikację wykorzystującą możliwości, jakie daje DOM. Jednocześnie poznasz kilka nowych procedur obsługi zdarzeń, dowiesz się, w jaki sposób zmieniać style węzłów i tworzyć dynamiczne, przyjazne dla użytkownika aplikacje internetowe. W tym rozdziale podniesiesz swoje umiejętności w posługiwaniu się DOM-em na zupełnie nowy poziom. Każdy jest krytykiem Jaki jest plan gry? Ogólny obraz aplikacji Przygotowywanie okładek płyt CD Programowe dodawanie procedur obsługi zdarzeń Dodawanie płyty do listy pięciu najlepszych Uważaj na słowo kluczowe „this” Dodawanie potomków do elementu Element może mieć tylko jednego rodzica Kolejne modyfikacje naszego drzewa DOM Ostateczny test aplikacji 270 273 274 276 280 272 284 286 291 293 299 Kliknięcie Kliknięcie Kliknięcie 10 Spis treści head_rush_ajax.indd 10 head_rush_ajax.indd 10 2007-08-29 16:43:34 2007-08-29 16:43:34 Spis treści 5 Żądania POST Powiedz więcej — użyj metody POST To właśnie na ten rozdział czekałeś. Prosiłeś o niego i wiedziałeś, że kiedyś się go doczekasz: w końcu porzucimy wywołanie send(null) i dowiemy się, jak przesyłać do serwera więcej danych. Oczywiście będzie to wymagało od nas nieco większego nakładu pracy, jednak kiedy skończysz lekturę tego rozdziału, to będziesz w stanie asynchronicznie przesyłać do serwera znacznie więcej niż „nic”. A zatem zapnij pasy, bo rozpoczynamy przejażdżkę po krainie typów zawartości i nagłówków żądań: jesteśmy w kraju rządzonym przez metodę POST. Stali klienci są najlepsi Przesyłanie formularza przy wykorzystaniu technologii Ajax Przesłanie zamówienia do serwera PHP… na rzut oka Kiedy coś pójdzie źle DOM jest połączony z tym, co widzi użytkownik Testowanie aplikacji do zamawiania pizzy Komunikaty o błędach i nagłówki odpowiedzi Serwer odpowiada Obsługa błędów w aplikacji Żądania GET a żądania POST Serwer WWW dekoduje dane POST Przesyłanie większej ilości danych dzięki zastosowaniu metody POST Sprawdzenie żądań POST Tajemnicze dane POST Nagłówki żądania Nagłówki odpowiedzi Określanie typu zawartości 304 305 307 310 311 313 315 318 319 320 322 324 325 329 331 332 333 334 No dobrze, czy zatem jesteśmy gotowi do uruchomienia tej nowej wersji aplikacji? zlozZamowienie.php D a ne P O S T Serwer pizzerii zlozZamowienie.php head_rush_ajax.indd 11 head_rush_ajax.indd 11 2007-08-29 16:43:36 2007-08-29 16:43:36 jesteś tutaj 11 Spis treści 6 Żądania i odpowiedzi XML Więcej niż mogą wyrazić słowa Czy kiedykolwiek miałeś uczucie, że nikt Ciebie nie słucha? Czasami zwykły, ludzki język nie wystarcza, kiedy próbujesz się z kimś porozumieć. Jak na razie we wszystkich żądaniach i odpowiedziach używałeś zwyczajnego tekstu. Nadszedł jednak czas, aby wyzwolić się z tej tekstowej klatki. W tym rozdziale wypłyniemy na szerokie wody XML-a i nauczymy nasze serwery, w jaki sposób mogą powiedzieć więcej, niż kiedykolwiek mogłyby powiedzieć, używając zwyczajnego tekstu. A jakby tego było mało, nauczysz posługiwania się językiem XML także swoje żądania, choć akurat to nie zawsze będzie dobrym pomysłem (więcej na ten temat dowiesz się w dalszej części rozdziału). Przygotuj się… Kiedy już skończysz lekturę tego rozdziału, Twoje żądania i odpowiedzi nigdy już nie będą takie same. Serwery nie muszą wiele mówić Mów głośniej! XML: właśnie to przepisał nam lekarz Czy pamiętasz aplikację Mega-Deski? Problem, jaki występuje w sklepie Mega-Deski Problemy z niestandardowymi formatami danych Zrealizujmy receptę na XML PHP… rzut oka Pobieranie przesłanego kodu XML przy użyciu właściwości responseText Czy pamiętasz drzewa DOM? Stosowanie właściwości responseXML Odnajdywanie elementów na podstawie nazwy znacznika Testowanie wykorzystania XML-a w aplikacji Mega-Deski XML jest językiem do definiowania innych języków Nie próbuj używać XML-a do wszystkiego XML w żądaniach? Jaki format danych zastosować? 362 363 366 367 368 370 371 372 374 376 377 378 382 384 385 386 390 html head title body „Przeszukiwanie drzew binarnych” p „Poniżej przedstawiliśmy dwa sposoby przeszukiwania drzew binarnych:” p a . „Menu głównym” „Listę naszych produktów możesz znaleźć w” vib div „lepiej nadaje się do poszukiwania elementów położonych blisko siebie.” em „wszerz” „Przeszukiwanie” „Przeszukiwanie” em „w głąb” „jest optymalne w przypadkach poszukiwania elementów, które znajdują się w odległych od siebie miejscach drzewa.” 12 Spis treści head_rush_ajax.indd 12 head_rush_ajax.indd 12 2007-08-29 16:43:38 2007-08-29 16:43:38 Spis treści 7 JSON a XML Walka do samego końca Nadszedł czas na powrót do szkoły podstawowej. Czy pamiętasz te czasy, gdy różnice poglądów były rozwiązywane przy użyciu ostrych słów, pięści i nieudolnych imitacji kung-fu? Kiedy nic bardziej nie pobudzało emocji niż okrzyk „Biją się!”, usłyszany w sali jakiejś knajpki? W tym rozdziale mamy zamiar wrócić właśnie do tamtych czasów i zostawić za sobą przyjacielskie słowa i dobre zasady. XML i JSON — dwa różne formaty zapisu danych, wykorzystywane do wysyłania i odbierania danych w asynchronicznych żądaniach, są już gotowe, by udowodnić swoją wartość na ringu. Przygotuj zatem tabliczki z ocenami i zajmij miejsce przy stoliku. Nowy format zapisu danych Przegląd stosowanych formatów żądań i odpowiedzi Walka na słowa: XML a JSON Do operowania na danych XML używa się DOM Do operowania na danych w formacie JSON używa się „zwyczajnego” JavaScript JSON to JavaScript Format zapisu danych JSON JSON na serwerze Dane JSON są przesyłane w postaci tekstowej W jakim formacie należy zapisać dane przekazywane w żądaniach Który z formatów zapisu danych jest lepszy? 396 397 399 401 402 404 405 408 410 411 413 totals[1].bootsSold totals[0] totals[1] totals[2] totals[3] { „totals”: [ { location”:”Vail”, boardsSold”:642, bootsSold”:86, bindingsSold”:19}, { location”:”Santa Fe”, boardsSold”:236, bootsSold”:45, bindingsSold”:32}, { location”:”Boulder”, boardsSold”:453, bootsSold”:90, bindingsSold”:16 }, {“location”:”Denver”, “boardsSold”:379, bootsSold”:94, bindingsSold”:18} ]} totals[3].boardsSold totals[2].bindingsSold head_rush_ajax.indd 13 head_rush_ajax.indd 13 2007-08-29 16:43:39 2007-08-29 16:43:39 jesteś tutaj 13 Spis treści D.1 Dodatek 1.: Dodatki Kilka specjalnych dodatków Specjalnie dla Ciebie: prezent od naszego zespołu Head First Labs. A tak naprawdę w tym dodatku znajdziesz aż pięć specjalnych dodatków. Chcielibyśmy móc zostać nieco dłużej i powiedzieć Ci znacznie więcej, jednak nadszedł czas, kiedy musisz samemu wkroczyć w okrutny świat tworzenia aplikacji internetowych, wyposażony jedynie w swoją wiedzę zdobytą podczas lektury niniejszej książki. Nie mogliśmy jednak zostawić Cię bez niewielkiego dodatkowego wyposażenia, a zatem przyjrzyj się pięciu najważniejszym sprawom, jakie udało się nam jeszcze wcisnąć do tej książki. Biblioteki i pakiety narzędziowe wspomagające tworzenie aplikacji, korzystających z technologii Ajax script.aculo.us oraz inne biblioteki wspomagające tworzenie interfejsu użytkownika Sprawdzanie DOM Stosowanie formatu JSON w skryptach PHP Stosowanie funkcji eval() do przetwarzania danych w formacie JSON 418 420 422 424 425 D.2 Dodatek 2.: Narzędzia ułatwiające korzystanie z technologii Ajax i obsługę DOM Najwyższy czas na małą nagrodę. W niniejszym dodatku znajdziesz kod, który był nieco zbyt złożony, aby opisywać go we wcześniejszych rozdziałach książki, w miejscach, gdzie go używaliśmy, jednak obecnie powinieneś już być w stanie przeanalizować i zrozumieć działanie wszystkich prezentowanych tu funkcji, ułatwiających korzystanie z technologii Ajax oraz operowanie na DOM. ajax.js Stosowanie skryptu ajax.js text-utils.js Stosowanie skryptu text-utils.js 428 429 430 431 433 Skorowidz S 14 Spis treści head_rush_ajax.indd 14 head_rush_ajax.indd 14 2007-08-29 16:43:40 2007-08-29 16:43:40 Rozdział 1. Aplikacje internetowe dla nowego pokolenia Zastosowanie technologii Ajax Czyści aplikacje internetowe. SZYBKO! Nadaj nowego blasku swoim aplikacjom internetowym. Czyż nie męczy Cię toporny interfejs aplikacji internetowych i konieczność ciągłego czekania na wyświetlenie kolejnych stron? Cóż, nadszedł zatem czas, byś nadał swoim aplikacjom internetowym tego samego sosnowego zapachu i wyglądu, jaki mają normalne aplikacje. O czym myślę? Myślę o najnowszej technologii, która pojawiła się w WWW: technologii Ajax (ang. Asynchronous JavaScript and XML, czyli asynchroniczny JavaScript i XML), która stanowi dla Ciebie przepustkę do tworzenia wzbogaconych aplikacji internetowych — bardziej interaktywnych, szybciej reagujących na wykonywane operacje i łatwiejszych w obsłudze. Sięgnij zatem po próbną buteleczkę Ajaksa dołączoną od niniejszej książki: zabieramy się do wypolerowania i nadania nowego blasku Twoim aplikacjom internetowym. to jest nowy rozdział 27 head_rush_ajax.indd 27 head_rush_ajax.indd 27 2007-08-29 16:43:54 2007-08-29 16:43:54 Tradycyjne aplikacje internetowe WWW, odświeżona Prawdę rzekłszy, już w tym rozdziale powiem, w jaki sposób pozbędziesz się konieczności odświeżania i ponownego wyświetlania stron. Czy klienci są zmęczeni czekaniem na wyświetlenie kolejnych stron podczas składania zamówień w Twojej witrynie? Czy ciągle słyszysz skargi, że każde kliknięcie przycisku powoduje odświeżenie strony? Jeśli właśnie tak się dzieje, to znak, iż nadszedł czas, by coś zrobić z programem — zmodyfikować go i podnieść na wyższy, lepszy poziom. Witam w świecie aplikacji internetowych nowej generacji, w którym JavaScript, odrobina dynamicznego HTML-a i nieco XML-a może nadać Twym aplikacjom internetowym zupełnie nowego, bardzie dynamicznego i interaktywnego charakteru, do tej pory właściwego jedynie zwykłym aplikacjom. Przyjrzyjmy się aplikacjom internetowym, do których jesteś przyzwyczajony — zarówno Ty, jak i Twoi klienci. Stare rozwiązanie (pomyśl o roku 1999) Użytkownicy wpisują informacje w formularzu HTML i klikają przyciski. Przeglądarka przesyła żądanie do serwera WWW… …a następnie serwer odpowiada na każde żądanie, przesyłając całkowicie nową stronę HTML, zaktualizowaną i zawierającą odpowiednie nowe dane. Żądanie Odpowiedź Żądanie Odpowiedź Żądanie Odpowiedź Web Server Następnie cały proces jest powtarzany, jeszcze raz… i kolejny… Co gorsze, nie musisz czekać jedynie na odpowiedź serwera — każdy cykl żądanie-odpowiedź oznacza konieczność ponownego wyświetlenia całej strony. Czy nie byłoby super, gdyby istniało jakieś lepsze rozwiązanie? O rany!… w międzyczasie, kiedy czekaliśmy na wyświetlenie tych wszystkich kolejnych stron, ktoś zgłosił już lepszą ofertę. I to by było wszystko, jeśli chodzi o szybkość reakcji aplikacji internetowych! 28 Rozdział 1 head_rush_ajax.indd 28 head_rush_ajax.indd 28 2007-08-29 16:43:55 2007-08-29 16:43:55 Aplikacje nowej generacji Witamy w nowym tysiącleciu! Aplikacje wykorzystujące ten stary model żądanie-odpowiedź może tworzyć każdy, jeśli jednak chcesz tworzyć szybsze aplikacje, które zapewnią użytkownikom poczucie, że pracują z normalnym oprogramowaniem biurkowym, to będziesz potrzebował czegoś nowego — Ajaksa, czyli całkowicie nowego podejścia do zagadnień pisania aplikacji internetowych: Żadnego oczekiwania… Strona WWW wysyła żądanie, wykorzystując do tego celu funkcję języka JavaScript, która obsługuje komunikację z serwerem. Żądanie JavaScript Kod napisany w języku JavaScript przesyła żądanie do serwera. Web Server …kiedy zaczniesz tworzyć aplikacje wykorzystujące technologię Ajax Strona WWW jest dynamicznie aktualizowana z wykorzystaniem funkcji napisanej w języku JavaScript, przy czym nie jest konieczne ponowne wyświetlanie całej zawartości strony. Jeśli chodzi o serwer WWW, to nic się nie zmienia — podobnie jak wcześniej, także i teraz odpowiada on na wszystkie zgłaszane żądania. Odpowiedź serwera zawiera tylko te dane, których potrzebuje strona… bez żadnego kodu HTML ani innych informacji związanych z prezentacją. Odpowiedź JavaScript Aktualizacja Aktualizacja Przeważająca część strony nie zmienia się… jedynie jej wybrane fragmenty są aktualizowane lub zmieniane — te, które powinny być zmienione. Web Server jesteś tutaj 29 head_rush_ajax.indd 29 head_rush_ajax.indd 29 2007-08-29 16:43:55 2007-08-29 16:43:55 Aplikacje asynchroniczne Nie tak szybko, kolego… napisałeś, że te aplikacje będą szybciej reagowały na czynności wykonywane przez użytkownika. A okazuje się, że wciąż musimy czekać na zakończenie działania funkcji napisanej w języku JavaScript, nieprawdaż? Aplikacje utworzone w technologii Ajax są asynchroniczne. Jeśli jeszcze tego nie zrozumiałeś, to zwróć uwagę, iż w tej książce zajmujemy się wykorzystaniem technologii Ajax do tworzenia odlotowych aplikacji internetowych. Jak na razie, zobaczyłeś, w jaki sposób aplikacje korzystające z Ajaksa mogą wymieniać informacje z serwerem WWW bez konieczności odświeżania i ponownego wyświetlania całej strony, jednak Ajax to znacznie więcej niż jedynie możliwość usprawnienia interfejsu użytkownika. Podstawowym narzędziem w walce z irytującą koniecznością odświeżania stron jest fakt, iż aplikacje wykorzystujące technologię Ajax mogą prowadzić wymianę danych z serwerem w sposób asynchroniczny. Innymi słowy, JavaScript może przesyłać żądanie do serwera i oczekiwać na odpowiedź, a Ty w tym samym czasie możesz dalej wypełniać kolejne pola formularza, a nawet klikać przyciski — w międzyczasie, w tle, serwer będzie realizował swoje zadania. Nieco później, kiedy serwer zakończy pracę, Twój kod może zaktualizować jedynie wybrane fragmenty strony, które uległy zmianie, jednak użytkownik nigdy nie czeka. Właśnie na tym polega potęga możliwości asynchronicznej wymiany danych z serwerem! Dodaj do tego aktualizację wybranych fragmentów stron bez konieczności ich całkowitego odświeżania, a otrzymasz aplikacje wykorzystujące technologię Ajax. Nie przejmuj się, jeśli nie do końca rozumiesz, o co w tym wszystkim chodzi — w dalszych rozdziałach książki znacznie bardziej szczegółowo i wyczerpująco zajmę się zagadnieniami programowania asynchronicznego. 30 Rozdział 1 head_rush_ajax.indd 30 head_rush_ajax.indd 30 2007-08-29 16:43:58 2007-08-29 16:43:58 Aplikacje nowej generacji Hm… przepraszam… jeśli już skończyliście z tą całą teorią, to myślę, że mam dla was okazję do praktycznego zastosowania tego całego Ajaksa. Najczęściej zadawane pytania P. Hm… wszystko mi się pomieszało. Czyli teraz już nie korzystamy z modelu żądanie-odpowiedź? O. Korzystamy — Twoje strony cały czas zgłaszają żądania i odbierają odpowiedzi. Zmienił się natomiast sposób wykonywania tych żądań oraz ich obsługi — teraz zamiast zwyczajnego przesyłania formularza, będą wykonywane funkcje napisane w języku JavaScript. P. A dlaczego nie można w standardowy sposób przesłać formularza? Co nam w zasadzie daje zastosowanie technologii Ajax? O. Kod JavaScriptu tworzący aplikację w technologii Ajax przesyła żądanie do serwera, lecz nie czeka na otrzymanie odpowiedzi. Co więcej, po odebraniu odpowiedzi przesłanej przez serwer, kod JavaScriptu może ją obsłużyć bez konieczności odświeżenia i ponownego wyświetlania całej strony. P. A zatem w jaki sposób strona odbiera odpowiedź z serwera? O. To właśnie w tym miejscu do akcji wkraczają asynchroniczne mechanizmy technologii Ajax. Kiedy serwer przesyła odpowiedź, kod napisany w języku JavaScript może umieścić na stronie przesłane wartości, zmienić obrazek, a nawet wyświetlić całkowicie nową stronę WWW. A podczas wykonywania tych wszystkich operacji użytkownik nigdy nie będzie musiał czekać. P. Czy to znaczy, że powinienem używać technologii Ajax do obsługi wszystkich żądań? O. Nie — wciąż istnieje wiele sytuacji, w których warto stosować tradycyjny model tworzenia aplikacji internetowych. Na przykład, kiedy użytkownik wypełnił wszystkie pola formularza, to można mu udostępnić możliwość kliknięcia przycisku Wyślij zapytanie i wysłania całego formularz do serwera, bez wykorzystywania Ajaksa. Możliwości technologii Ajax powinieneś wykorzystywać do wykonywania i obsługi większości operacji związanych z dynamicznym przetwarzaniem stron, takich jak zmiana obrazków, aktualizacja pól formularzy czy też reagowanie na czynności wykonywane przez użytkownika. Jeśli chcesz zmienić jedynie fragment strony, to koniecznie powinieneś użyć do tego celu technologii Ajax. P. Wspominałeś coś o XML-u… O. Czasami kod JavaScript będzie wykorzystywał dane XML do wymiany informacji pomiędzy serwerem a aplikacją, jednak użycie XML-a nie zawsze będzie konieczne. W kolejnych rozdziałach poświęcimy wiele uwagi określaniu, kiedy i w jaki sposób należy korzystać z danych XML. P. A AJAX jest jedynie akronimem pochodzącym od angielskich słów: Asynchronous JavaScript and XML? O. Poprawnie należy to zapisywać jako „Ajax” i prawdę rzekłszy, to nie jest akronim. Choć bez wątpienia na taki wygląda… i nawet pasuje… hm, nie pytaj mnie, to nie ja wymyśliłem ten termin! Jesse James Garrett, który pierwszy użył terminu „Ajax” stwierdził, że nie wymyślił go jako skrótu. I bądź tu człowieku mądrym! head_rush_ajax.indd 31 head_rush_ajax.indd 31 2007-08-29 16:43:58 2007-08-29 16:43:58 jesteś tutaj 31 Mega-Deski Kaśka, królowa snowboardu i internetowy przedsiębiorca. Teraz, kiedy sprzedaję ulepszone przeze mnie deski snowboardowe, na stronie WWW stworzyłam formularz, który prezentuje aktualną liczbę sprzedanych desek, jednak za każdym razem, gdy chcę zaktualizować wyniki, odświeżana jest cała strona wyświetlona w przeglądarce. Czy myślisz, że ten cały Ajax może w tym coś pomóc? Oto aktualna postać aplikacji Kaśki, w której nie jest używana technologia Ajax. Aplikacja ta składa się z prostego formularza, który przesyła żądanie do skryptu PHP. Skrypt PHP sprawdza, ile desek zostało sprzedanych. Następnie, na podstawie ceny, za jaką Kaśka sprzedaje swoje deski oraz za ile je kupuje, skrypt wylicza ilość zarobionych przez nią pieniędzy. 32 Rozdział 1 head_rush_ajax.indd 32 head_rush_ajax.indd 32 2007-08-29 16:43:58 2007-08-29 16:43:58 Aplikacje nowej generacji „Odświeżanie? Nie potrzebujemy żadnego odświeżania!” Nie ma chyba nic bardziej denerwującego niż aplikacja, która ponownie wyświetla całą stronę za każdym razem, gdy klikniemy jakiś przycisk lub wpiszemy jakąś wartość. W przypadku zestawienia na stronie Kaśki, za każdym razem zmienia się jedynie kilka wyświetlanych cyfr, a pomimo to konieczne jest odświeżenie i ponowne wyświetlenie całej strony. W pierwszej kolejności określmy, dlaczego strona jest odświeżana… Kaśka klika ten przycisk, aby uzyskać aktualne wyniki sprzedaży desek. Serwer odbiera żądanie dotyczące przesłania informacji o liczbie sprzedanych desek… …i przesyła w odpowiedzi informację o liczbie sprzedanych desek oraz zaktualizowany zysk, a wszystko to w formie całkowicie nowej strony HTML. Żądanie przesłania aktualnych wyników sprzedaży desek Odpowiedź HTML ODŚWIEŻENIE! Przeglądarka wczytuje i wyświetla stronę przesłaną przez serwer. Żądanie przesłania aktualnych wyników sprzedaży desek Odpowiedź HTML ODŚWIEŻENIE! Kolejne odświeżenia… za każdym razem, gdy chcemy uzyskać nowe wyniki sprzedaży desek, musimy cierpliwie czekać z powodu konieczności odświeżania całej strony. jesteś tutaj 33 Kaśka ponownie klika przycisk, aby sprawdzić, czy nie sprzedano kolejnych desek. A wszystko to tylko po to, by zmienić kilka cyfr wyświetlonych na stronie… head_rush_ajax.indd 33 head_rush_ajax.indd 33 2007-08-29 16:43:59 2007-08-29 16:43:59 Pozbywamy się konieczności odświeżania strony Ajax spieszy na ratunek Czy widzisz, na czym polega problem? Za każdym razem, gdy Kaśka chce uzyskać aktualne informacje o liczbie sprzedanych desek, konieczne jest ponowne wyświetlanie całej strony, a Kaśka musi znosić internetową wersję śnieżnej ślepoty. Czy nie napisałeś wcześniej, że Ajax pozwoli mi na aktualizację wyświetlanych informacji bez konieczności odświeżania całej strony? Czy chodziło o zmianę zawartości jej fragmentu? Użyj technologii Ajax, aby usprawnić generowanie raportu ze sprzedaży… Zmodyfikujmy zatem stronę z raportem ze sprzedaży w taki sposób, aby przesyłała ona żądania o aktualne informacje z wykorzystaniem technologii Ajax. Następnie będziemy mogli odebrać odpowiedź z serwera i zaktualizować stronę za pomocą JavaScriptu i dynamicznego HTML-a. Żadnego odświeżania strony… i Kaśka ponownie będzie radosną snowboarderką. A może nawet zarobimy darmową deskę… 34 Rozdział 1 head_rush_ajax.indd 34 head_rush_ajax.indd 34 2007-08-29 16:44:01 2007-08-29 16:44:01 Aplikacje nowej generacji Aby przerobić raport ze sprzedaży Kaśki na aplikację wykorzystującą technologię Ajax, będziesz potrzebował kilku funkcji napisanych w języku JavaScript. Poniżej podałem nazwy trzech funkcji. Narysuj linię łączącą nazwy funkcji z opisami określającymi, jakie będzie znaczenie danej funkcji w końcowej wersji aplikacji. getBoardsSold() Utworzenie nowego obiektu służącego do komunikacji z serwerem. updatePage() Przesłanie do serwera żądania o aktualne informacje o liczbie sprzedanych desek. createRequest() Wyświetlenie na stronie aktualnych informacji o liczbie desek, jakie udało się sprzedać Kaśce oraz o wysokości zarobionej kwoty. . i j 9 8 e n o r t s a n ę i s e u d a n z ź d e i w o p d O j head_rush_ajax.indd 35 head_rush_ajax.indd 35 2007-08-29 16:44:01 2007-08-29 16:44:01 jesteś tutaj 35 Plan nowego raportu Kaśki Modyfikacja strony raportu Kaśki A zatem zastosujmy technologię Ajax do usprawnienia strony prezentującej wyniki sprzedaży internetowego sklepu Kaśki. Dzięki zastosowaniu Ajaksa możemy uniknąć konieczności odświeżania stron i znacząco ograniczyć ilość danych, jakie serwer musi przesłać w celu wyświetlenia aktualnego raportu. Poniżej opisałem, czym się zajmiesz podczas lektury dalszej części tego rozdziału: 1 Utworzysz nowy obiekt, który będzie przesyłał żądania do serwera. W pierwszej kolejności będziesz potrzebował funkcji, napisanej w języku JavaScript, służącej do utworzenia obiektu, który pozwoli na przesyłanie żądań i odbieranie odpowiedzi serwera. Tej funkcji nadamy nazwę createRequest(). html head title Mega-Deski /title meta http-equiv=”Content-Type” content=”text/html; link rel=”stylesheet” type=”text/css” href=”deski.css” / /head charset=ISO-8859-2” / Oto fragment kodu HTML bieżącej wersji aplikacji Mega-Deski. body h1 Mega-Deski:: Raport sprzedaży /h1 Ten kod napisany w języku JavaScript dodasz do sekcji nagłówka swojej strony. Funkcja createRequest() utworzy obiekt żądania. JavaScript 2 Napiszesz funkcję, która będzie żądała od serwera przesłania aktualnych informacji o sprzedaży. Następnie użyjesz obiektu utworzonego w kroku 1. do przesłania do serwera WWW żądania. Niezbędny kod umieścimy w kolejnej funkcji JavaScriptu, której nadamy nazwę getBoardsSold(). Funkcja ta będzie wywoływana w momencie, gdy Kaśka kliknie przycisk Pokaż mi kasę!. Kliknięcie przycisku Pokaż mi kasę! powoduje wygenerowanie żądania. 36 Rozdział 1 Następnie funkcja getBoardsSold() zapyta serwer o sumaryczną liczbę wszystkich sprzedanych desek. Żądanie przekazania liczby wszystkich sprzedanych desek To jest to samo żądanie, które serwer odbierał i obsługiwał w początkowej wersji aplikacji, gdzie jeszcze nie zastosowaliśmy Ajaksa… …jednak tym razem serwer nie musi przesyłać całego kodu HTML strony. Do przesłania żądania użyjemy tego obiektu żądania, utworzonego w kroku 1. head_rush_ajax.indd 36 head_rush_ajax.indd 36 2007-08-29 16:44:01 2007-08-29 16:44:01 Aplikacje nowej generacji 3 Zaktualizujesz raport sprzedaży Kaśki, używając kolejnej funkcji do wyświetlenia bieżących informacji. Teraz możesz już zaktualizować raport i wyświetlić w nim bieżące informacje na temat liczby sprzedanych desek oraz osiągniętego zysku. Do tego celu zastosujemy kolejną funkcję, napisaną w języku JavaScript, którą nazwiemy updatePage(). Obecnie odpowiedź zawiera jedynie liczbę sprzedanych desek. Aktualna liczba sprzedanych desek Funkcja updatePage() odbiera odpowiedź przesłaną z serwera. Liczba sprzedanych desek Kasa na wyciąg Kiedy funkcja updatePage() odbierze odpowiedź, oblicza zysk Kaśki, a następnie aktualizuje informacje prezentowane w raporcie. Ty m r a z e m s e r w e r n i e w y k o n u j e ż a d n y c h o b l i c z e ń . Nowe wartości. Słucham? Nie przejmuj się, jeśli nie rozumiesz wszystkiego, co napisałem… zwłaszcza informacji dotyczących żądań. Wszystkie te zagadnienia zostaną jeszcze szczegółowo opisane i wyjaśnione w dalszej części książki. Jak na razie, postaraj się zrozumieć podstawowe idee działania aplikacji korzystających z technologii Ajax. Zwróć szczególną uwagę na wykorzystanie funkcji JavaScriptu do zgłaszania żądań oraz na to, że serwer zwraca tylko konkretne informacje (w naszym przypadku — jedną liczbę), a nie cały kod HTML strony. Pozostała część strony WWW nigdy nie ulega zmianie… nie migocze, nie jest odświeżana, nic się z nią nie dzieje. jesteś tutaj 37 head_rush_ajax.indd 37 head_rush_ajax.indd 37 2007-08-29 16:44:02 2007-08-29 16:44:02 Kluczowe zagadnienia rozdziału 1. Już niedługo zabierzemy się za pisanie kodu. Najpierw jednak zrobimy mały „objazd” i zajmiemy się czym innym… Film utrwalający: Rozdział 1. Zapewne pomyślałeś sobie: „Co do diabła robi Film utrwalający prawie na samym początku rozdziału? To chyba nie jest normalne”. I masz rację… jednak to jest książka z serii Head Rush, pamiętasz? Zanim zaczniesz dalszą lekturę, zatrzymaj się i przeczytaj na głos każdą z podanych poniżej uwag. Następnie otwórz kolejną stronę i przygotuj się do wczytania podanych tu informacji do swojego mózgu. Każde z podanych zagadnień szczegółowo opiszemy i wyjaśnimy w dalszej części rozdziału. Aplikacje asynchroniczne wykonują żądania przy wykorzystaniu obiektu JavaScriptu, a nie poprzez przesyłanie formularza. Żądania i odpowiedzi są obsługiwane przez przeglądarkę, a nie bezpośrednio przez kod JavaScriptu. Kiedy przeglądarka odbierze odpowiedź na Twoje asynchroniczne żądanie, wywoła wskazaną przez Ciebie funkcję JavaScriptu, przekazując do niej odpowiedź otrzymaną z serwera. Nie żartuję… nie zabieraj się za czytanie następnej strony, dopóki nie przeczytasz NA GŁOS trzech powyższych uwag. Uwierz mi, nikt sobie nie pomyśli, że Ci z lekka odbiło (no, a jeśli nawet ktoś taki się znajdzie, to jednocześnie będzie pod wrażeniem Twojej mądrości i ogromnej wiedzy!). 38 Rozdział 1 head_rush_ajax.indd 38 head_rush_ajax.indd 38 2007-08-29 16:44:03 2007-08-29 16:44:03 Aplikacje nowej generacji Ściąga z HTML-a Czy czujesz, że przydałoby Ci się odświeżyć informacje na temat elementów div i span ? Na następnej stronie zajmiemy się tworzeniem kodu HTML, a zatem, zanim tam dotrzesz, zamieszczam krótkie przypomnienie z podstawowymi informacjami o tych dwóch najciekawszych elementach HTML, z jakimi możesz się spotkać. div Element div jest pojemnikiem, w którym można umieszczać inne, powiązane ze sobą elementy HTML i który pozwala na określanie ich wyglądu przy użyciu jednej reguły CSS. I d e n t y f i k a t o r e l em e n t u d i v m o ż e s z w y k o r z y s t a ć w a r k u s z u s t y l ów CSS , a b y w j e d n e j r e g u l e o k r e ś l i ć p o s t a ć c a ł e j z aw a r t o ś c i k o n k r e t n e g o e l em e n t u . div id=”menu” a href=”home.html” home /a a href=”books.html” writing /a a href=”links.html” resources /a a href=”lib.html” library /a /div Stosuj element div , aby grupować elementy o podobnym przeznaczeniu. ul span Elementy span pozwalają na wyróżnianie fragmentów tekstu. Postać tych elementów można w prosty sposób określać przy użyciu stylów CSS. li span class=”cd” Buddha Bar /span , span class=”artysta” Claude Challe /span /li li span class=”cd” When It Falls /span , span class=”artysta” Zero 7 /span /li Elementy span mogą służyć do wydzielania fragmentów tekstu, jednak nie powodują utworzenia nowych akapitów lub bloków. Elementy span nie tworzą nowych bloków tekstu, choć zapewniają możliwość określania wyglądu swojej zawartości przy użyciu stylów CSS. head_rush_ajax.indd 39 head_rush_ajax.indd 39 2007-08-29 16:44:04 2007-08-29 16:44:04 jesteś tutaj 39 Kod HTML strony Mega-Deski Prezentacja kodu HTML strony Mega-Deski Zacznijmy od rzeczy najważniejszych… Kaśka dysponuje już stroną WWW, zatem przyjrzyjmy się jej konstrukcji. Później zabierzemy się za dodawanie do niej całego kodu JavaScriptu, o którym pisałem wcześniej. Poniżej przedstawiłem aktualną postać kodu źródłowego strony prezentującej wyniki sprzedaży desek do snowbaordu Kaśki: Kaśka przeczytała książkę Head First HTML with CSS XHTML. Edycja polska, więc zna się na tych sprawach… html head title Mega-Deski /title meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-2” / link rel=”stylesheet” type=”text/css” href=”deski.css” / /head Tutaj dodamy element script … body h1 Mega-Deski:: Raport sprzedaży /h1 div id=”boards” table tr th Liczba sprzedanych desek /th td span id=”deski-sprzedane” 1012 /span /td /tr tr th Za ile ja sprzedaję /th td span id=”cena” 249.95 /span PLN /td /tr tr th Ile mnie kosztują /th td span id=”koszt” 84.22 /span PLN /td /tr /table h2 Kasa na wyciągi: span id=”kasa” 167718.76 /span PLN /h2 form method=”GET” action=”pobierzAktualneDane.php” input value=”Pokaż mi kasę!” type=”submit” / /form /div /body /html Kaśka używa zewnętrznego arkusza stylów. Tutaj jest wyświetlana całkowita liczba sprzedanych desek, którą będziesz musiał aktualizować… …a później będziesz musiał także wyliczyć nowy zysk Kaśki. A to jest przycisk, który Kaśka klika, żeby uaktualnić informacje wyświetlane na stronie raportu. W obecnej postaci kliknięcie tego przycisku powoduje wysłanie formularza, jednak już niedługo to zmienisz. 40 Rozdział 1 head_rush_ajax.indd 40 head_rush_ajax.indd 40 2007-08-29 16:44:05 2007-08-29 16:44:05 Kaśka podała w swoich elementach span atrybuty id, dzięki czemu może określić ich postać w arkuszu stylów CSS… span id=”deski-sprzedane” 1012 /span Aplikacje nowej generacji …a później będziemy mogli użyć tych identyfikatorów w naszych funkcjach JavaScriptu do aktualizacji liczb wyświetlanych w poszczególnych elementach span . span id=”kasa” 167718.76 /span Po prostu to zrób Czas przejść do działania. Pobierz przykłady do książki z serwera FTP wydawnictwa Helion (ftp://ftp.helion.pl/przyklady/hrajax.zip) i odszukaj w nich katalog rozdzial01/deski. Następnie otwórz w przeglądarce plik deski.html. Strona wyświetlona w Twojej przeglądarce powinna wyglądać dokładnie tak jak ta przedstawiona na powyższym rysunku. jesteś tutaj 41 head_rush_ajax.indd 41 head_rush_ajax.indd 41 2007-08-29 16:44:05 2007-08-29 16:44:05 Skrypt tworzący obiekt żądania Krok 1.: Utworzenie obiektu żądania createRequest() getBoardsSold() updatePage() Wróćmy do modyfikacji raportu Kaśki. W pierwszej kolejności będziesz potrzebował funkcji tworzącej nowy obiekt, który pozwoli na przesyłanie żądań do serwera. Zadanie to jest dosyć trudne i skomplikowane, gdyż w różnych przeglądarkach taki obiekt jest tworzony w różny sposób. Aby ułatwić Ci to zadanie, napisałem „gotowy” skrypt wykonujący to zadanie. Za każdym razem, kiedy zobaczysz symbol Gotowy , JavaScript powinieneś założyć, że prezentowany kod robi właśnie to, o co chodzi, dokładnie tak, jak zamieszczony poniżej skrypt tworzący obiekt żądania. A zatem, na razie musisz mi zaufać — w kolejnych rozdziałach poznasz więcej szczegółów na temat poniższego fragmentu kodu. Na razie po prostu go przepisz do swojego pliku i zobacz, co dzięki niemu możesz zrobić. W tym wierszu próbujemy utworzyć nowy obiekt żądania. A to jest typ obiektu żądania. Także w tych dwóch wierszach kodu próbujemy utworzyć obiekt żądania, jednak w sposób, który działa jedynie w przeglądarce Internet Explorer. Oto zmienna, w której zostanie zapisany obiekt żądania. var request = null; function createRequest() { try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (othermicrosoft) { try { request = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (failed) { request = null; } } } if (request == null) alert(“Nie udało się utworzyć obiektu żądania!”); } Teraz możesz sprawdzić, czy zmienna request wciąż ma wartość null. Jeśli faktycznie ma, to oznacza, że coś poszło nie tak… …i należy wyświetlić użytkownikowi stosowny komunikat przy wykorzystaniu funkcji alert() języka JavaScript. Gotowy JavaScript Jeśli próby utworzenia obiektu żądania nie powiodły się, to ten wiersz zapewni, że zmienna request będzie zawierała wartość null. Jeśli nie chce Ci się wpisywać tego kodu samodzielnie, to możesz go znaleźć w pliku tworzenie-zadania. txt w przykładach do książki, w katalogu rozdzial01/deski… …jednak poważnie rzecz biorąc, naprawdę powinieneś ten kod wpisać samemu. To pomoże Twojemu mózgowi przyzwyczaić się do pisania i myślenia o aplikacjach wykorzystujących technologię Ajax. 42 Rozdział 1 head_rush_ajax.indd 42 head_rush_ajax.indd 42 2007-08-29 16:44:06 2007-08-29 16:44:06 Do roboty! Dodaj przedstawiony kod do swojej strony deski.html, umieszczając go wewnątrz elementu head . Nie zapomnij o dodaniu znaczników script oraz /script . Aplikacje nowej generacji head title Mega-Deski /title meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-2” / link rel=”stylesheet” type=”text/css” href=”deski.css” / script language=”javascript” type=”text/javascript” /script /head Cały gotowy skrypt napisany w języku JavaScript ma zostać umieszczony w tym miejscu. Te znaczniki informują przeglądarkę, iż na stronie jest umieszczony kod skryptu oraz że został on napisany w języku JavaScript. P. Czy powinienem już dokładnie rozumieć, jak działa przedstawiony kod? O. Nie, nie musisz jeszcze rozumieć dokładnie tego kodu. Jak na razie wystarczy, żebyś mu się uważnie przyjrzał, opiszę go dokładniej w następnym rozdziale. P. Co to jest null? Zobaczyłem to słowo w gotowym fragmencie kodu JavaScript, ale nie jestem pewny, co ono oznacza. O. null to specjalna wartość, która faktycznie oznacza wartość pustą — nie- istniejącą referencję. Innymi słowy, to jest coś, co można by określić jako „anty- wartość”, jednak nie możesz mylić wartości null z wartością 0 lub false — gdyż one w żadnym przypadku nie są wartościami pustymi. Dlatego też nie mają one nic wspólnego z wartością null. Najczęściej zadawane pytania P. Czy obiekt żądania nosi nazwę „XMLHttpRequest” czy „ActiveXObject”? O. Może to być każdy z tych obiektów. Znacznie dokładniej zajmiemy się tym zagadnieniem w następnym rozdziale, jednak najprostsze wyjaśnienie jest takie, iż w różnych przeglądarkach konieczne jest używanie różnych obiektów żądań. P. A zatem, czy osoby, które używają moich aplikacji stosujących technologię Ajax, muszą wykorzystywać jakąś konkretną przeglądarkę? O. Nie, o ile tylko mają w swojej przeglądarce włączoną obsługę języka JavaScript, to powyższy kod powinien być wykonywany bez najmniejszych problemów. A zatem, Twoje aplikacje korzystające z technologii Ajax będą równie dobrze działały w przeglądarce Firefox, Mozilla, Internet Explorer, Safari, Netscape oraz Opera. P. A co się stanie, jeśli użytkownik wyłączy w przeglądarce obsługę języka JavaScript? O. Niestety, aplikacje korzystające z technologii Ajax wymagają zastosowania języka JavaScript. Oznacza to, że osoby, które wyłączą w swoich przeglądarkach obsługę JavaScriptu, nie będą mogły używać tych aplikacji. Zazwyczaj we wszystkich przeglądarkach obsługa JavaScriptu jest domyślnie włączona, a zatem, jeśli ktoś ją wyłączył, to można przypuszczać, że wie, co robi i będzie w stanie ją ponownie włączyć, jeśli zechce używać aplikacji wykorzystującej technologię Ajax. jesteś tutaj 43 head_rush_ajax.indd 43 head_rush_ajax.indd 43 2007-08-29 16:44:06 2007-08-29 16:44:06 Wysyłanie żądania z poziomu skryptu Krok 2.: Żądanie przesłania aktualnych wyników sprzedaży createRequest() getBoardsSold() updatePage() Teraz, kiedy dysponujesz już funkcją createRequest(), możesz przejść do następnego etapu: napisania (oczywiście w języku JavaScript) funkcji getBoardsSold(). Funkcja ta użyje utworzonego wcześniej obiektu do przesłania do serwera żądania o zwrócenie sumarycznej liczby wszystkich sprzedanych desek. Określmy zatem, jak ta funkcja ma działać, a później zabierzemy się do napisania jej kodu. Czy pamiętasz nasz schemat? Oto krok, który obecnie realizujemy. Żądanie przekazania liczby wszystkich sprzedanych desek A oto, co będziesz musiał zrobić w celu zapewnienia poprawnego działania funkcji getBoardsSold(): a Utworzyć nowy obiekt żądania poprzez wywołanie funkcji createRequest(). b Określić adres URL, na jaki trzeba przesłać żądanie, aby otrzymać aktualne wyniki sprzedaży desek. c Przygotować obiekt żądania do nawiązania połączenia z serwerem. d Zgłosić żądanie przesłania aktualnych wyników sprzedaży desek. Do tego celu możesz wykorzystać gotowy kod JavaScript, przedstawiony na dwóch poprzednich stronach. Kaśka podała już ten adres URL w swoim istniejącym formularzu, zatem wykonanie tego zadania będzie bardzo proste. Aby wykonać tę operację, użyjesz obiektu żądania, zwróconego przez funkcję createRequest(). Tej liczby użyjesz nieco później, w kroku 3., podczas wyświetlania aktualnych informacji na stronie raportu. Zajmiemy się tym już za chwilkę. Po prostu to zrób Otwórz swój plik deski.html i dodaj do niego funkcję getBoardsSold(), umieszczając ją bezpośrednio poniżej funkcji createRequest(). Następnie spróbuj dodać do funkcji getBoardsSold() wiersz kodu, tworzący nowy obiekt żądania (patrz krok „a” na powyższej liście). Jeśli nie będziesz w stanie wykonać tego zadania, zajrzyj do odpowiedzi podanych na końcu tego rozdziału, na stronie 87. Zanim przejdziesz do lektury następnej strony, koniecznie musisz nie tylko wykonać to ćwiczenie, lecz także upewnić się, że wykonałeś je poprawnie. Nie zapomnij także o zapisaniu zmienionej wersji pliku deski.html na dysku. 44 Rozdział 1 head_rush_ajax.indd 44 head_rush_ajax.indd 44 2007-08-29 16:44:06 2007-08-29 16:44:06 Dodanie funkcji getBoardsSold() Jeśli wykonałeś ćwiczenie zamieszczone na końcu poprzedniej strony, to w Twoim pliku deski.html powinien już znajdować się kod JavaScriptu podobny do przedstawionego poniżej: script language=”JavaScript” type=”text/javascript” var request = null; Aplikacje nowej generacji P am i ę t a j , ż e c a ł y k o d p i s a n y w j ę z y k u J a v aS c r i p t m u s i b y ć um i e s z c z o n y p om i ę d z y z n a c z n i k am i s c r i p t o r a z / s c r i p t . To jest Twój obiekt żądania. Kiedy kod wywoła funkcję createRequest(), to w tej zmiennej zostanie zapisany nowy obiekt żądania. function createRequest() { // gotowy JavaScript } A oto funkcja createRequest(), którą dodałeś do pliku podczas lektury jednej z poprzednich stron. A to nowa funkcja… function getBoardsSold() { createRequest(); } /script …oraz miejsce, w jakim przy użyciu gotowego kodu JavaScriptu jest tworzony nowy obiekt żądania. Przesyłanie żądania pod poprawny adres URL No dobrze, a co dalej? Dysponujesz już obiektem, którego możesz użyć od przesłania do serwera żądania o zwrócenie sumarycznej liczby wszystkich sprzedanych desek, jednak w jaki sposób możesz zgłosić to żądanie? Przede wszystkim, musisz przekazać obiektowi informację o tym, na jaki adres należy przesłać żądanie — innymi słowy, obiekt ten wymaga nazwy programu przechowywanego na serwerze i używanego przez aplikację Kaśki do określania sumarycznej liczby sprzedanych desek. A zatem musisz przekazać adres URL skryptu działającego na serwerze. Jednak czy ten skrypt PHP nie zwraca obecnie całego kodu HTML strony? Myślałem, że w nowej wersji aplikacji wykorzystującej technologię Ajax, będziemy chcieli, by serwer przesyłał w odpowiedzi jedynie sumaryczną liczbę wszystkich sprzedanych desek. Ale skąd mamy wziąć ten adres URL? Możemy go znaleźć w oryginalnym formularzu Kaśki: Oto adres URL skryptu PHP, do którego powinniśmy skierować żądanie. form method=”GET” action=”pobierzAktualneDane.php” input value=”Pokaż mi kasę!” type=”submit” / /form Oto element form umieszczony na stronie raportu Kaśki. jesteś tutaj 45 head_rush_ajax.indd 45 head_rush_ajax.indd 45 2007-08-29 16:44:07 2007-08-29 16:44:07 Skrypt PHP witryny Mega-Deski PHP … na rzut oka To dodatkowy bonus dla osób znających język PHP. Jeśli nie znasz tego języka, to i tak wszystko jest w porządku… po prostu przejrzyj poniższy skrypt i zabierz się za dalszą lekturę. Nie musisz rozumieć tego skryptu, aby uczyć się technologii Ajax lub analizować przykłady zamieszczane w tej książce. Oto szybka prezentacja skryptu PHP używanego przez Kaśkę do generowania raportu ze sprzedaży desek. Pamiętaj, że nie mam zamiaru dokładnie wyjaśniać, jak on działa, jednak pokrótce opisałem, co się dzieje po odebraniu żądania o przesłanie aktualnych wyników sprzedaży. ?php // Nawiązanie połączenia z bazą danych $conn = @mysql_connect( mysql.megadeski.pl”, “tajny”, “super_tajne”); if(!$conn) die(“Nie udało się nawiązać połączenia z serwerem MySQL: “. mysql_error()); Pierwsza część skryptu nawiązuje połączenie z bazą danych aplikacji Mega-Deski. if(!mysql_select_db( headfirst”, $conn)) die(“Nie udało się wybrać bazy danych: “. mysql_error()); $select = ‘SELECT boardsSold’; $from = ‘ FROM megadeski’; $queryResult = @mysql_query($select. $from); if(!$queryResult) die(‘Nie udało się pobrać z bazy informacji o liczbie sprzedanych desek.’); Ta część skryptu odpowiada za odczytanie z bazy aktualnych informacji o wielkości sprzedaży. while($row = mysql_fetch_array($queryResult)) { $totalSold = $row[‘boardsSold’]; } $price = 249.95; $cost = 84.22; $cashPerBoard = $price - $cost; $cash = $totalSold * $cashPerBoard; mysql_close($conn); ? Gdybyś chciał, to także te wartości mógłbyś przechowywać i pobierać z bazy danych. W tych wierszach wyliczamy zysk, jaki ma Kaśka na każdej sprzedanej desce. html head title Mega-Deski /title meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-2” / link rel=”stylesheet” type=”text/css” href=”deski.css” / /head body h1 Mega-Deski:: Raport sprzedaży /h1 A tu jest cały kod HTML, o którym już pisaliśmy… 46 Rozdział 1 head_rush_ajax.indd 46 head_rush_ajax.indd 46 2007-08-29 16:44:07 2007-08-29 16:44:07 Aplikacje nowej generacji Kolejny kod HTML generowany przez skrypt PHP… Skrypt PHP wyświetla wartości pobrane z bazy danych oraz kod HTML, określający postać strony raportu. div id=”deski” table tr th Liczba sprzedanych desek /th td span id=”deski-sprzedane” ?php print $totalSold; ? /span /td /tr tr th Za ile ja sprzedaję /th td span id=”cena” ?php print $price; ? PLN /span /td /tr tr th Ile mnie kosztują /th td span id=”koszt” ?php print $cost; ? PLN /span /td /tr /table h2 Kasa na wyciągi: span id=”kasa” ?php print $cash; ? PLN /span /h2 form method=”GET” action=”pobierzAktualneDane.php” input value=”Pokaż mi kasę!” type=”submit” / /form /div /body /html A CO TAM? Wszystkie operacje wykonywane przez ten skrypt sprowadzają się do określenia liczby sprzedanych desek, wyliczenia zysku Kaśki i wyświetlenia strony HTML, prezentującej bieżące wyniki. ? Nie przejmuj się jednak, jeśli nie znasz języka PHP lub jeśli jeszcze nigdy wcześniej nie obsługiwałeś baz danych. Już niedługo przedstawię inną wersję tego samego skryptu, która nie korzysta z bazy danych, dzięki temu samemu będziesz mógł wypróbować działanie raportu. jesteś tutaj 47 ? head_rush_ajax.indd 47 head_rush_ajax.indd 47 2007-08-29 16:44:07 2007-08-29 16:44:07 Serwer przesyłający duże ilości kodu HTML Jak serwer pracował do tej pory… createRequest() getBoardsSold() updatePage() Czy pamiętasz, w jaki sposób działała wersja raportu sprzedaży Kaśki, która nie korzystała z technologii Ajax? Za każdym razem, gdy otrzymywała zgłoszenie żądania skierowanego do skryptu PHP, musiała zwrócić zarówno bieżącą liczbę sprzedanych desek do snowbaordu, jak i cały kod HTML nowej strony. Zajrzyj na poprzednią stronę, a od razu zauważysz, że ponad połowa całego skryptu to kod HTML! Poniżej w nieco inny sposób pokazałem, jak działa ta wersja aplikacji: Adres URL skryptu Kaśki, pobrany z jej formularza. pobierzAktualneDane.php Cały kod HTML, który serwer musi przesłać, odpowiadając na każde żądanie. Delikatne PRZENOSIĆ OSTROŻNIE: ZAWARTOŚĆ HTML html head title Mega-Deski /title meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-2” / link rel=”stylesheet” type=”text/css” href=”deski.css” / /head body h1 Mega-Deski :: Raport sprzedaży /h1 div id=”boards” table tr th Liczba sprzedanych desek /th td span id=”deski-sprzedane” 1149 /span /td /tr tr th Za ile ja sprzedaję /th td span id=”cena” 249.95 /span PLN /td /tr tr th Ile mnie kosztują /th td span id=”koszt” 84.22 /span PLN /td /tr /table h2 Kasa na wyciągi: span id=”kasa” 190423.27 /span PLN /h2 form method=”GET” action=”pobierzAktualneDane.php” input value=”Pokaż mi kasę!” type=”submit” / /form /div /body /html 48 Rozdział 1 , S e r w e r K a ś k i k t ó r y m u s i o b s ł u g i w a ć o g r o m n e i k o d u H T M L . l o ś c i Taki rozbudowany kod HTML, a tak naprawdę zmieniają się tylko dwie wartości: sumaryczna liczba sprzedanych desek oraz zaktualizowany zysk Kaśki! head_rush_ajax.indd 48 head_rush_ajax.indd 48 2007-08-29 16:44:08 2007-08-29 16:44:08 Co obecnie powinien robić serwer W przypadku aplikacji korzystających z technologii Ajax, serwer nie musi przesyłać całego kodu HTML w każdej odpowiedzi. Zawartość strony jest aktualizowana przy użyciu funkcji JavaScriptu, zatem wystarczy, że serwer prześle w odpowiedzi jedynie niezbędne dane. W przypadku aplikacji Kaśki oznacza to, że jedyną informacją, jaką mamy uzyskać z serwera, jest sumaryczna liczba sprzedanych desek. Na jej podstawie, używając jedynie prostego skryptu napisanego w języku JavaScript, będziemy w stanie określić zysk Kaśki. pobierzAktualneDane-ajax.php Aplikacje nowej generacji Znacznie bardziej zadowolony i mniej obciążony serwer Kaśki. Adres URL nowej wersji skryptu PHP, który został przygotowany do współpracy z aplikacją korzystającą z technologii Ajax. W t ym p r z y p a d k u s e rw e r K a ś k i n i e m a z b y t w i e l u i n f o rm a c j i , k t ó r e m u s i w y s y ł a ć w k a ż d e j o d p ow i e d z i . 1149 Sumaryczna liczba wszystkich sprzedanych desek. Czy to naprawdę wszystko, co serwer aktualnie przesyła w skrypcie. w odpowiedzi na żądanie? Założę się, że dzięki zastosowaniu Ajaksa mój raport będzie generowany znacznie szybciej! Zaraz każę mojemu fachowcowi od PHP wprowadzić odpowiednie zmiany head_rush_ajax.indd 49 head_rush_ajax.indd 49 2007-08-29 16:44:09 2007-08-29 16:44:09 jesteś tutaj 49 Dostosowanie skryptu PHP do aplikacji Ajax d r u g i PHP... rzut oka Niemal cały początek nowej wersji skryptu jest taki sam jak w poprzedniej wersji. Od momentu, gdy skrypt PHP wykorzystywany w aplikacji Kaśki mógł zwracać jedynie samą liczbę sprzedanych desek, stał się on znacznie krótszy. Zresztą przekonaj się sam: ?php // Nawiązanie połączenia z
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Head Rush Ajax (Rusz głową!)
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ą: