Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00112 008644 10442356 na godz. na dobę w sumie
80 sposobów na Ajax - książka
80 sposobów na Ajax - książka
Autor: Liczba stron: 424
Wydawca: Helion Język publikacji: polski
ISBN: 83-246-0557-6 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> ajax
Porównaj ceny (książka, ebook, audiobook).

Techniki tworzenia nowoczesnych aplikacji internetowych

Ajax to nazwa technologii powstałej w wyniku połączenia języka JavaScript, XML oraz kaskadowych arkuszy stylów. Jej wdrożenie pozwala wyeliminować ze stron WWW jedną z ich najbardziej irytujących cech, czyli konieczność przeładowywania zawartości po każdej zmianie. Umiejętne wykorzystanie możliwości Ajaksa sprawia, że aplikacje internetowe przypominają 'zwykłe' programy dla systemów Windows lub Mac OS. Dzięki zastosowaniu Ajaksa aplikacja internetowa działa zdecydowanie szybciej, a połączenia z serwerem nie przeszkadzają użytkownikowi w pracy. Łatwiejsza jest także dynamiczna zmiana elementów w różnych częściach strony. Rozwiązania oparte na Ajaksie wprowadzono w wielu dziedzinach, takich jak blogi, narzędzia służące do nauki, newslettery oraz małe portale internetowe.

W książce '80 sposobów na Ajax' znajdziesz przykłady zastosowania tej techniki w tworzeniu interesujących i nieszablonowych witryn WWW. Czytając ją, dowiesz się, jak sprawić, aby witryny WWW były bardziej interaktywne, a aplikacje WWW działały dokładnie tak jak aplikacje desktopowe. Nauczysz się korzystać z interfejsów programistycznych witryn Google Maps, Yahoo! Maps i Geo URL oraz obsługiwać sesje i cookies z poziomu Ajaksa. Poznasz również metody weryfikowania poprawności danych wprowadzanych do formularzy oraz techniki łączenia Ajaksa z innymi nowoczesnymi narzędziami, takimi jak Ruby on Rails.

Twórz szybkie, wydajne i wygodne w obsłudze aplikacje sieciowe.

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

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TREœCI SPIS TREœCI KATALOG KSI¥¯EK KATALOG KSI¥¯EK KATALOG ONLINE KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG ZAMÓW DRUKOWANY KATALOG TWÓJ KOSZYK TWÓJ KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAMÓW INFORMACJE ZAMÓW INFORMACJE O NOWOœCIACH O NOWOœCIACH ZAMÓW CENNIK ZAMÓW CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥¯EK ONLINE FRAGMENTY KSI¥¯EK ONLINE Wydawnictwo Helion ul. Koœciuszki 1c 44-100 Gliwice tel. 032 230 98 63 e-mail: helion@helion.pl 80 sposobów na Ajax Autor: Bruce Perry ISBN: 83-246-0557-6 Tytu³ orygina³u: Ajax Hacks: Tips Tools for Creating Responsive Web Sites Format: B5, stron: 424 Techniki tworzenia nowoczesnych aplikacji internetowych (cid:129) Przygotowywanie wygodnych w obs³udze formularzy (cid:129) Integracja witryny z Google Maps (cid:129) Zarz¹dzanie po³¹czeniami sieciowymi Ajax to nazwa technologii powsta³ej w wyniku po³¹czenia jêzyka JavaScript, XML oraz kaskadowych arkuszy stylów. Jej wdro¿enie pozwala wyeliminowaæ ze stron WWW jedn¹ z ich najbardziej irytuj¹cych cech, czyli koniecznoœæ prze³adowywania zawartoœci po ka¿dej zmianie. Umiejêtne wykorzystanie mo¿liwoœci Ajaksa sprawia, ¿e aplikacje internetowe przypominaj¹ „zwyk³e” programy dla systemów Windows lub Mac OS. Dziêki zastosowaniu Ajaksa aplikacja internetowa dzia³a zdecydowanie szybciej, a po³¹czenia z serwerem nie przeszkadzaj¹ u¿ytkownikowi w pracy. £atwiejsza jest tak¿e dynamiczna zmiana elementów w ró¿nych czêœciach strony. Rozwi¹zania oparte na Ajaksie wprowadzono w wielu dziedzinach, takich jak blogi, narzêdzia s³u¿¹ce do nauki, newslettery oraz ma³e portale internetowe. W ksi¹¿ce „80 sposobów na Ajax” znajdziesz przyk³ady zastosowania tej techniki w tworzeniu interesuj¹cych i nieszablonowych witryn WWW. Czytaj¹c j¹, dowiesz siê, jak sprawiæ, aby witryny WWW by³y bardziej interaktywne, a aplikacje WWW dzia³a³y dok³adnie tak jak aplikacje desktopowe. Nauczysz siê korzystaæ z interfejsów programistycznych witryn Google Maps, Yahoo! Maps i Geo URL oraz obs³ugiwaæ sesje i cookies z poziomu Ajaksa. Poznasz równie¿ metody weryfikowania poprawnoœci danych wprowadzanych do formularzy oraz techniki ³¹czenia Ajaksa z innymi nowoczesnymi narzêdziami, takimi jak Ruby on Rails. (cid:129) Tworzenie interaktywnych formularzy (cid:129) Po³¹czenia z Google Maps i Yahoo! Maps (cid:129) Korzystanie z us³ugi Geo URL (cid:129) Obs³uga plików cookies (cid:129) Przegl¹danie kana³ów RSS (cid:129) Integracja z aplikacjami sieciowymi napisanymi w Javie (cid:129) Korzystanie z bibliotek Prototype i Rico (cid:129) Po³¹czenie Ajaksa z Ruby on Rails (cid:129) Wykorzystanie biblioteki script.aculo.us do tworzenia efektów wizualnych Twórz szybkie, wydajne i wygodne w obs³udze aplikacje sieciowe Przedmowa ..................................................................................................................................... 7 O autorze ......................................................................................................................................... 9 Wstęp ............................................................................................................................................. 11 Rozdział 1. Podstawy technologii Ajax ...................................................................................... 17 1. Określenie zgodności przeglądarki internetowej za pomocą obiektu żądania ..... 21 2. Użycie obiektu żądania do przekazania danych POST do serwera ....................... 24 3. Użycie własnej biblioteki z XMLHttpRequest ............................................................ 29 4. Otrzymywanie danych w postaci XML ....................................................................... 32 5. Pobieranie zwykłych starych ciągów tekstowych ...................................................... 37 6. Otrzymywanie danych w postaci liczb ........................................................................ 40 7. Otrzymywanie danych w formacie JSON ................................................................... 45 8. Obsługa błędów obiektu żądania ................................................................................. 51 9. Zagłębienie się w odpowiedź HTTP ............................................................................ 56 10. Generowanie stylizowanej wiadomości wykorzystującej plik arkusza stylów .... 61 11. Generowanie wiadomości stylizowanej „w locie” ..................................................... 66 Rozdział 2. Formularze sieciowe ................................................................................................. 71 12. Wysyłanie do serwera wartości pól tekstowych lub elementów textarea bez odświeżania przeglądarki ..................................................................................... 71 13. Wyświetlanie wartości pola tekstowego lub elementu textarea za pomocą danych serwera ......................................................................................... 78 14. Wysyłanie do serwera wybranych wartości z listy bez korzystania z komunikacji dwustronnej ............................................................ 84 15. Dynamiczne generowanie nowej listy wyborów za pomocą danych serwera ..... 91 16. Rozbudowa istniejącej listy wyboru ............................................................................. 98 17. Wysyłanie do serwera wartości pól wyboru bez konieczności korzystania z komunikacji dwustronnej .................................. 103 18. Dynamiczne generowanie nowej grupy pól wyboru na podstawie danych z serwera ................................................................................ 111 Spis treści | 3 19. Zapełnienie istniejącej grupy pól wyboru danymi z serwera ................................ 117 20. Zmiana nieuporządkowanych list za pomocą odpowiedzi HTTP ....................... 124 21. Wysyłanie do komponentu serwera wartości ukrytych znaczników ................... 131 Rozdział 3. Sprawdzanie poprawności ..................................................................................... 137 22. Sprawdzanie poprawności pól tekstowych i elementów textarea pod kątem wystąpienia pustych pól ........................................................................ 137 23. Sprawdzanie poprawności składni adresu e-mail ................................................... 139 24. Sprawdzanie poprawności unikalnych nazw użytkowników ............................... 149 25. Sprawdzanie poprawności numeru karty kredytowej ............................................ 152 26. Sprawdzanie poprawności kodu bezpieczeństwa karty kredytowej ................... 160 27. Sprawdzanie poprawności kodu pocztowego .......................................................... 164 Rozdział 4. Super sposoby dla programistów sieciowych ..................................................... 169 28. Uzyskanie dostępu do API Google Maps ................................................................. 169 29. Użycie obiektu żądania API Google Maps ............................................................... 171 30. Użycie Ajaksu z Google Maps i Yahoo! Maps .......................................................... 177 31. Wyświetlanie danych XML pobranych z witryny Weather.com ............................. 186 32. Użycie Ajaksu z Yahoo! Maps i GeoURL .................................................................. 193 33. Debugowanie w przeglądarce Firefox znaczników wygenerowanych przez Ajax............................................................... 197 34. Pobranie kodu pocztowego ......................................................................................... 200 35. Tworzenie dużych, łatwych w obsłudze zakładek .................................................. 207 36. Używanie trwałego magazynu danych po stronie klienta dla aplikacji Ajax ..... 208 37. Sterowanie historią przeglądarki internetowej za pomocą iframes ...................... 211 38. Wysyłanie wartości cookie do programu serwera ................................................... 214 39. Użycie XMLHttpRequest do wydobycia cen energii ze strony internetowej ..... 221 40. Wysyłanie wiadomości e-mail za pomocą obiektu XMLHttpRequest ................. 226 41. Odszukanie informacji lokalizacyjnych przeglądarki ............................................. 232 42. Tworzenie czytnika kanałów RSS ............................................................................... 235 Rozdział 5. Direct Web Remoting (DWR) dla zapaleńców Javy ............................................. 243 43. Integracja DWR z aplikacją sieciową Javy ................................................................. 243 44. Użycie DWR do zapełnienia listy wyboru wartościami z tablicy Javy ................ 246 45. Użycie DWR do utworzenia listy select na podstawie wartości z obiektu Map Javy ............................................................ 251 46. Wyświetlanie na stronie internetowej kluczy i wartości z obiektu HashMap Javy ......................................................................... 253 47. Użycie DWR do zapełnienia listy uporządkowanej wartościami z tablicy Javy ......................................................................................... 256 4 | Spis treści 48. Dostęp do własnego obiektu Javy z poziomu JavaScript ....................................... 260 49. Wywołanie wbudowanego obiektu Javy z poziomu JavaScriptu za pomocą DWR ................................................................ 265 Rozdział 6. Sposoby na Ajax z bibliotekami Prototype i Rico ................................................ 269 50. Użycie narzędzi Ajax biblioteki Prototype we własnych aplikacjach .................. 269 51. Uaktualnienie zawartości elementu HTML danymi pochodzącymi z serwera .. 274 52. Tworzenie obserwatorów pól strony internetowej .................................................. 278 53. Użycie biblioteki Rico do uaktualnienia kilku elementów za pomocą jednej odpowiedzi Ajax .................................................................................282 54. Utworzenie księgarni typu „przeciągnij i upuść” .................................................... 286 Rozdział 7. Praca z Ajaksem wraz z Ruby on Rails ................................................................. 293 55. Instalacja Ruby on Rails ................................................................................................ 294 56. Monitorowanie zdalnych wywołań za pomocą platformy Rails............................... 299 57. Udostępnienie kodu JavaScript aplikacjom platformy Rails .................................. 305 58. Dynamiczne generowanie listy select w szablonie platformy Rails ..................... 307 59. Określenie, czy technologia Ajax jest wywoływana w żądaniu ............................ 311 60. Dynamiczne generowanie listy select za pomocą danych pochodzących z bazy danych .................................................................................... 312 61. Okresowe przeprowadzanie zdalnych wywołań ..................................................... 316 62. Dynamiczne przeglądanie informacji o żądaniu dla obiektu XMLHttpRequest .....320 Rozdział 8. Urok biblioteki JavaScript script.aculo.us ............................................................ 325 63. Integracja efektów wizualnych biblioteki script.aculo.us z aplikacją Ajax .......... 325 64. Tworzenie okna logowania, które „wzrusza się”, gdy zostaną podane nieprawidłowe dane .............................................................. 328 65. Utworzenie autouzupełniającego się pola za pomocą biblioteki script.aculo.us .....332 66. Tworzenie pola edycji tekstu ....................................................................................... 336 67. Utworzenie formularza sieciowego, który znika po wysłaniu .............................. 339 Rozdział 9. Opcje i wydajność ................................................................................................... 341 68. Naprawa przycisku Wstecz przeglądarki internetowej w aplikacjach Ajax ....... 342 69. Obsługa zakładek i przycisków Wstecz za pomocą RSH ....................................... 349 70. Ustawienie ograniczenia czasu dla żądania HTTP .................................................. 360 71. Usprawnienie możliwości obsługi, wydajności i niezawodności dużych aplikacji JavaScript .......................................................... 363 72. Zaciemnianie kodu JavaScript i Ajax ......................................................................... 369 73. Użycie dynamicznego znacznika script do przeprowadzenia żądań usług sieciowych ......................................................................................................... 374 74. Konfiguracja serwera Apache ze względu na kwestie związane z przejściami między różnymi domenami .............................................................. 379 Spis treści | 5 75. Uruchomienie wewnątrz przeglądarki internetowej mechanizmu wyszukiwania ...................................................................................... 381 76. Użycie deklaratywnych znaczników za pomocą mechanizmu XForms zamiast znacznika script ............................................................................................ 386 77. Utworzenie bufora po stronie klienta ........................................................................ 392 78. Tworzenie autouzupełniającego się pola ................................................................... 400 79. Dynamiczne wyświetlenie większej ilości informacji na dany temat ................... 403 80. Użycie ciągów tekstowych i tablic w celu dynamicznego generowania kodu HTML ......................................................................................... 406 Skorowidz ................................................................................................................................. 411 6 | Spis treści Określenie zgodności przeglądarki internetowej za pomocą obiektu żądania SPOSÓB 1. R O Z D Z I A Ł P I E R W S Z Y Sposoby 1. – 11. Czy pamiętamy jeszcze czasy, w których użytkownicy określali internet mianem „world wide wait”? Wracamy do neolitycznej epoki Sieci? W przypadku niektórych aplikacji aspekty dotyczące Sieci nie uległy zasadniczej zmianie: wypełniamy formularz, klikamy przycisk, strona internetowa znika, czekamy, następuje odświeżenie strony, poprawia- my popełnione błędy, klikamy, czekamy, czekamy… Byliśmy już wcześniej zawieszeni w tego typu próżni. Jednakże pewna ilość ostatnio powstałych witryn internetowych, na przykład doskonałe aplikacje kartograficzne, które ostatnio zostały rozwinięte, wymagają znacznie większej reakcji w trakcie współdziałania z użytkownikiem. Stary, konwencjonalny sposób współ- pracy z użytkownikiem zakładał, że cała strona „znika” po każdym kliknięciu, a nowa pokazuje się w przeglądarce jedynie wtedy, gdy odpowiedź z serwera jest kompletna. Oczywiście, niektóre z nowych aplikacji wymagają momentalnych zmian fragmentów strony internetowej, ale bez konieczności przeładowania całej strony. Przykładowo, jeżeli Czytelnik kiedykolwiek używał Google Maps, to sposób, w jaki można przeciągnąć myszą regiony mapy w oknie, wywołuje wrażenie, że mapy są prze- chowywane lokalnie na komputerze. Możemy sobie wyobrazić, jak bardzo ta aplikacja stałaby się niepopularna, gdyby przy każdej próbie „przeciągnięcia” aktualnego widoku strona znikała na kilka (długich) chwil, w trakcie których przeglądarka czeka na odpo- wiedź z serwera. Aplikacja byłaby powolna i nikt nie chciałby z niej korzystać. Jakie więc czary powodują, że taka aplikacja działa? To nie jest pasta do podłogi Mieszanka doskonale znanych technologii oraz eleganckie narzędzie JavaScript stanowią podstawę wystrzałowego i jeszcze potężniejszego modelu aplikacji dla Sieci. Jeżeli Czy- telnikowi nasuwają się obawy związane z przeciążonym akronimem, to nie warto się przejmować — jest łatwy. Ten akronim nosi nazwę Ajax, co oznacza Asynchronous JavaScript and XML (asynchroniczny JavaScript i XML). Podstawy technologii Ajax | 17 SPOSÓB 1. Określenie zgodności przeglądarki internetowej za pomocą obiektu żądania Ajax nie jest ani pastą do podłogi ani polewą deserową (ani nawet produktem do czysz- czenia!). Jest to natomiast mieszanka kilku standardowych technologii, które są już zna- ne programistom i projektantom: · JavaScript, język programowania, który dodaje do stron internetowych możliwość dynamicznego wykonywania skryptów. Kod JavaScript może zostać osadzony na stronie internetowej, co pozwala stronie na implementację nowych, doskonałych możliwości za pomocą techniki o nazwie wykonywanie skryptów po stronie klienta. Ta technika jest niemal tak stara jak Sieć. XMLHttpRequest, obiekt JavaScript wraz z API (ang. Application Programming · Interface — interfejs programowy aplikacji), który może połączyć się z serwerem za pomocą protokołu HyperText Transfer Protocol (HTTP). Spora ilość magii związanej z Ajaksem ma swoje źródło w tym fragmencie kodu, który jest obsługiwany przez większość głównych przeglądarek internetowych (takich jak Mozilla Firefox, Internet Explorer 6, Safari 1.3 i 2.0 oraz Opera 7.6). Asynchroniczna część Ajaksu wywodzi się z charakterystyki tego obiektu1. Extensible Markup Language (XML), język zaprojektowany do definiowania innych · języków. Obiekt XMLHttpRequest może obsługiwać odpowiedź serwera w standardowym formacie XML, jak również w postaci zwykłego tekstu. · HTML i kaskadowe arkusze stylów (CSS), które kontrolują wizualny aspekt strony internetowej. Programiści sieciowi mogą używać JavaScriptu do przeprowadzania dynamicznych zmian interfejsu za pomocą programowania elementów HTML oraz arkuszy CSS. · Document Object Model (DOM), model przedstawiający plik XML lub stronę internetową jako zespół połączonych obiektów, które mogą być dynamicznie przetwarzane, nawet wtedy, gdy użytkownik pobierze stronę. Widok strony ma postać struktury jako hierarchii drzewa wraz z węzłem nadrzędnym (rodzicem) oraz jego różnymi gałęziami (elementami potomnymi). Każdy element HTML jest przedstawiony za pomocą węzła lub gałęzi, do których dostęp jest możliwy dzięki językowi JavaScript. W omawianych sposobach przedstawimy dużo (naprawdę dużo!) programowania DOM. Extensible Stylesheet Language and Transformation (XSLT), technologia szablonu · umożliwiająca przekształcanie wyświetlania informacji XML przez otrzymującego ją klienta. Ajax jest całkiem nowy, natomiast wymienione powyżej technologie są względnie stare. Firma Microsoft wypuściła pierwszą implementację obiektu JavaScript, który przeprowadza żądania HTTP (często nazywanego obiektem XMLHTTP) w wersji 5 przeglądarki Internet Explorer. W trakcie pisania tej książki przeglądarka Internet Explorer jest w wersji 6, natomiast wersja 7 znajduje się w fazie beta. 1 Obiekt XMLHttpRequest może przeprowadzać asynchroniczne żądanie do serwera, co oznacza, że po zainicjowaniu żądania pozostała część kodu JavaScript nie musi czekać z wykonaniem na nadejście odpowiedzi. Obiekt XMLHttpRequest może również przeprowadzać żądania synchroniczne. 18 | Podstawy technologii Ajax Określenie zgodności przeglądarki internetowej za pomocą obiektu żądania SPOSÓB 1. Jednakże obfitość nowych aplikacji, które używają Ajaksu, sugeruje, że przedstawiona grupa technologii została przekształcona do nowego modelu sieciowego. „Web 2.0” jest formą wzbogaconych aplikacji internetowych (są tak nazwane, ponieważ duża część funkcji aplikacji może znajdować się w przeglądarce internetowej klienta) następnej ge- neracji, obejmujących Ajax. Przykładami tego typu aplikacji są: Google Maps, Gmail, pakiet o nazwie Zimbra, interesujące osobiste narzędzie wyszukiwania o nazwie Rollyo (http://www.rollyo.com) oraz jedna z pierwszych interaktywnych map — Szwajcarii (http://maps.search.ch/index_en.html). Liczba aplikacji wykorzystujących technologię Ajax gwałtownie się zwiększa. Krótką listę można znaleźć w Wikipedii, pod adresem http:// en.wikipedia.org/wiki/List_of_websites_using_Ajax. Zachowanie ostrożności Oczywiście, Ajax nie jest przeznaczony dla każdego (w szczególności dla fanów polewy deserowej)! Ponieważ technologia Ajax może powodować dynamiczną zmianę strony in- ternetowej, która została już pobrana z Sieci, istnieje niebezpieczeństwo kolizji z pewnymi funkcjami, bliższymi lub dalszymi dla wielu użytkowników, takimi jak tworzenie zakładek w przeglądarce. Przykładowo, w przypadku braku podobnych rozwiązań w zakresie wy- konywania skryptów, przeprowadzane na istniejącej stronie internetowej dynamiczne zmiany za pomocą modelu DOM nie mogłyby zostać dołączone do adresu URL, który później mógłby zostać wysłany do przyjaciół lub zapisany. (Zarówno podrozdział „Na- prawa przycisku Wstecz przeglądarki internetowej w aplikacjach Ajax” [Sposób 68.], jak i „Obsługa zakładek i przycisków Wstecz za pomocą RSH” [Sposób 69.] powinny pomóc, rzucając światło na wspomniane kwestie, oraz dostarczyć odpowiednich rozwiązań). Przedstawione w tej książce świetne podpowiedzi dotyczące technologii Ajax zmieniają zachowanie wielu znanych widgetów sieciowych, takich jak listy select, elementy textarea, pola tekstowe i przyciski opcji, które wysyłają swoje własne dane i w tle komunikują się z serwerem. Należy jednak pamiętać o tym, że widgety Ajax przede wszystkim powinny być użyteczne i zawsze trzeba unikać mylenia oraz irytowania użyt- kowników sieciowych. Obiekt XMLHttpRequest Punktem centralnym wielu sposobów opisanych w tej książce jest obiekt XMLHttpRequest, który pozwala kodowi JavaScript na pobranie z serwera pewnych danych, podczas gdy w tym samym czasie użytkownik korzysta z pozostałej części aplikacji. Wymieniony obiekt posiada własne API, które zostanie przedstawione w tym wprowadzeniu. Podrozdział „Określenie zgodności przeglądarki internetowej za pomocą obiektu żąda- nia” [Sposób 1.] prezentuje ustalenie obiektu żądania w języku JavaScript. Kiedy obiekt zostanie już zainicjalizowany, wtedy będzie posiadał kilka metod i właściwości, które będzie można wykorzystać we własnych sposobach. Podstawy technologii Ajax | 19 SPOSÓB 1. Określenie zgodności przeglądarki internetowej za pomocą obiektu żądania Praktyką często spotykaną w programowaniu jest wywołanie funkcji, które są przypisane do poszczególnych „metod” obiektów JavaScript. Metody obiektu XMLHttpRequest obejmują open(), send() i abort(). Przedstawiona poniżej lista stanowi zbiór właściwości obsługiwanych przez obiekty żą- dań, zdefiniowane w większości głównych przeglądarek internetowych, takich jak In- ternet Explorer 5.0 i nowsze, Safari 1.3 i 2.0, Netscape 7 oraz najnowsze wydania Opery (na przykład 8.5). Obiekty żądań przeglądarki Mozilla Firefox posiadają dodatkowe właściwości i metody, które nie są współdzielone przez obiekty żądań innych głównych przeglądarek2. Obsługują one również następujące właściwości: onreadystatechange Funkcja wywołania zwrotnego. Funkcja przypisana do tej właściwości jest wywoływana za każdym razem, gdy zmianie ulegnie właściwość readyState. readyState Liczba. Wartość 0 oznacza niezainicjalizowana, funkcja open() nie została jeszcze wywołana. Wartość 1 oznacza wczytywanie, funkcja send() nie została jeszcze wywołana. Wartość 2 oznacza wczytano, funkcja send() została wywołana, dostępne są nagłówki/informacje o stanie. Wartość 3 oznacza nieaktywna, właściwość responseText przechowuje częściowe dane. Wartość 4 oznacza ukończono. responseText Ciąg tekstowy, odpowiedź w formacie zwykłego tekstu. responseXML Obiekt DOM Document, zwracana wartość w postaci XML. status Zwraca kod stanu, na przykład 200 (wszystko w porządku) lub 404 (nie znaleziono). statusText Ciąg tekstowy, tekst powiązany ze stanem odpowiedzi HTTP. Obsługiwane metody obejmują: abort() void. Przerywa żądanie HTTP. getAllResponseHeaders() Ciąg tekstowy, zwraca wszystkie nagłówki odpowiedzi w preformatowanym ciągu tekstowym (warto zapoznać się z podrozdziałem „Zagłębienie się w odpowiedź HTTP” [Sposób 9.]). 2 Obiekt XMLHttpRequest przeglądarki Mozilla Firefox posiada właściwości onload, onprogress i onerror, które są typu Event.Listener. Firefox dodatkowo definiuje metody addEventListener(), dispatchEvent(), overrideMimeType() i removeEventListener(). Więcej informacji dotyczących elementów obiektów żądań przeglądarki Firefox jest dostępnych pod adresem http://www.xulplanet.com/references/objref/XMLHttpRequest.html. 20 | Podstawy technologii Ajax Określenie zgodności przeglądarki internetowej za pomocą obiektu żądania SPOSÓB 1. getResponseHeader (string nagłówek) Ciąg tekstowy, zwraca wartość określonego nagłówka. open (string adres_URL, string asynch) void. Przygotowuje żądanie HTTP i określa, czy będzie, czy nie będzie asynchroniczne. send(string) void. Wysyła żądanie HTTP. setHeader(string nagłówek, string wartość) void. Wysyła żądanie nagłówka, ale w pierwszej kolejności musi zostać wywołana funkcja open()! S P O S Ó B 1. Określenie zgodności przeglądarki internetowej za pomocą obiektu żądania Użycie języka JavaScript do ustawienia różnych obiektów żądania zarówno w przeglądarkach firmy Microsoft, jak i na bazie Mozilli Zgodność przeglądarek jest bardzo istotną kwestią. Należy się upewnić o prawidłowej konstrukcji „silnika” obsługującego uzgodnienia Ajaksu z serwerem, chociaż nigdy nie można przewidzieć, jakie upodobania co do przeglądarek ma użytkownik aplikacji. Narzędziem programistycznym, umożliwiającym aplikacjom Ajax przeprowadzanie żądań HTTP do serwera, jest obiekt, którego możemy użyć z poziomu kodu JavaScript. W świecie przeglądarek Firefox i Netscape (jak również Safari i Opera) ten obiekt nosi nazwę XMLHttpRequest. Jednak, kontynuując tradycję zapoczątkowaną przez IE 5.0, ostatnie wydania przeglądarki Internet Explorer implementują oprogramowania jako obiekt ActiveX o nazwie Microsoft.XMLHTTP lub Msxml2.XMLHTTP. Microsoft.XMLHTTP i Msxml2.XMLHTTP odnoszą się do różnych wersji komponentów oprogramowania, które są częścią Microsoft XML Core Services (MSXML). Oto wyjaśnienie przedstawione przez naszego współautora, eksperta w dziedzinie IE: „Jeżeli użyjemy Microsoft.XMLHTTP, wtedy ActiveXObject spróbuje zainicjalizować ostatnią dobrze znaną wersję obiektu, która posiada ten identyfikator ID programu. Teoretycznie, takim obiektem mógłby być MSXML 1.0, ale obecnie mało kto posiada tę wersję, ponieważ została zaktualizowana przez Windows Update, IE 6 lub w innych okolicznościach. MSXML w wersji 1.0 był obecny bardzo krótko. Jeśli jest używany obiekt MSXML2.XMLHTTP, wówczas oznacza to, że opakowanie używa co najmniej bibliotek MSXML 2.0. Większość programistów nie musi posługiwać się określoną wersją MSXML, na przykład MSXML2.XMLHTTP.4.0 lub MSXML2.XMLHTTP.5.0”. Chociaż firma Microsoft i inżynierowie skupieni wokół projektu Mozilla wybrali inny sposób implementacji tego obiektu, to w niniejszej książce do obiektów ActiveX i XMLHttpRequest odnosimy się po prostu jako „obiektów żądania”, ponieważ posia- dają one bardzo podobne funkcje. Podstawy technologii Ajax | 21 SPOSÓB 1. Określenie zgodności przeglądarki internetowej za pomocą obiektu żądania Pierwszym krokiem w użyciu technologii Ajax jest konieczność sprawdzenia, czy prze- glądarka internetowa użytkownika obsługuje obiekty żądania na podstawie Mozilli lub powiązane z ActiveX, a następnie prawidłowe zainicjalizowanie obiektu. Użycie funkcji do sprawdzania zgodności Sprawdzanie zgodności opakowujemy funkcją JavaScript, a następnie wywołujemy tę funkcję przed przeprowadzeniem jakichkolwiek żądań HTTP za pomocą obiektu. Na przykład w przeglądarkach internetowych na bazie Mozilli, takich jak Netscape 7.1 i Fi- refox 1.5 (jak również w Safari 1.3 i 2.0 oraz Operze 8.5), obiekt żądania jest dostępny jako właściwość nadrzędnego obiektu window. Odniesieniem do tego obiektu w kodzie JavaScript jest window.XMLHttpRequest. Sprawdzenie zgodności dla tego typu prze- glądarek może przedstawiać się następująco: if(window.XMLHttpRequest){ request = new XMLHttpRequest(); request.onreadystatechange=handleResponse; request.open( GET ,theURL,true); request.send(null); } Zmienna JavaScript request jest zmienną najwyższego poziomu, która będzie odnosiła się do obiektu żądania. Alternatywny sposób — biblioteka Prototype typu open source używa zorientowanego obiektowo kodu JavaScript do opakowania obiektu żądania we własny obiekt, jako obiekt Ajax.Request (więcej informacji na ten temat znajduje się w rozdziale 6.). Jeżeli przeglądarka obsługuje obiekt XMLHttpRequest, wówczas: 1. Wykonanie pętli if(window.XMLHttpRequest) zwraca wartość true, ponieważ obiekt XMLHttpRequest nie jest typu null lub undefined. 2. Za pomocą słowa kluczowego new zostanie ustanowiony egzemplarz obiektu. 3. Obserwator zdarzeń onreadystatechange obiektu (przedstawiony we wcześniejszym podrozdziale „Obiekt XMLHttpRequest”) zostanie zdefiniowany jako funkcja o nazwie handleResponse(). 4. Kod wywołuje metody open() i send() obiektu żądania. A co z użytkownikami przeglądarki Internet Explorer? W trakcie publikowania tej książki blogi powiązane z Microsoft Internet Explorer informowały, że przeglądarka IE7 będzie obsługiwała obiekt XMLHttpRequest. W takim przypadku, w modelu obiektowym przeglądarki obiekt window.XMLHttp Request nie będzie istniał. Dlatego też w kodzie staje się niezbędny inny fragment pętli if: 22 | Podstawy technologii Ajax Określenie zgodności przeglądarki internetowej za pomocą obiektu żądania SPOSÓB 1. else if (window.ActiveXObject){ request=new ActiveXObject( Microsoft.XMLHTTP ); if (! request){ request=new ActiveXObject( Msxml2.XMLHTTP ); } if(request){ request.onreadystatechange=handleResponse; request.open(reqType,url,true); request.send(null); } } Przedstawiony fragment kodu sprawdza obecność najwyższego poziomu obiektu window ActiveX, co będzie wskazywało na użycie przeglądarki Internet Explorer. Następnie, za pomocą dwóch możliwych ID programu ActiveX (tutaj Microsoft.XMLHTTP i Msxml2.XMLHTTP), kod inicjalizuje żądanie. Istnieje nawet możliwość jeszcze bardziej drobiazgowo sprawdzania różnych wersji obiektu żądania przeglądarki IE, na przykład Msxml2.XMLHTTP4.0. Jednakże w więk- szości przypadków nie zachodzi potrzeba tworzenia aplikacji bazujących na różnych wersjach bibliotek MSXML, tak więc przedstawiony powyżej kod jest w zupełności wy- starczający. Kod wykonuje jedno końcowe sprawdzenie, aby przekonać się, czy obiekt żądania został prawidłowo skonstruowany (if(request){...}). Dajemy trzy szanse, po których jeśli zmienna request wciąż jest typu null lub undefined, oznacza to, że używana przeglądarka nie radzi sobie z obsługą obiektu żądania Ajax! Poniżej został przedstawiony kompletny kod sprawdzania zgodności: /* Funkcja opakowująca do skonstruowania obiektu żądania. Parametry: reqType: typ żądania HTTP, na przykład GET lub POST. url: adres URL programu serwerowego. asynch: czy żądanie będzie wysłane asynchronicznie, czy też nie. */ function httpRequest(reqType,url,asynch){ // Przeglądarki na bazie Mozilli. if(window.XMLHttpRequest){ request = new XMLHttpRequest(); } else if (window.ActiveXObject){ request=new ActiveXObject( Msxml2.XMLHTTP ); if (! request){ request=new ActiveXObject( Microsoft.XMLHTTP ); } } // Jeżeli nie powiodła się nawet inicjalizacja ActiveXObject, // wówczas żądanie wciąż może być typu null. if(request){ initReq(reqType,url,asynch); } else { alert( Używana przeglądarka nie pozwala na wykorzystanie + wszystkich funkcji tej aplikacji! ); } } Podstawy technologii Ajax | 23 SPOSÓB 2. Użycie obiektu żądania do przekazania danych POST do serwera /* Inicjalizacja obiektu żądania, który został już skonstruowany. */ function initReq(reqType,url,bool){ /* Określamy funkcję, która będzie obsługiwała odpowiedź HTTP. */ request.onreadystatechange=handleResponse; request.open(reqType,url,bool); request.send(null); } Podrozdział „Użycie obiektu żądania do przekazania danych POST do serwera” [Sposób 2.] zaprezentuje, w jaki sposób należy zaimplementować żądania POST za pomocą obiektu XMLHttpRequest. S P O S Ó B 2. Użycie obiektu żądania do przekazania danych POST do serwera Krok wykraczający poza tradycyjny mechanizm przekazywania wartości z formularzy użytkownika Przedstawiony w tym podrozdziale sposób używa do wysyłania danych i komunikacji z serwerem metody żądania HTTP POST, bez przeszkadzania użytkownikowi w korzy- staniu z aplikacji. Następnie użytkownikowi zostaje przedstawiona odpowiedź otrzy- mana z serwera. Różnica między przedstawioną w tym sposobie a typową metodą wy- syłania formularza polega na tym, że dzięki technologii Ajax strona nie jest zmieniana lub odświeżana, gdy aplikacja łączy się z serwerem w celu przekazania danych metodą POST. Dlatego też użytkownik może kontynuować pracę z aplikacją bez konieczności oczekiwania na przebudowę interfejsu w przeglądarce internetowej. Możemy sobie wyobrazić, że posiadamy portal sieciowy, w którym kilka fragmentów strony oferuje użytkownikowi różne usługi. Jeżeli jeden z tych fragmentów zostaje za- angażowany w przekazywanie danych, wówczas cała aplikacja może żywiej reagować na działania użytkownika dzięki wykorzystaniu w tle żądań POST. W ten sposób cała strona (lub jej fragmenty) nie muszą zostać odświeżone w przeglądarce. Przykładowa strona internetowa wykorzystująca przedstawiony sposób jest bardzo pro- sta. Na stronie został zawarty formularz, w którym użytkownik podaje imię i nazwisko, płeć oraz kraj pochodzenia, a następnie naciska przycisk, wysyłając tym samym dane za pomocą metody POST. Na rysunku 1.1 został pokazany wygląd omawianej strony w oknie przeglądarki internetowej. Poniżej znajduje się kod HTML przedstawionej strony: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd html head script type= text/javascript src= /parkerriver/js/hack2.js /script meta http-equiv= content-type content= text/html; charset=iso-8859-2 title Wysyłanie danych /title /head body h3 Kilka informacji o użytkowniku... /h3 form action= javascript:void 200 onsubmit= sendData();return false 24 | Podstawy technologii Ajax Użycie obiektu żądania do przekazania danych POST do serwera SPOSÓB 2. Rysunek 1.1. Przekazywanie informacji metodą POST p Imię: input type= text name= firstname size= 20 /p p Nazwisko: input type= text name= lastname size= 20 /p p Płeć: input type= text name= gender size= 2 /p p Kraj pochodzenia: input type= text name= country size= 20 /p p button type= submit Wyślij dane /button /p /form /body /html Przyglądając się powyższemu kodowi, może powstać pytanie dotyczące dziwnego wyglądu fragmentu form action= javascript:void 200 . Ponieważ w trakcie wysyłania formularza zostaje wywołana funkcja JavaScript, to atrybutowi action nie można podać nic więcej poza adresem URL, który nie posiada zwracanej wartości. Używamy więc zapisu, na przykład javascript:void 0 . Powinniśmy zakodować spację między elementami void i 0, a kod spacji to 20. Jeżeli używanie JavaScriptu jest zablokowane w przeglądarce internetowej użytkownika, wtedy kliknięcie przycisku wysyłającego dane formularza nie spowoduje żadnego efektu, ponieważ atrybut action nie wskazuje poprawnego adresu URL. Oprócz tego, jeśli użyjemy zapisu action= , to pewne analizatory poprawności HTML wyświetlą komunikat ostrzeżenia. Innym sposobem napisania tego kodu jest włączenie funkcji wywołującej jako części obsługi zdarzenia window.onload w pliku JavaScript .js. Takie podejście zostało przyjęte w większości sposobów przedstawionych w niniejszej książce. Pierwszym interesującym fragmentem kodu jest znacznik script, który importuje kod JavaScript (zawarty w pliku o nazwie hack2.js). Atrybut onsubmit znacznika form określa funkcję o nazwie sendData(), która z kolei formatuje dane dla żądania POST (wywołując Podstawy technologii Ajax | 25 SPOSÓB 2. Użycie obiektu żądania do przekazania danych POST do serwera inną funkcję setQueryString()) i wysyłając dane do serwera. Ze względu na zachowanie zwięzłości pominęliśmy opis sprawdzania, czy występują puste pola (zagadnienie zostanie przedstawione w podrozdziale „Sprawdzanie poprawności pól tekstowych i elementów textarea pod kątem wystąpienia pustych pól” [Sposób 22.]), ale aplikacje sieciowe po- winny wykonać ten krok przed wysłaniem danych do serwera. Plik hack2.js definiuje niezbędny kod JavaScript. Poniżej została przedstawiona funkcja setQueryString(): function setQueryString(){ queryString= ; var frm = document.forms[0]; var numberElements = frm.elements.length; for(var i = 0; i numberElements; i++) { if(i numberElements-1) { queryString += frm.elements[i].name+ = + encodeURIComponent(frm.elements[i].value)+ ; } else { queryString += frm.elements[i].name+ = + encodeURIComponent(frm.elements[i].value); } } } Przedstawiona funkcja formatuje ciąg tekstowy stylu POST, zawierający wszystkie ele- menty input formularza. Wszystkie pary nazwa/wartość zostają oddzielone znakiem , z wyjątkiem pary przedstawiającej ostatni element input formularza. Cały ciąg tekstowy może więc mieć postać: firstname=Bruce lastname=Perry gender=M country=USA W tym momencie posiadamy ciąg tekstowy, który możemy użyć w żądaniu HTTP POST. Przyjrzyjmy się więc kodowi JavaScript, który odpowiada za wysłanie żądania. Wszystko rozpoczyna się od funkcji sendData(). Kod wywołuje tę funkcję w atrybucie onsubmit znacznika HTML form: var request; var queryString; // Zmienna będzie przechowywała dane wysłane metodą POST. function sendData(){ setQueryString(); var url= http://www.parkerriver.com/s/sender ; httpRequest( POST ,url,true); } /* Inicjalizacja obiektu żądania, który został już skonstruowany. */ Parametry: reqType: typ żądania HTTP, na przykład GET lub POST. url: adres URL programu serwerowego. isAsynch: czy żądanie będzie wysłane asynchronicznie, czy też nie. */ function initReq(reqType,url,isAsynch){ /* Określamy funkcję, która będzie obsługiwała odpowiedź HTTP. */ request.onreadystatechange=handleResponse; request.open(reqType,url,isAsynch); /* Ustawiamy nagłówek Content-Type dla żądania POST */ 26 | Podstawy technologii Ajax Użycie obiektu żądania do przekazania danych POST do serwera SPOSÓB 2. request.setRequestHeader( Content-Type , application/x-www-form-urlencoded; charset=iso-8859-2 ); request.send(queryString); } /* Funkcja opakowująca do skonstruowania obiektu żądania. Parametry: reqType: typ żądania HTTP, na przykład GET lub POST. url: adres URL programu serwerowego. asynch: czy żądanie będzie wysłane asynchronicznie, czy też nie. */ function httpRequest(reqType,url,asynch){ // Przeglądarki na bazie Mozilli. if(window.XMLHttpRequest){ request = new XMLHttpRequest(); } else if (window.ActiveXObject){ request=new ActiveXObject( Msxml2.XMLHTTP ); if (! request){ request=new ActiveXObject( Microsoft.XMLHTTP ); } } // Jeżeli nie powiodła się nawet inicjalizacja ActiveXObject, // wówczas żądanie wciąż może być typu null. if(request){ initReq(reqType,url,asynch); } else { alert( Używana przeglądarka nie pozwala na wykorzystanie + wszystkich funkcji tej aplikacji! ); } } Celem funkcji httpRequest() jest sprawdzenie, czy obiekt żądania przeglądarki inter- netowej użytkownika został dołączony (warto sobie przypomnieć podrozdział „Określenie zgodności przeglądarki internetowej za pomocą obiektu żądania” [Sposób 1.]). Następnie kod wywołuje funkcję initReq(), której parametry zostały opisane w komentarzu nad definicją funkcji. Wiersz request.onreadystatechange=handleResponse; odpowiada za określenie funkcji obsługi zdarzeń, która będzie współpracowała z odpowiedzią. Tej funkcji przyjrzy- my się nieco dokładniej w dalszej części podrozdziału. W kolejnym kroku kod wywołuje metodę open() obiektu żądania, która przygotowuje obiekt do wysłania żądania. Ustawienie nagłówków Po wywołaniu metody open() kod może ustawić wszystkie nagłówki żądania. W oma- wianym tutaj przypadku utworzyliśmy nagłówek Content-Type, przeznaczony dla żądania POST. Przeglądarka Firefox wymaga dodatkowego nagłówka Content-Type, natomiast Safari 1.3 — już nie. (W trakcie tworzenia tego sposobu wykorzystywana była przeglądarka Firefox w wersji 1.02). Dodanie prawidłowych nagłówków jest dobrym pomysłem, ponieważ w większości przypadków serwer po prostu tego oczekuje od żądań typu POST serwer. Podstawy technologii Ajax | 27 SPOSÓB 2. Użycie obiektu żądania do przekazania danych POST do serwera Oto kod dodający nagłówki oraz wysyłający żądanie typu POST: request.setRequestHeader( Content-Type , application/x-www-form-urlencoded; charset=iso-8859-2 ); request.send(queryString); Jeżeli jako parametr podamy pierwotną wartość queryString, wówczas wywołanie metody będzie się przedstawiało następująco: send( firstname=Robert lastname=Górczyński gender=M country=Polska ); Przyglądanie się wynikowi Kiedy aplikacja wyśle już dane typu POST, wtedy będziemy chcieli wyświetlić użyt- kownikom wyniki. To zadanie należy do funkcji handleResponse(). Warto przypo- mnieć sobie kod w funkcji initReq(): request.onreadystatechange=handleResponse; Gdy właściwość readyState obiektu żądania posiada wartość 4, oznacza to, że opera- cje na obiekcie zostały zakończone, a kod stanu odpowiedzi HTTP posiada wartość 200. Ta wartość wskazuje, że realizacja żądania HTTP zakończyła się powodzeniem. Następ- nie w oknie alert zostaje wyświetlony komunikat responseText. Jest on w pewnym stopniu rozczarowujący, ale naszym celem było zachowanie rozsądnej prostoty prezen- towanego sposobu, ponieważ wiele innych przedstawionych sposobów będzie wyko- nywało bardziej złożone zadania za jego pomocą! Poniżej znajduje się kod odpowiedzialny za komunikat: // Obsługa zdarzeń dla XMLHttpRequest. function handleResponse(){ if(request.readyState == 4){ if(request.status == 200){ alert(request.responseText); } else { alert( Wystąpił problem z komunikacją między obiektem XMLHttpRequest, a programem serwera. ); } } // Koniec zewnętrznej pętli if. } Na rysunku 1.2 został pokazany wygląd okna alert po otrzymaniu odpowiedzi. Komponent serwera zwraca dane przekazane metodą POST w postaci dokumentu XML. Każda nazwa parametru staje się nazwą elementu, podczas gdy wartość parametru zo- staje zawartością elementu. Dane przekazane za pomocą metody POST są zagnieżdżone wewnątrz znaczników params. Komponent jest serwletem3 Javy. Serwlet nie jest głów- nym tematem prezentowanego sposobu, ale mimo wszystko dla Czytelników, którzy są zainteresowani tym, co się dzieje na serwerze, przedstawiamy fragment kodu: 3 Serwlet — aplet wykonywany na serwerze — przyp. tłum. 28 | Podstawy technologii Ajax Użycie własnej biblioteki z XMLHttpRequest SPOSÓB 3. Rysunek 1.2. Uwaga! Serwer przemówił… protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { Map reqMap = httpServletRequest.getParameterMap(); String val=null; String tag = null; StringBuffer body = new StringBuffer( params ); boolean wellFormed = true; Map.Entry me = null; for(Iterator iter= reqMap.entrySet().iterator();iter.hasNext();) { me=(Map.Entry) iter.next(); val= ((String[]me.getValue())[0]; tag = (String) me.getKey(); if (! XMLUtils.isWellFormedXMLName(tag)){ wellFormed=false; break; } body.append( ).append(tag).append( ). append(XMLUtils.escapeBodyValue(val)). append( / ).append(tag).append( ); } if(wellFormed) { body.append( /params ); sendXML(httpServletResponse,body.toString()); } else { sendXML(httpServletResponse, notWellFormedParams / ); } } Powyższy kod używa XMLUtils, klasy Javy z pakietu typu open source Jakarta Com- mons Betwixt, w celu sprawdzenia, czy nazwy parametrów są prawidłowo zbudowane. Klasa sprawdza również, czy wartości parametrów zawierają nieprawidłową z punktu widzenia XML zawartość. Jeżeli tak jest, wtedy dane wartości otrzymują odpowiednie sekwencje sterujące. Jeśli z jakiegokolwiek powodu przekazywany metodą POST kom- ponent nie zawiera prawidłowo zbudowanych nazw parametrów (na przykład na me zamiast name), wówczas serwlet zwróci pusty element XML wskazujący taką okoliczność. S P O S Ó B 3. Użycie własnej biblioteki z XMLHttpRequest Wywołanie kodu, który inicjalizuje obiekt żądania i wysyłanie żądań do własnego pliku JavaScript W celu łatwego rozstania się z obawami, dotyczącymi dużych aplikacji w technologii Ajax, utworzymy oddzielny plik zarządzający obiektem XMLHttpRequest, a następnie zaimportujemy ten plik do każdej strony internetowej, która będzie go wymagała. Na Podstawy technologii Ajax | 29 SPOSÓB 3. Użycie własnej biblioteki z XMLHttpRequest samym końcu upewnimy się, że jakiekolwiek zmiany, niezależnie od tego, w jaki sposób kod ustawia obiekt żądania, będą przeprowadzane jedynie na tym pliku. Takie rozwiązanie jest przeciwieństwem sytuacji, w której każdy plik JavaScript używa żądań stylu Ajax. Omawiany sposób przechowuje cały kod powiązany z obiektem w pliku o nazwie http_ request.js. Następnie każda strona internetowa, która używa obiektu XMLHttpRequest, może zaimportować ten plik w następujący sposób: script type= text/javascript src= js/http_request.js /script Poniżej został przedstawiony kod wspomnianego pliku, łącznie z wszystkimi komentarzami: var request = null; /* Funkcja opakowująca do skonstruowania obiektu żądania. Parametry: reqType: typ żądania HTTP, na przykład GET lub POST. url: adres URL programu serwerowego. asynch: czy żądanie będzie wysłane asynchronicznie, czy też nie. respHandle: nazwa funkcji, która będzie obsługiwała odpowiedź. Każde pięć parametrów przedstawione przez arguments[4] stanowią dane żądania POST przeznaczonego do wysłania. */ function httpRequest(reqType,url,asynch,respHandle){ // Przeglądarki na bazie Mozilli. if(window.XMLHttpRequest){ request = new XMLHttpRequest(); } else if (window.ActiveXObject){ request=new ActiveXObject( Msxml2.XMLHTTP ); if (! request){ request=new ActiveXObject( Microsoft.XMLHTTP ); } } // Bardzo mało prawdopodobne, ale sprawdzamy, czy występują żądania null, // jeśli także obiekt ActiveXObject nie został zainicjalizowany. if(request) { // Jeżeli parametr reqType jest typu POST, wówczas // piąty argument funkcji stanowią dane przesyłane metodą POST. if(reqType.toLowerCase() != post ) { initReq(reqType,url,asynch,respHandle); } else { // Dane przekazywane metodą POST. var args = arguments[4]; if(args != null args.length 0){ initReq(reqType,url,asynch,respHandle,args); } } } else { alert( Używana przeglądarka nie pozwala na wykorzystanie + wszystkich funkcji tej aplikacji! ); } } /* Inicjalizacja obiektu żądania, który został już skonstruowany. */ function initReq(reqType,url,bool,respHandle){ try{ /* Określamy funkcję, która będzie obsługiwała odpowiedź HTTP */ request.onreadystatechange=respHandle; request.open(reqType,url,bool); // Jeżeli parametr reqType jest typu POST, wówczas // piąty argument funkcji stanowią dane przesyłane metodą POST. 30 | Podstawy technologii Ajax Użycie własnej biblioteki z XMLHttpRequest SPOSÓB 3. if(reqType.toLowerCase() == post ) { request.setRequestHeader( Content-Type , application/x-www-form-urlencoded; charset=iso-8859-2 ); request.send(arguments[4]); } else { request.send(null); } } catch (errv) { alert( W tym momemcie aplikacja + nie może połączyć się z serwerem. + Proszę spróbować ponownie w ciągu kilku sekund. + Szczegółowe informacje o błędzie: +errv.message); } } Aplikacja używająca tego kodu wywoła funkcję httpRequest() z czterema lub pię- cioma (w przypadku żądań POST) parametrami. W innych sposobach przedstawionych w tej książce zobaczymy wiele przykładów wywoływania funkcji httpRequest(). Po- niżej znajduje się kolejny: var _url = http://www.parkerriver.com/s/sender ; var _data= first=Bruce last=Perry middle=D ; httpRequest( POST ,_url,true,handleResponse,_data); Komentarze w kodzie opisują znaczenie każdego z tych parametrów. Ostatni parametr przedstawia dane, które towarzyszą żądaniom POST. Żądania HTTP POST umieszczają przekazywane dane za informacjami o nagłówkach żądania. Z drugiej strony, żądania GET dołączają do adresu URL nazwy parametrów i ich wartości. Jeżeli kod nie używa metody POST, wtedy kod klienta będzie wykorzystywał jedynie cztery parametry. Czwartym parametrem może być albo nazwa funkcji, która jest zade- klarowana w kodzie klienta (na przykład funkcja obsługująca odpowiedź, umieszczona poza plikiem http_request.js), albo dosłowna funkcja. Ta druga możliwość obejmuje zde- finiowanie funkcji wewnątrz wywołania funkcji, co często jest kłopotliwe i trudne do odczytu. Jednakże takie rozwiązanie jest sensowne w sytuacjach, w których obsługa od- powiedzi HTTP jest zwięzła i prosta, na przykład: var _url = http://www.parkerriver.com/s/sender ; // Ustawienie debugowania. httpRequest( POST ,_url,true,function(){alert(request.responseText);}); Funkcja httpRequest() inicjuje ten sam proces sprawdzania i ustawiania obiektu XMLHttpRequest dla przeglądarki Internet Explorer i przeglądarek spoza firmy Microso- ft, który został opisany w podrozdziale „Określenie zgodności przeglądarki internetowej za pomocą obiektu żądania” [Sposób 1.]. Natomiast funkcja initReq() obsługuje drugi krok ustawienia obiektu żądania: określenie obsługi zdarzeń onreadystatechange oraz wywołanie metod open() i send() przeprowadzających żądanie HTTP. Za pomocą bloku instrukcji try/catch kod przechwytuje wszystkie błędy lub wyjątki zgłoszone przez te Podstawy technologii Ajax | 31 SPOSÓB 4. Otrzymywanie danych w postaci XML metody żądania. Przykładowo, jeżeli kod wywoła metodę open() wraz z adresem URL wskazującym na inny serwer niż użyty do pobrania w załączonej stronie internetowej, wówczas blok try/catch przechwyci błąd i wyświetli okno alert. Na koniec warto dodać, że dopóki strona internetowa będzie importowała plik http_request.js, dopóty zmienna request będzie dostępna w zewnętrznym kodzie względem zaimpor- towanego pliku. W rezultacie zmienna request staje się zmienną globalną. W ten sposób, request staje nazwą zastrzeżoną jako nazwa zmiennej, ponieważ zmienne lokalne, które wykorzystują słowo kluczowe var, będą unieważniać (z niezamierzonymi konsekwencjami) globalnie użytą nazwę request, jak w poniższym przykładzie: function handleResponse(){ // Unieważnienie zaimportowanej zmiennej request. var request = null; try{ if(request.readyState == 4){ if(request.status == 200){... S P O S Ó B 4. Otrzymywanie danych w postaci XML Ajax i programy serwerowe dostarczają obiekt DOM Document, który jest gotowy do użycia W chwili obecnej wiele technologii do wymiany danych wykorzystuje format Extensible Markup Language, głównie dlatego, że XML jest standaryzowanym i rozszerzalnym for- matem, powszechnie obsługiwanym w świecie oprogramowania. Z tego powodu różne firmy używają istniejących, dobrze znanych technologii do generowania, wysyłania i otrzymywania danych XML. Odbywa się to bez konieczności przystosowania narzędzi programowych używanych przez różne firmy, z którymi następuje wymiana danych XML. Przykładem może być urządzenie Global Positioning System (GPS), które może dzielić posiadane dane, przykładowo, z pieszą lub rowerową wycieczką wyposażoną w aplika- cję sieciową mającą możliwość określenia położenia. Wystarczy jedynie podłączyć do komputera przewód USB dostarczony razem z urządzeniem GPS i uruchomić oprogra- mowanie, które wysyła i otrzymuje dane z Sieci, i to wszystko. Zwykle formatem danych jest język XML, który został już zdefiniowany w oprogramowaniu GPS. Aplikacja sieciowa i urządzenie GPS „porozumiewają się więc w tym samym języku”. Chociaż w tej książce nie ma miejsca na obszerne wprowadzenie do XML, to prawdopo- dobnie Czytelnikowi udało się zobaczyć pliki tekstowe tego formatu w jednym z for- mularzy. XML jest używany jako język „meta”, który opisuje i kategoryzuje określone typy informacji. Dane XML rozpoczynają się od opcjonalnej deklaracji XML (na przykład ?xml version= 1.0 encoding= iso-8859-2 ? ), po której następuje element nadrzędny oraz zero bądź więcej elementów potomnych. Przykładem może być nastę- pujący kod: ?xml version= 1.0 encoding= iso-8859-2 ? gps gpsMaker Garmin /gpsMaker 32 | Podstawy technologii Ajax Otrzymywanie danych w postaci XML SPOSÓB 4. gpsDevice Forerunner 301 /gpsDevice /gps W powyższym kodzie gps jest elementem nadrzędnym, natomiast gpsMaker i gpsDevice są elementami potomnymi. Ajax i obiekt żądania mogą otrzymywać dane w postaci XML, który jest bardzo uży- teczny w trakcie obsługi odpowiedzi usług sieciowych wykorzystujących XML. Kiedy żądanie HTTP zostanie ukończone, wówczas obiekt żądania będzie posiadał prawidłowo nazwany obiekt responseXML. Ten obiekt jest obiektem DOM Document, który może zostać użyty przez aplikację Ajax. Oto przykład: function handleResponse(){ if(request.readyState == 4){ if(request.status == 200){ var doc = request.responseXML; ... } W poprzednim fragmencie kodu zmienna doc jest obiektem DOM Document i oferuje podobne API do okna przeglądarki wyświetlającej stronę. Omawiany sposób otrzymuje XML z serwera, a następnie angażuje odrobinę programowania DOM z obiektem Document w celu wydobycia z XML pewnych informacji. Jeżeli zachodzi potrzeba uzyskania czystych danych tekstowych XML, wówczas należy użyć właściwości request.responseText. Plik HTML wykorzystywany w tym sposobie jest zasadniczo taki sam, jak plik użyty w pod- rozdziale „Użycie obiektu żądania do przekazania danych POST do serwera” [Sposób 2.]. Na końcu pliku został jednak dodany element div, w którym kod wyświetla informacje dotyczące zwróconego XML. Poniżej znajduje się kompletny kod HTML strony: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd html head script type= text/javascript src= js/hack3.js /script meta http-equiv= content-type content= text/html; charset=iso-8859-2 title Otrzymywanie odpowiedzi w postaci XML /title /head body h3 Kilka informacji o użytkowniku... /h3 form action= javascript:void 200 onsubmit= sendData();return false p Imię: input type= text name= firstname size= 20 /p p Nazwisko: input type= text name= lastname size= 20 /p p Płeć: input type= text name= gender size= 2 /p p Kraj pochodzenia: input type= text name= country size= 20 /p p button type= submit Wyślij dane /button /p div id= docDisplay /div /form /body /html Podstawy technologii Ajax | 33 SPOSÓB 4. Otrzymywanie danych w postaci XML Na rysunku 1.3 został pokazany wygląd omawianej strony przed podaniem jakichkol- wiek informacji przez użytkownika. Rysunek 1.3. Wszystko zostało przygotowane do otrzymania danych XML Kod JavaScript w pliku hack3.js przekazuje za pomocą metody POST swoje dane do apli- kacji serwera, która z kolei odsyła odpowiedź w formacie XML. Krok polegający na sprawdzaniu poprawności pól [Sposób 22.] został pominięty ze względu na chęć utrzyma- nia zwięzłości kodu, ale aplikacje sieciowe używające formularzy zawsze powinny imple- mentować tego typu zadanie. Podobnie jak w przypadku innych przykładów przedstawionych w tym rozdziale, pro- gram serwerowy odsyła z powrotem do klienta nazwy parametrów i ich wartości jako params firstname Bruce /firstname /params . W podrozdziale „Użycie obiektu żądania do przekazania danych POST do serwera” [Sposób 2.] został zapre- zentowany pewien fragment kodu komponentu serwera, który umieszcza razem zwracane wartości. Wspomniana technika doskonale odpowiada naszemu celowi pokazania prostego przykładu programowania XML w aplikacji Ajax: var request; var queryString; // Zmienna będzie przechowywała dane wysłane metodą POST. function sendData(){ setQueryString(); var url= http://parkerriver/s/sender ; httpRequest( POST ,url,true); } // Obsługa zdarzeń dla obiektu XMLHttpRequest. function handleResponse(){ if(request.readyState == 4){ 34 | Podstawy technologii Ajax Otrzymywanie danych w postaci XML SPOSÓB 4. if(request.status == 200){ var doc = request.responseXML; var info = getDocInfo(doc); stylizeDiv(info,document.getElementById( docDisplay )); } else { alert( Wystąpił problem z komunikacją między obiektem XMLHttpRequest, + a programem serwera. ); } }// Koniec zewnętrznej pętli if. } /* Inicjalizacja obiektu żądania, który został już skonstruowany */ function initReq(reqType,url,bool){ /* Określamy funkcję, która będzie obsługiwała odpowiedź HTTP */ request.onreadystatechange=handleResponse; request.open(reqType,url,bool); request.setRequestHeader( Content-Type , application/x-www-form-urlencoded; charset=iso-8859-2 ); /* Funkcjonuje jedynie w przeglądarkach na bazie Mozilli. */ //request.overrideMimeType( text/XML ); request.send(queryString); } /* Funkcja opakowująca do skonstruowania obiektu żądania. Parametry: reqType: typ żądania HTTP, na przykład GET lub POST. url: adres URL programu serwerowego. asynch: czy żądanie będzie wysłane asynchronicznie, czy też nie. */ function httpRequest(reqType,url,asynch){ // Skrócone... Zobacz [Sposób 01]. } function setQueryString(){ queryString= ; var frm = document.forms[0]; var numberElements = frm.elements.length; for(var i = 0; i numberElements; i++) { if(i numberElements-1) { queryString += frm.elements[i].name+ = + encodeURIComponent(frm.elements[i].value)+ ; } else { queryString += frm.elements[i].name+ = + encodeURIComponent(frm.elements[i].value); } } } /* Dynamiczne dostarczenie zawartości elementów div. Jeżeli chcemy wzbogacić elementy div, to do tej funkcji możemy dołączyć informacje o stylu. */ function stylizeDiv(bdyTxt,div){ // Pozostała zawartość elementu DIV. div.innerHTML= ; div.style.backgroundColor= yellow ; div.innerHTML=bdyTxt; } /* Pobranie informacji o dokumencie XML za pomocą obiektu DOM Document. */ function getDocInfo(doc){ var root = doc.documentElement; var info = h3 Nazwa elementu nadrzędnego dokumentu: /h3 + root.nodeName; var nds; Podstawy technologii Ajax | 35 SPOSÓB 4. Otrzymywanie danych w postaci XML if(root.hasChildNodes()) { nds=root.childNodes; info+= h4 Nazwa/wartość węzła potomnego elementu nadrzędnego: /h4 ; for (var i = 0; i nds.length; i++){ info+= nds[i].nodeName; if(nds[i].hasChildNodes()){ info+= : +nds[i].firstChild.nodeValue+ br / ; } else { info+= : Pusty br / ; } } } return info; } Mozilla Firefox może używać funkcji request.overrideType() do wymuszenia interpretacji odpowiedzi jako potoku określonego typu mime, na przykład request.overrideType( text/xml ). Obiekt żądania przeglądarki Internet Explorer nie posiada takiej funkcji. Wywołanie tej funkcji nie działa również w przeglądarce Safari 1.3. Po wysłaniu przez kod danych za pomocą metody POST i otrzymaniu odpowiedzi na- stępuje wywołanie metody o nazwie getDocInfo(), tworzącej łańcuch tekstowy, który wyświetli pewne informacje dotyczące dokumentu XML oraz jego podelementów lub elementów potomnych: var doc = request.responseXML; var info = getDocInfo(doc); Funkcja getDocInfo() pobiera odniesienie do elementu nadrzędnego XML (var root = doc.documentElement;), a następnie tworzy łańcuch tekstowy zawierający nazwę elementu nadrzędnego oraz informacje o jego wszystkich węzłach lub elementach po- tomnych, takie jak nazwę węzła potomnego i jego wartość. Kolejnym krokiem jest przekaza- nie metodzie stylizeDiv() wymienionych wcześniej informacji. Metoda stylizeDiv() w celu dynamicznego wyświetlenia zebranych danych używa elementu div na końcu strony HTML: function stylizeDiv(bdyTxt,div){ // Pozostała zawartość elementu DIV. div.innerHTML= ; div.style.backgroundColor= yellow ; div.innerHTML=bdyTxt; } Na rysunku 1.4 został pokazany wygląd strony internetowej po tym, gdy aplikacja otrzyma odpowiedź XML. Kolejne węzły pokazywane przez aplikację są to znaki nowego wiersza w zwróconej odpowiedzi XML. Sedno API DOM, oferowane przez implementację JavaScript w przeglądarce, dostarcza programistom narzędzia o dużych możliwościach, służącego do programowania złożo- nych wartości zwrotnych XML. 36 | Podstawy technologii Ajax Pobieranie zwykłych starych ciągów tekstowych SPOSÓB 5. Rysunek 1.4. Zagłębianie się w wartości zwrotne XML S P O S Ó B 5. Pobieranie zwykłych starych ciągów tekstowych Zarządzanie odczytami prognozy pogody, kursami akcji, informacjami wydobywanymi ze strony internetowej lub podobnymi danymi niebędącymi danymi X
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

80 sposobów na Ajax
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ą: