Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00312 009812 10451788 na godz. na dobę w sumie
Ajax. Niezbędnik projektanta dynamicznych aplikacji - książka
Ajax. Niezbędnik projektanta dynamicznych aplikacji - książka
Autor: Liczba stron: 280
Wydawca: Helion Język publikacji: polski
ISBN: 83-246-1393-5 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> ajax
Porównaj ceny (książka, ebook, audiobook).

Wykorzystaj gotowe rozwiązania w technologii AJAX!

Technologia AJAX (skrót od ang. Asynchronous JavaScript and XML) pozwala na tworzenie dynamicznych stron WWW, dostarczających niezapomnianych wrażeń ich użytkownikom. Praktycznie wszystkie współczesne aplikacje WWW oraz duża część witryn internetowych korzystają z dobrodziejstw tego rozwiązania, a jeszcze dziś również i Twoja strona może zyskać na interaktywności.

Dzięki książce 'Ajax. Niezbędnik projektanta dynamicznych aplikacji' poznasz zasady działania technologii AJAX, jej zalety oraz wady. Autor prezentuje dziesięć przykładów zastosowania technologii AJAX. Dzięki nim nauczysz się między innymi, w jaki sposób pobierać dane z kanałów RSS, jak wykorzystać format XML oraz jak kontrolować wprowadzane przez użytkownika dane w czasie rzeczywistym. Najważniejsze jest jednak to, że każde z tych praktycznych rozwiązań możesz zaimplementować bezpośrednio na Twojej stronie!

Twoje strony też mogą być interaktywne!

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

Darmowy fragment publikacji:

Ajax. NiezbŒdnik projektanta dynamicznych aplikacji Autor: Michael Morrison T‡umaczenie: Maciej Jezierski ISBN: 978-83-246-1393-9 Tytu‡ orygina‡u: Ajax Construction Kit: Building Plug-and-Play Ajax Applications (Negus Live Linux Series) Format: 170x230, stron: 280 Wykorzystaj gotowe rozwi„zania w technologii AJAX! (cid:149) Jak wykorzysta(cid:230) technologiŒ AJAX? (cid:149) Jak wykona(cid:230) najczŒ(cid:156)ciej spotykane zadania? (cid:149) Jak zwiŒkszy(cid:230) interaktywno(cid:156)(cid:230) serwis(cid:243)w WWW? Technologia AJAX (skr(cid:243)t od ang. Asynchronous JavaScript and XML) pozwala na tworzenie dynamicznych stron WWW, dostarczaj„cych niezapomnianych wra¿eæ ich u¿ytkownikom. Praktycznie wszystkie wsp(cid:243)‡czesne aplikacje WWW oraz du¿a czŒ(cid:156)(cid:230) witryn internetowych korzystaj„ z dobrodziejstw tego rozwi„zania, a jeszcze dzi(cid:156) r(cid:243)wnie¿ i Twoja strona mo¿e zyska(cid:230) na interaktywno(cid:156)ci. DziŒki ksi„¿ce (cid:132)Ajax. NiezbŒdnik projektanta dynamicznych aplikacji(cid:148) poznasz zasady dzia‡ania technologii AJAX, jej zalety oraz wady. Autor prezentuje dziesiŒ(cid:230) przyk‡ad(cid:243)w zastosowania technologii AJAX. DziŒki nim nauczysz siŒ miŒdzy innymi, w jaki spos(cid:243)b pobiera(cid:230) dane z kana‡(cid:243)w RSS, jak wykorzysta(cid:230) format XML oraz jak kontrolowa(cid:230) wprowadzane przez u¿ytkownika dane w czasie rzeczywistym. Najwa¿niejsze jest jednak to, ¿e ka¿de z tych praktycznych rozwi„zaæ mo¿esz zaimplementowa(cid:230) bezpo(cid:156)rednio na Twojej stronie! (cid:149) Zalety technologii AJAX (cid:149) Przyk‡adowe rozwi„zania, korzystaj„ce z AJAX (cid:149) Sposoby u¿ywania formatu XML (cid:149) Zasady funkcjonowania technologii AJAX (cid:149) Tworzenie interaktywnych formularzy (cid:149) Sposoby wykorzystania kana‡(cid:243)w RSS (cid:149) Dynamiczne pobieranie danych z innych serwis(cid:243)w (cid:149) Spos(cid:243)b na efektown„ galeriŒ (cid:149) Tworzenie okien informacyjnych (cid:149) Przewidywanie tre(cid:156)ci wprowadzanych przez u¿ytkownika (cid:149) Metody i w‡a(cid:156)ciwo(cid:156)ci obiektu XMLHttpRequest (cid:149) Przysz‡o(cid:156)(cid:230) technologii AJAX Twoje strony te¿ mog„ by(cid:230) interaktywne! Wydawnictwo Helion ul. Ko(cid:156)ciuszki 1c 44-100 Gliwice tel. 032 230 98 63 e-mail: helion@helion.pl Spis treści Podziękowania .............................................................................. 10 O autorze ....................................................................................... 11 Wstęp ............................................................................................. 13 Część I Obóz szkoleniowy Ajaksa ........................................ 17 Rozdział 1. Ajax i nowy wspaniały świat sieci WWW .................................... 19 Obiad z Ajaksem ............................................................................................... 20 Ajax, Sting i asynchronia .................................................................................. 21 Przeładowywać czy nie przeładowywać .......................................................... 22 Czym właściwie jest Ajax? ............................................................................... 24 Ajax w rzeczywistości ....................................................................................... 24 Ajax nie nadaje się do wszystkiego .................................................................. 28 Ponowne spojrzenie na kalkulator kosztów dostawy ...................................... 29 Podsumowanie .................................................................................................. 32 Rozdział 2. Wewnątrz aplikacji ajaksowej ..................................................... 33 Jak działa Ajax ................................................................................................... 34 Cykl życia żądania ajaksowego ........................................................................ 37 Zapoznanie z biblioteką ajaksową .................................................................... 40 Budowa przeglądarki książek elektronicznych ............................................... 45 Dopasowanie przeglądarki książek .................................................................. 50 Podsumowanie .................................................................................................. 51 S p i s t r e ś c i 5 Część II Rozdział 3. Dynamiczne ładowanie danych: Tworzenie prawdziwych aplikacji ajaksowych ........53 przeglądarka książek oparta na XML-u ...................................... 55 Zadanie: wczytywanie danych w mniejszych fragmentach ............................ 56 Projekt: przeglądarka książek w formacie XML ............................................. 58 Implementacja przeglądarki książek ............................................................... 63 Testowanie przeglądarki książek ..................................................................... 76 Przerabianie przeglądarki książek ................................................................... 78 Podsumowanie .................................................................................................. 79 Rozdział 4. Wykorzystanie Ajaksa do dynamicznego wypełniania list: lista akcji ........................... 81 Zadanie: wyświetlanie informacji o wybranych akcjach ................................. 82 Projekt: aplikacja do wyboru akcji ................................................................... 84 Implementacja aplikacji Inwestor ................................................................... 89 Testowanie aplikacji Inwestor ......................................................................... 98 Przerabianie aplikacji Inwestor ..................................................................... 100 Podsumowanie ................................................................................................ 102 Rozdział 5. Pobieranie danych z kanałów RSS ............................................ 103 Zadanie: dynamiczne odpytywanie kanałów informacyjnych .................... 104 Projekt: aplikacja do odczytu wiadomości ..................................................... 106 Implementacja aplikacji Czytnik wiadomości ............................................... 112 Testowanie aplikacji Czytnik wiadomości ..................................................... 121 Przerabianie aplikacji Czytnik wiadomości ................................................... 123 Podsumowanie ................................................................................................ 124 Rozdział 6. Odgadywanie myśli użytkownika za pomocą autouzupełniania .................................................... 125 Zadanie: przewidywanie wprowadzanych danych ....................................... 126 Projekt: aplikacja z automatycznym uzupełnianiem ..................................... 128 Implementacja aplikacji Uzupełniacz ........................................................... 132 Testowanie aplikacji Uzupełniacz ................................................................. 138 Przerabianie aplikacji Uzupełniacz ............................................................... 139 Podsumowanie ................................................................................................ 140 Rozdział 7. Tworzenie interaktywnego interfejsu użytkownika ze sprawdzaniem poprawności ................................................. 141 Zadanie: sprawdzanie poprawności danych wprowadzanych przez użytkownika w czasie rzeczywistym ..................... 143 Projekt: aplikacja Sprawdzacz ........................................................................ 145 Implementacja aplikacji Sprawdzacz ............................................................ 149 Testowanie aplikacji Sprawdzacz .................................................................. 156 Przerabianie aplikacji Sprawdzacz ................................................................ 158 Podsumowanie ................................................................................................ 161 6 A j a x . N i e z b ę d n i k p r o j e k t a n t a a p l i k a c j i p l ug a n d p l a y Rozdział 8. Rewelacyjny interfejs do przeglądania obrazków .................. 163 Zadanie: dynamiczne wczytywanie obrazków .............................................. 164 Projekt: dynamiczna przeglądarka obrazków ............................................... 166 Implementacja aplikacji Obrazownik ............................................................ 168 Testowanie aplikacji Obrazownik .................................................................. 170 Przerabianie aplikacji Obrazownik ................................................................ 172 Podsumowanie ................................................................................................ 173 Rozdział 9. Prezentowanie informacji w zgrabnych okienkach ................ 175 Zadanie: tworzenie okienek informacyjnych ................................................ 176 Projekt: aplikacja z okienkami informacyjnymi ............................................ 180 Implementacja aplikacji Informator .............................................................. 183 Testowanie aplikacji Informator .................................................................... 188 Przerabianie aplikacji Informator .................................................................. 190 Podsumowanie ................................................................................................ 191 Rozdział 10. Przepowiadanie pogody za pomocą Ajaksa ............................ 193 Zadanie: pobieranie dynamicznych danych pogodowych ................................ 194 Projekt: aplikacja z prognozą pogody ............................................................ 195 Implementacja aplikacji Prognoza ................................................................ 200 Testowanie aplikacji Prognoza ....................................................................... 204 Przerabianie aplikacji Prognoza .................................................................... 206 Podsumowanie ................................................................................................ 208 Rozdział 11. Ajaksowy kalkulator kosztów dostawy .................................... 209 Zadanie: pobieranie aktualnych kosztów dostawy ........................................ 210 Projekt: aplikacja Dostawca ........................................................................... 211 Implementacja aplikacji Dostawca ................................................................ 219 Testowanie aplikacji Dostawca ...................................................................... 227 Przerabianie aplikacji Dostawca .................................................................... 230 Podsumowanie ................................................................................................ 233 Rozdział 12. Dodawanie ajaksowego systemu ocen do Twoich stron ....... 235 Zadanie: dodanie systemu oceniania do strony internetowej ...................... 236 Projekt: aplikacja Oceniacz ............................................................................ 238 Implementacja aplikacji Oceniacz ................................................................. 244 Testowanie aplikacji Oceniacz ....................................................................... 250 Przerabianie aplikacji Oceniacz ..................................................................... 253 Podsumowanie ................................................................................................ 257 Dodatki .................................................................... 259 Dodatek A Przeszłość, teraźniejszość i przyszłość Ajaksa .......................... 261 Dodatek B Krótki opis obiektu XMLHttpRequest ....................................... 265 Skorowidz ................................................................................... 273 S p i s t r e ś c i 7 5 Pobieranie danych z kanałów RSS AJAX W STAROŻYTNEJ GRECJI Nie umniejszając roli asynchronicznych aplikacji internetowych, był czas, kiedy Ajax miał większe znaczenie. Mam na myśli czasy starożytnej Grecji, kiedy legendarny grecki bohater Ajaks walczył w wojnie trojańskiej. Mityczna siła i odwaga Ajaksa zostały opi- sane przez greckiego poetę Homera w poemacie Iliada. Jako ktoś, kto przez kilka lat tworzył i utrzymywał wiele witryn internetowych, bardzo entuzjastycznie podszedłem do kanałów RSS, kiedy zobaczyłem je po raz pierwszy. Umożliwiają one wyświetlanie informacji z innych serwisów i możesz umieścić je na własnych stronach. Zapewniają automatyczną aktualizację wi- tryny, a przynajmniej kanałów informacyjnych, które są na niej umieszczone. Jeśli nie masz wprawy lub nie chcesz skrupulatnie uzupełniać wiadomości, możesz przyjąć, że kanał informacyjny umieszczony na Twojej stronie pozwoli udostęp- niać interesujące, automatycznie aktualizowane informacje. Kanał informacyjny, który będzie idealnie dopasowany do zawartości Twojej strony, znajdziesz naj- prawdopodobniej już po chwili poszukiwań. W tym rozdziale omówię, w jaki sposób Ajax umożliwia dynamiczne odpy- tywanie kanałów informacyjnych i wyświetlanie ich zawartości na stronie. Przy- kładowa aplikacja, którą poznasz w tym rozdziale, udostępnia prosty interfejs umożliwiający wybieranie różnych usług informacyjnych i następnie wyświe- tlenie ich na stronie. Oprócz tego podczas wykonywania żądania Ajaksa zoba- czysz mały ładny obrazek, który jest niemal tak samo odjazdowy jak dynamicz- ne pobieranie wiadomości. Poniżej znajduje się lista plików wykorzystywanych w aplikacji Czytnik wiadomo- ści w tym rozdziale. Są one umieszczone w spakowanym archiwum zawierają- cym przykładowy kod dołączony do książki i znajdującym się na serwerze FTP wydawnictwa Helion pod adresem ftp://ftp.helion.pl/przyklady/ajaxnp.zip, w kata- logu chap05. (cid:132) newsfeeder.html — strona główna, (cid:132) newsfeeder.php — skrypt serwera do pobierania danych z kanałów informacyjnych, (cid:132) newsfeeder.css — arkusz stylów do formatowania wiadomości, (cid:132) ajaxkit.js — podstawowe funkcje Ajaksa w bibliotece ajaksowej, (cid:132) domkit.js — funkcje do obsługi DOM w bibliotece ajaksowej, (cid:132) newspaper.gif — ikonka gazety wyświetlana obok każdej wiadomości, (cid:132) wait.gif — animowana ikonka wyświetlana podczas wykonywania żądania Ajaksa. Zadanie: dynamiczne odpytywanie kanałów informacyjnych Zadaniem w tym rozdziale jest wykorzystanie Ajaksa do dynamicznego odpyty- wania usług internetowych udostępniających kanały informacyjne o dane (wia- domości), a następnie wyświetlanie ich na stronie. Mówiąc dokładniej, poszczegól- ne wiadomości są tytułami pełnych wiadomości, więc właściwie musisz wyświetlać tytuły wiadomości, które będą służyć jako łącza do poszczególnych pełnych wiadomości. Jak się okazuje, każdy element w kanale informacyjnym zawiera między innymi zarówno tytuł, jak i łącze, tak więc kanał informacyjny udostępnia wszystkie dane wymagane do wykonania zadania. Zanim zagłębimy się w zadanie, musimy przede wszystkim przyjrzeć się samym kanałom informacyjnym i ich roli w internecie. Większość kanałów in- formacyjnych oparta jest na technologii RSS. Umożliwia ona publikowanie za- wartości WWW, co oznacza, że możesz łatwo pobierać informacje o nowościach pojawiających się na różnych witrynach bez konieczności ich odwiedzania. Cho- ciaż skrót RSS był różnie interpretowany, najnowszym i najbardziej odzwier- ciedlającym jego zadania rozwinięciem jest Really Simple Syndication (ang. 104 R o z d z i a ł 5. naprawdę łatwe publikowanie). Kanały informacyjne RSS są w rzeczywistości dokumentami XML zawierającymi wiadomości. Szerzej omówię je w dalszej części rozdziału. UWAGA Historia formatu RSS i jego różnych wersji jest dość skomplikowana, ale wystarczy wie- dzieć, że najnowszą i najszerzej stosowaną wersją RSS jest RSS 2.0. Możesz także spo- tkać się z kanałami informacyjnymi w formacie Atom, który jest bardzo podobny do RSS 2.0. Za pomocą specjalnego oprogramowania nazywanego czytnikiem kanałów możesz śledzić kanały informacyjne pochodzące z różnych witryn i mieć wygodny dostęp do szerokiego zestawu informacji bez potrzeby odwiedzania samych witryn. Możesz porównać RSS do pewnego rodzaju paska informacyjnego z wia- domościami z sieci, który umożliwia bieżące monitorowanie nowych publikacji na Twoich ulubionych witrynach. Większość współczesnych przeglądarek posiada wbudowaną obsługę przeglą- dania kanałów informacyjnych, chociaż nie jest ona tak rozbudowana jak w wy- specjalizowanych czytnikach kanałów. Na rysunku 5.1 widać główne wiadomości witryny Wired wyświetlane w przeglądarce Firefox. Rysunek 5.1. Kanały RSS mogą być wyświetlane w większości przeglądarek internetowych bez potrzeby instalowania specjalnych wtyczek czy oprogramowania P o b i e r a n i e da n y c h z k a n a ł ó w R S S 105 Oczywiście przeglądanie kanału informacyjnego bezpośrednio w przeglądarce to nie to samo co osadzanie go na własnej stronie. Tym zajmiemy się w naszym zadaniu — wykorzystaniem Ajaksa do dynamicznego pobierania i wyświetlania kanałów informacyjnych na stronie. Ponieważ każdy kanał informacyjny ma swój własny unikalny adres URL, ajaksowa część zadania jest właściwie bardzo prosta — pobranie całego dokumentu XML z określonego adresu. Oznacza to, że nie musisz w jakiś specjalny sposób przetwarzać danych po stronie serwera, co znacznie ułatwia sprawę. Ponieważ żądanie Ajaksa w tej aplikacji jest tak proste, rozbudujemy trochę interfejs użytkownika, dodając do niego informację, że dane są wczytywane. Jest to o tyle ważne, że niektóre kanały informacyjne zawierają wystarczająco dużo danych, żeby widoczne było opóźnienie w ich odczycie. Nawet kilkusekundowe opóźnienie może być mylące, jeśli nie wiesz, co się dzieje. Eleganckim rozwią- zaniem tego problemu jest wyświetlanie podczas wykonywania żądania obrazka sygnalizującego wczytywanie. Ostatnią częścią zadania jest umożliwienie użytkownikowi wyboru spośród kilku różnych kanałów informacyjnych. Zapewni to nie tylko dobry sposób przeprowadzenia testów obciążeniowych, ale także większą elastyczność apli- kacji z punktu widzenia użytkownika. Oczywiście podczas dołączania RSS do swojej strony możesz zdecydować się na wykorzystanie pojedynczego kanału i zre- zygnować z możliwości wyboru. Tak czy siak, przykładowa aplikacja Czytnik wia- domości jest dobrym początkiem Twoich przygód z kanałami RSS w Ajaksie. Projekt: aplikacja do odczytu wiadomości Projekt aplikacji Czytnik wiadomości rozpoczniemy od żądania Ajaksa, w którym do aplikacji przesyłane są dane z serwera kanałów informacyjnych. Żądanie roz- poczyna się przesłaniem adresu URL do serwera, który następnie zwraca doku- ment XML zawierający szczegółowe dane kanału informacyjnego, włączając w to listę z poszczególnymi wiadomościami, łączami do nich oraz datami publikacji. Żądanie Ajaksa jest wywoływane przez użytkownika, który wybiera kanał in- formacyjny na liście. Biorąc pod uwagę to, że każdy kanał informacyjny ma własny adres URL, który jest wykorzystywany jako podstawa żądania Ajaksa, musisz znaleźć sposób, żeby powiązać URL z nazwą kanału wyświetlaną użytkownikowi na liście wyboru. Atrybut value znacznika option idealnie nadaje się do przechowywania adresu URL kanału i umożliwia łatwe tworzenie listy wyboru. Lista wyboru kanałów informacyjnych jest głównym elementem interfejsu użytkownika aplikacji Czytnik wiadomości. Interfejs ten składa się z dwóch części: listy wyboru kanałów informacyjnych oraz miejsca, w którym wyświetlane są wczy- tane dane. Dane kanałów informacyjnych w tym przypadku składają się z tytułu ka- nału oraz poszczególnych wiadomości służących jako łącza do pełnej wersji wiado- mości. Na rysunku 5.2 widać, w jaki sposób interfejs użytkownika aplikacji Czytnik wiadomości uczestniczy w żądaniu Ajaksa pobierającym kanał informacyjny. 106 R o z d z i a ł 5. Rysunek 5.2. Interfejs użytkownika aplikacji Czytnik wiadomości składa się z listy wyboru i miejsca, w którym wyświetlany jest tytuł kanału oraz poszczególne wiadomości Wcześniej wspomniałem, że aplikacja powinna wykorzystać animowany ob- razek, żeby wskazać użytkownikowi, że wykonywane jest żądanie Ajaksa pobie- rające dane z kanału informacyjnego. Na rysunku 5.3 widać, jak wygląda wyko- rzystywany w tym celu animowany obrazek wait.gif. Rysunek 5.3. Aplikacja Czytnik wiadomości wykorzystuje animowany obrazek (wait.gif), żeby wskazać użytkownikowi, że wykonywane jest żądanie Ajaksa Oczywiście trudno jest pokazać animację na drukowanej stronie, ale ruch obrazka daje użytkownikowi poczucie, że coś się dzieje i strona się nie zawiesiła. Mógłbyś zakwestionować pomysł wyświetlania użytkownikowi w asynchronicz- nej aplikacji animowanego obrazka oznaczającego wczytywanie. Czy w Ajaksie nie chodzi o to, żeby użytkownik nie musiał na nic czekać? Tak, ale pamiętaj o tym, że aplikacja nie jest blokowana podczas żądania — użytkownik może wybrać inny kanał informacyjny, co spowoduje przerwanie wczytywania bieżącego ka- nału i załadowanie nowego. Animowany obrazek służy po prostu do wskazania użytkownikowi, że w tle wykonywane są jakieś zadania. Powinieneś już mieć wystarczające pojęcie o ogólnym projekcie aplikacji, żeby przejść do szczegółów żądania i odpowiedzi Ajaksa. Żądanie klienta Gdyby nie było ograniczeń bezpieczeństwa, żądanie klienta w aplikacji Czytnik wiadomości byłoby najprostszą częścią do zaimplementowania, ponieważ po prostu wykonywałbyś żądanie GET adresu URL bez żadnych parametrów. Jednak nie można wykonać żądania Ajaksa bezpośrednio do zdalnego serwera inter- netowego, co oznacza, że będziesz musiał stworzyć własny skrypt po stronie serwera obsługujący takie żądania. P o b i e r a n i e da n y c h z k a n a ł ó w R S S 107 Wszystkim, czego potrzeba do pobrania danych z kanału informacyjnego, jest adres URL serwera, który go udostępnia. Dlatego też w żądaniu aplikacji Czytnik wiadomości od klienta do skryptu serwera musi zostać przesłany adres URL kanału informacyjnego. Następnie serwer obsłuży takie żądanie, pobierze dane i odeśle je w odpowiedzi Ajaksa. Kluczowym elementem jest znalezienie odpowiednich kanałów RSS, co przekłada się na poznanie ich adresów URL. Jeśli zaczniesz się baczniej przyglądać witrynom internetowym, które odwie- dzasz, możesz zauważyć na nich łącze „kanały rss” albo nawet ikonkę RSS umiesz- czone w pobliżu głównego menu lub łączy nawigacyjnych. W ten sposób możesz znaleźć adresy URL kanałów informacyjnych, które są wszystkim, czego po- trzebujesz do wczytania kanałów RSS za pomocą Ajaksa. UWAGA Większość informacyjnych witryn internetowych, takich jak witryny z wiadomościami, udostępnia wiele kanałów o określonej tematyce. Na przykład USA Today udostępnia ponad 30 różnych kanałów sportowych, począwszy od szkolnego hokeja, do wyści- gów konnych. Żeby uzyskać do nich dostęp, musisz po prostu przewinąć do dołu głów- ną stronę witryny USA Today (http://www.usatoday.com/) i kliknąć małą pomarańczową ikonkę XML. Taka ikonka jest często wykorzystywana zamiast nowszej ikonki RSS. Odpowiedź serwera Strona serwera aplikacji Czytnik wiadomości jest odpowiedzialna tylko za dostar- czenie dokumentu XML zawierającego informacje z kanału wiadomości w for- macie RSS, który jest formatem XML. W przeciwieństwie do niektórych przy- kładów w tej książce, w których skrypt PHP przetwarza dane przed zwróceniem ich w odpowiedzi Ajaksa, aplikacja Czytnik wiadomości wymaga tylko, żeby skrypt PHP służył jako obejście ograniczenia uniemożliwiającego wysłanie żą- dania klienta do zewnętrznego serwera. Jest to ograniczenie zabezpieczające kod JavaScript po stronie klienta przed odwoływaniem się poza domenę, z któ- rej został wczytany. Z tego powodu w aplikacji Czytnik wiadomości jest wymagany skrypt po stronie serwera, ale jego jedynym zadaniem jest pobranie danych z zewnętrz- nego serwera i zwrócenie ich do klienta poprzez odpowiedź Ajaksa. Skrypt serwera możesz sobie wyobrazić jako pośrednika pomiędzy kodem JavaScript po stronie klienta a właściwym serwerem udostępniającym kanały informacyjne. Ponownie kluczowym powodem zastosowania takiego podejścia jest fakt, że kod Ajaksa może wykonywać żądania tylko do Twojego serwera, co stanowi poważ- ny problem, kiedy potrzebujesz pobrać dane z innego miejsca. Rozwiązaniem jest umożliwienie skryptowi serwera pobrania danych i posłużenie się nimi jako podstawą odpowiedzi na żądania Ajaksa. Zewnętrznymi (zdalnymi) serwerami, o których mówię, mogą być dowolne serwery udostępniające dane w formacie RSS. Jeśli trochę poszukasz, odkryjesz, że niemal każda strona internetowa udostępnia dane w tym formacie. Kiedy za 108 R o z d z i a ł 5. pomocą przeglądarki znajdziesz kanał informacyjny, zanotuj jego adres URL — wykorzystasz go potem w kodzie podczas wykonywania żądania Ajaksa po kanał RSS. Konwersacja pomiędzy klientem a serwerem Jeśli połączysz wszystko, czego dowiedziałeś się o komunikacji odbywającej się w aplikacji Czytnik wiadomości, otrzymasz przepływ danych — taki, jak na ry- sunku 5.4. Rysunek 5.4. Aplikacja Czytnik wiadomości wykonuje żądanie zawierające adres URL kanału informacyjnego i odbiera dane XML zawierające ten kanał Danymi wysyłanymi do serwera jako parametr żądania Ajaksa jest adres URL kanału informacyjnego. Chociaż dane te są zawsze w formacie URL, mogą mieć różną postać. Na przykład adres URL kanału informacyjnego związanego z witryną internetową Scientific American wygląda tak: http://www.sciam.com/ xml/sciam.xml. Zauważ, że powyższy adres odnosi się do określonego dokumentu XML — sciam.xml. Ma to sens, ponieważ kanały RSS są właściwie dokumentami XML, ale adresy URL kanałów informacyjnych nie zawsze odnoszą się do plików XML. Na przykład adres URL kanału informacyjnego Wired News wygląda tak: http://feeds.wired.com/wired/topheadlines. W powyższym przykładzie URL jest ścieżką — w przeciwieństwie do nazwy pliku. Wynika z tego, że nie jesteś w stanie przewidzieć dokładnej postaci adresu URL kanału komunikacyjnego. Z drugiej strony najczęściej wystarczy po prostu wykorzystanie adresu w takiej postaci, jaką udostępnia witryna internetowa. Kiedy znasz już adres URL serwera kanału informacyjnego, musisz go umieścić w większym adresie URL, który będzie częścią żądania Ajaksa do skryptu serwera aplikacji Czytnik wiadomości. Poniżej znajduje się jego przykład: newsfeeder.php?rssurl=http://www.sciam.com/xml/sciam.xml P o b i e r a n i e da n y c h z k a n a ł ó w R S S 109 Powyższy kod pokazuje, w jaki sposób adres URL kanału informacyjnego umieszczany jest jako pojedynczy parametr (rssurl) adresu URL. Cały adres URL jest wykorzystywany jako podstawa żądania Ajaksa, które zostanie wysła- ne do skryptu serwera newsfeeder.php. Z kolei skrypt serwera pobierze adres URL z parametru rssurl i wykorzysta go do wczytania informacji z kanału in- formacyjnego. Teraz już wiesz, że skrypt serwera pobiera adres URL z parametru rssurl i następnie wykorzystuje go do pobrania dokumentu RSS. Dokument ten jest następnie zwracany do kodu JavaScript poprzez odpowiedź Ajaksa. Poniżej znajduje się przykład kodu RSS: ?xml version= 1.0 encodig= utf-8 ? rss version= 2.0 xmlns:dc= http://purl.org/dc/elements/1.1/ channel title Scientific American - Official RSS Feed /title link http://www.ciam.com/ /link image url http://www.sciam.com/media/logo/SAlogo_144px.gif /url title Scientific American.com /title link http://www.sciam.com/ /link width 144 /width height 45 /height /image description Science news and technology updates from Scientific American /description language en-us /language managingEditor editors@sciam.com managingEditor dc:publisher Scirntific American /dc:publisher copyright Copyright 1996-2007 Scientific American /copyright item title News: Snake Bites the Toxic Toad That Feeds It-and Spreads Its Poison /title link http://www.sciam.com/article.cfm?chanID=sa003 amp; articleID=6FD96438-E7F2-99DF-3C8A12ACF6BB25D8 amp; ref=rss /link guid http://www.sciam.com/article.cfm?chanID=sa003 amp; articleID=6FD96438-E7F2-99DF-3C8A12ACF6BB25D8 amp; ref=rss /guid author JR Minkel lt;editors@sciam.com gt; /author dc:date 2007-01-29T17:00:00-05:00 /dc:date /item item title News: Did Honets Abe Have Nerves of Glass? /title link http://www.sciam.com/article.cfm?chanID=sa003 amp; articleID=6FD6E124-E7F2-99DF-3E0EDA7A34E03A06 amp; ref=rss /link guid http://www.sciam.com/article.cfm?chanID=sa003 amp; articleID=6FD6E124-E7F2-99DF-3E0EDA7A34E03A06 amp; ref=rss /guid 110 R o z d z i a ł 5. author Nikhil Swaminathal lt;editors@sciam.com gt; /author dc:date 2007-01-29T17:00:00-05:00 /dc:date /item ... /channel /rss Na pierwszy rzut oka kod wygląda na skomplikowany, ale do naszych celów możemy go w większej części zignorować. Pamiętaj o tym, że zadaniem aplika- cji Czytnik wiadomości jest wyświetlenie listy wiadomości, które są łączami do pełnej treści. Możesz wyciągnąć te dane z dokumentu XML i zignorować resztę. Żeby zobaczyć, co mam na myśli, popatrz na kod i znajdź znacznik item . Teraz spójrz na kod znajdujący się poniżej tego znacznika i znajdź znaczniki title , link oraz dc:date . Kod wygląda tak, jak poniżej: ... item title News: Snake Bites the Toxic Toad That Feeds It-and Spreads Its Poison /title link http://www.sciam.com/article.cfm?chanID=sa003 amp; articleID=6FD96438-E7F2-99DF-3C8A12ACF6BB25D8 amp; ref=rss /link ... dc:date 2007-01-29T17:00:00-05:00 /dc:date /item ... W znaczniku title znajduje się tytuł pojedynczej wiadomości, a w znaczniku link łącze do niej. Znacznik dc:date może być właściwie traktowany jako znacznik date , ponieważ dc jest przedrostkiem przestrzeni nazw, a nie częścią znacznika. Większość kanałów RSS do zakodowania daty publikacji zamiast znacznika date używa pubDate , więc podczas przetwarzania danych XML warto wziąć pod uwagę oba znaczniki. Należy również obsłużyć sytuację, w której nie ma żadnego z tych znaczników, ponieważ data publikacji jest w dokumencie RSS opcjonalna. Z powyższego omówienia wynika, że możesz bez większych problemów przeglądać kod RSS i pobrać z niego potrzebne znaczniki wraz z ich zawartością, żeby stworzyć listę wiadomości. UWAGA Powód, dla którego do zakodowania daty publikacji stosowane są dwa różne znaczniki, jest złożony i ma związek z konkurencyjnymi specyfikacjami i gwałtownym rozwojem formatu RSS. Nie będę tu przedstawiał nudnej i zbędnej historii RSS, powiem tylko, że najprawdopodobniej znacznie częściej spotkasz się ze znacznikiem pubDate niż date ( dc:date ). Warto jednak obsługiwać obydwa znaczniki, ponieważ date jest wyko- rzystywany przez kilka znanych stron. P o b i e r a n i e da n y c h z k a n a ł ó w R S S 111 Oczywiście będziesz również musiał pobrać nazwę kanału i być może nawet łącze do jego witryny internetowej. Informacje te także znajdują się w znacznikach title i link , ale tym razem pod znacznikiem channel . Kiedy ponownie popatrzymy na kod Scientific American, zobaczymy tytuł i łącze kanału infor- macyjnego: ... channel title Scientific American - Official RSS Feed /title link http://www.sciam.com/ /link .... Podsumowując, z dokumentu RSS (XML) kanału wiadomości w aplikacji Czytnik wiadomości muszą zostać pobrane następujące informacje: (cid:132) tytuł kanału informacyjnego ( title wewnątrz channel ), (cid:132) łącze kanału informacyjnego ( link wewnątrz channel ), (cid:132) tytuły wiadomości ( title wewnątrz item ), (cid:132) łącza wiadomości ( link wewnątrz item ), (cid:132) daty publikacji wiadomości ( pubDate lub date wewnątrz item ). Dwie pierwsze informacje występują w dokumencie kanału informacyjnego tylko raz, natomiast kolejne mogą pojawić się wielokrotnie, jeśli jest wiele wia- domości, a zazwyczaj tak jest. Każda informacja znajduje się w osobnym znaczniku item . Chociaż mógłbym poświęcić jeszcze mnóstwo czasu na omówienie różnych elementów formatu danych RSS, nie zrobię tego — nie ma po prostu takiej potrzeby. Wiesz już wszystko, co trzeba, żeby zająć się implementacją aplikacji Czytnik wiadomości, więc do dzieła! Implementacja aplikacji Czytnik wiadomości Prawdopodobnie jesteś przygotowany na stworzenie głównych części aplikacji Czytnik wiadomości: strony internetowej oraz skryptu serwera. Jest jednak jeszcze trzecia część układanki — arkusz stylów CSS. Nie jest on niezbędny, ale po- zwala na nadanie wyświetlanym informacjom ładnego wyglądu. Poniżej znaj- dują się wymagane elementy aplikacji: (cid:132) strona HTML (newsfeeder.html), (cid:132) arkusz stylów CSS (newsfeeder.css), (cid:132) skrypt PHP serwera (newsfeeder.php). 112 R o z d z i a ł 5. Pamiętaj o tym, że w skład tych elementów wchodzą także zewnętrzne ser- wery wskazywane przez adresy URL poszczególnych kanałów informacyjnych. Serwery te nie są częścią aplikacji, to znaczy nie znajdują się na nich żadne pli- ki ani zasoby, którymi musisz się zajmować, ale bez względu na to pełnią klu- czową rolę w funkcjonowaniu aplikacji. Dlatego też kiedy w następnych punk- tach będziesz pracował nad plikami aplikacji Czytnik wiadomości, pamiętaj, że są one uzależnione od zdalnych serwerów, z których pobierane są dane. Strona internetowa aplikacji Czytnik wiadomości Strona aplikacji Czytnik wiadomości (newsfeeder.html) jest niewątpliwie naj- ważniejszą jej częścią, ponieważ odpowiada za przetwarzanie danych RSS ode- słanych przez skrypt serwera i wyświetlenie ich w czytelny sposób. Na rysunku 5.5 widać, że strona zawiera listę wyboru kanałów wiadomości, a pod nią element div zawierający łącze z tytułem wybranego kanału oraz listę łączy wiadomości. Rysunek 5.5. Strona aplikacji Czytnik wiadomości składa się z listy wyboru kanału oraz informacji związanych z aktualnie wybranym kanałem Kod HTML strony aplikacji Czytnik wiadomości z interfejsem użytkownika znajduje się w znaczniku body , który przedstawiono poniżej: P o b i e r a n i e da n y c h z k a n a ł ó w R S S 113 body onload= loadFeed() div id= ajaxState style= display:none /div br / div Wybierz kanał wiadomości: select id= feed onchange= loadFeed() option value= http://feeds.wired.com/wired/topheadlines Wired News /option option value= http://feeds.engadget.com/weblogsinc/engadget Engadget /option option value= http://feeds.ziffdavis.com/ziffdavis/extremetech ExtremeTech /option option value= http://feeds.feedburner.com/ajaxian Ajaxian /option option value= http://www.sciam.com/xml/sciam.xml Scientific American /option option value= http://news.google.com/?output=rss Google (cid:180)News /option option value= http://www.michaelmorrison.com/mambo/index2.php? option=com_rss feed=RSS2.0 no_html=1 Blog Michaela (cid:180)Morrisona /option /select /div br / div id= feedcontent /div /body Kiedy pominiesz listę wyboru stworzoną za pomocą znacznika select , zobaczysz, że kod jest bardzo mały. W rzeczywistości na stronie są tylko dwa widoczne elementy: lista wyboru (feed) oraz element div (feedcontent) wykorzy- stywany do wyświetlania wiadomości z dynamicznie wczytanych kanałów in- formacyjnych. Fragmentem kodu, którego nie powinieneś przegapić w powyższej stronie, jest funkcja obsługi zdarzenia onload odpowiedzialna za wczytanie danych z pierwszego kanału na liście wyboru za pomocą funkcji loadFeed(). Zanim zaj- miemy się tą funkcją, warto wskazać, że możesz dostosować listę kanałów w aplika- cji Czytnik wiadomości, uzupełniając ją o własne kanały i nie zmieniając żadnego innego fragmentu kodu strony. Inaczej mówiąc, możesz całkowicie dostosować aplikację, nie patrząc na pozostały kod JavaScript — po prostu dodaj nowe znaczniki option lub zmodyfikuj istniejące, umieszczając w nich tytuły i ad- resy innych kanałów informacyjnych. Jeśli chcesz zrozumieć, w jaki sposób działa aplikacja, oczywiście będziesz musiał zagłębić się w kod JavaScript. Poniżej znajduje się kod funkcji loadFeed() odpowiedzialnej za inicjalizację żądania Ajaksa wczytującego dane kanału in- formacyjnego: 114 R o z d z i a ł 5. function loadFeed() { // Wyczyść poprzednią zawartość kanału document.getElementById( feedcontent ).innerHTML = img src= wait.gif alt= Wczytywanie... / ; // Wyślij żądanie Ajaksa wczytujące nową zawartość kanału ajaxSendRequest( GET , newsfeeder.php?rssurl= + encodeURIComponent(document.getElementById( feed ).options[ document.getElementById( feed ).selectedIndex].value), handleFeedRequest); } Pierwsza rzecz, którą robi funkcja loadFeed(), jest jedną z najbardziej inte- resujących funkcjonalności aplikacji — otóż wyświetla ona obrazek oczekiwa- nia (wait.gif), który pojawia się podczas przetwarzania żądania. Obrazek był już przedstawiony na rysunku 5.3, ale kiedy zobaczysz go we właściwym kontek- ście, tak jak na rysunku 5.6, jego rola będzie bardziej oczywista. Rysunek 5.6. Animowany obrazek wczytywania jest wykorzystywany do wskazania użytkownikowi, że przetwarzane jest żądanie Ajaksa Powracając do kodu funkcji loadFeed(), obrazek wczytywania jest wyświetlany poprzez zmianę zawartości elementu div o identyfikatorze feedcontent i umiesz- czenie w nim znacznika img . Zmiana ta jest wykonywana poprzez ustawienie właściwości innerHTML elementu div. Możesz wykorzystać tę właściwość do dynamicznego zmieniania zawartości elementu na stronie. Wykorzystamy ją ponownie za chwilę w kodzie wyświetlającym tytuł kanału informacyjnego i wia- domości w tym samym elemencie div. W ostatnim fragmencie kodu loadFeed() funkcja wysyła żądanie Ajaksa. Tworzony jest adres URL służący do komunikacji ze skryptem PHP serwera, zawierający parametr rssurl, w którym znajduje się adres URL kanału infor- macyjnego. Ustawiana jest tu również funkcja obsługi Ajaksa — handleFeed- Request(), wykonująca większość zadań w aplikacji. UWAGA W tym miejscu zdradzę Ci mały sekret — jest to pierwsze miejsce w książce, w którym do zmiany zawartości na stronie HTML wykorzystałem właściwość innerHTML. Czuję się trochę winny, ponieważ właściwość ta nie została oficjalnie zaakceptowana jako standard internetowy przez World Wide Web Consortium (W3C), co powoduje, że wyko- rzystanie jej jest wątpliwe. Jednak jest ona nieprawdopodobnie poręczna i wykorzystywana P o b i e r a n i e da n y c h z k a n a ł ó w R S S 115 w niezliczonych witrynach internetowych przez doświadczonych programistów, wiec istnieje małe prawdopodobieństwo, że w najbliższym czasie przestanie być obsługiwana. Alternatywą jest zmiana zawartości strony wyłącznie za pomocą interfejsu API DOM. Technika ta jest co prawda preferowana, ale w większości przypadków bardziej skompli- kowana. Zdecydowałem się na prostotę i dlatego wykorzystałem właściwość innerHTML. Jeśli chcesz zapoznać się z dyskusją na temat różnic między innerHTML a interfejsem API DOM, wpisz w wyszukiwarce „innerHTML” i „DOM”. Znajdziesz wiele skrajnych opinii! Zanim zajmiemy się kodem funkcji handleFeedRequest(), jest jeszcze jeden fragment kodu warty uwagi. Mam na myśli kod znajdujący się tuż pod funkcją loadFeed(), który wczytuje obrazek wait.gif: var waitImage = new Image(); waitImage.src = wait.gif ; Zadaniem tego kodu jest to, żeby nie było widoczne opóźnienie podczas wczytywania obrazka. Rolą obrazka jest wskazanie użytkownikowi, że w tle coś się dzieje. Dlatego też wczytujemy go jeszcze przed wyświetleniem strony. Jest to możliwe dzięki temu, że kod wczytujący obrazek znajduje się poza jakąkol- wiek funkcją JavaScript, co powoduje, że jest automatycznie wykonywany pod- czas wczytywania strony. Powracając do funkcji handleFeedRequest(), jej zadaniem jest reagowanie na odpowiedź Ajaksa — pobranie zwróconych danych RSS i wyświetlenie wia- domości z kanału. Poniżej znajduje się kod tej funkcji: function handleFeedRequest() { if (request.readyState == 4 request.status == 200) { // Zapamiętaj dane z odpowiedzi XML var xmlData = request.responseXML; // Wygeneruj zawartość, zaczynając od tytułu kanału var feedContent = ; var channelElem = xmlData.getElementsByTagName( channel )[0]; feedContent += div class= feedtitle a href= + getText(channelElem.getElementsByTagName( link )[0]) + + getText(channelElem.getElementsByTagName( title )[0]) + /a /div ; // Teraz wygeneruj nienumerowaną listę wiadomości feedContent += ul ; var feedItems = channelElem.getElementsByTagName( item ); for (var i = 0; i feedItems.length; i++) { var itemTitle = (cid:180)getText(feedItems[i].getElementsByTagName( title )[0]); var itemLink = getText(feedItems[i].getElementsByTagName( link )[0]); 116 R o z d z i a ł 5. var itemPubDate = (cid:180)getText(feedItems[i].getElementsByTagName( pubDate )[0]); if (itemPubDate == ) itemPubDate = (cid:180)getText(feedItems[i].getElementsByTagName( date )[0]); if (itemPubDate == ) feedContent += li a href= + itemLink + + itemTitle + /a /li ; else feedContent += li a href= + itemLink + + itemTitle + span class= itemdate ( + itemPubDate + ) /span /a /li ; } feedContent += /ul ; // Wyświetl zawartość kanału document.getElementById( feedcontent ).innerHTML = feedContent; } ajaxUpdateState(); } Oczywiście jest tu sporo kodu, ale nie jest on specjalnie trudny. Pamiętaj o tym, że tak naprawdę służy on do stworzenia fragmentu HTML. Inaczej mówiąc, funkcja tworzy część strony internetowej, która może zostać umieszczona i wy- świetlona w elemencie div z zawartością kanału informacyjnego. Wygenerowany HTML zawiera tytuł kanału informacyjnego będący jednocześnie łączem do stro- ny, z której pochodzi. Kod HTML zawiera także nienumerowaną (wypunkto- waną) listę wiadomości składających się z tytułu, który jest również łączem, oraz daty publikacji. Należy zauważyć, że wygenerowany kod HTML zawiera odwołania do klas arkusza stylów CSS, które umożliwiają zastosowanie odpo- wiedniego stylu dla danej zawartości. Pod koniec kodu funkcji handleFeedRequest() możesz zobaczyć linię kodu umieszczającą dynamicznie wygenerowany kod HTML na stronie: document.getElementById( feedcontent ).innerHTML = feedContent; Chociaż niewielka, ta pojedyncza linia robi bardzo dużo, biorąc pod uwagę, że jest odpowiedzialna za zamianę obrazka „wczytywanie” na sformatowany tytuł kanału informacyjnego oraz poszczególne wiadomości. Wygląd strony aplikacji Czytnik wiadomości jest wynikiem zastosowania arku- sza stylów newsfeeder.css dołączanego do strony za pomocą poniższego łącza: link rel= stylesheet type= text/css href= newsfeeder.css / Arkusz stylów newsfeeder.css znajduje się w tym samym katalogu — chap05 — co reszta plików źródłowych aplikacji Czytnik wiadomości. W następnym punkcie omówię go krótko i przedstawię jego wpływ na ostateczny wygląd aplikacji. P o b i e r a n i e da n y c h z k a n a ł ó w R S S 117 Arkusz stylów aplikacji Czytnik wiadomości Przyznam się, że niechętnie zamieszczam kod arkusza stylów CSS w książce o Ajaksie. Jednak aplikacja Czytnik wiadomości jest znakomitym przykładem tego, jak bardzo można zmienić wygląd aplikacji za pomocą stosunkowo niewielkiej ilości kodu. Jeśli mi nie wierzysz, spójrz na rysunek 5.7 przedstawiający aplika- cję Czytnik wiadomości bez zastosowania arkusza stylów. Rysunek 5.7. Po usunięciu arkusza stylów aplikacja Czytnik wiadomości wygląda ubogo Porównaj ten rysunek z rysunkiem 5.5 przedstawiającym ten sam kanał in- formacyjny, ale z zastosowaniem arkusza stylów. Moim celem jest pokazanie tego, że chociaż CSS ma niewiele wspólnego z Ajaksem, jednak można za jego pomocą nadać aplikacji bardziej elegancki i profesjonalny wygląd. Poniżej znajduje się kod CSS odpowiedzialny za style kanału wiadomości w aplikacji Czytnik wiadomości: div.feedtitle { padding-left : 5px; background-color : #EEEEEE; font-size : 22px; font-weight : bold; } div.feedtitle a { color : #666677; 118 R o z d z i a ł 5. text-decoration : none; } div.feedtitle a:hover { color : #333344; text-decoration : none; } Tytuł kanału informacyjnego jest wygenerowanym kodem HTML z atry- butem class o wartości feedtitle, który łączy go z grupą stylów o tej nazwie. Jako pierwsze style ustawione są lewostronne wyrównanie, kolor tła, rozmiar i grubość czcionki. Następnie ustawiany jest kolor tekstu, który zmienia się, kiedy użytkownik najedzie kursorem myszy na tytuł (który, jak sobie przypo- minasz, jest łączem). Styl text-decoration jest wykorzystywany do nadpisania domyślnego ustawienia HTML powodującego podkreślanie łączy, kiedy użyt- kownik umieści nad nimi kursor myszy — w tym przypadku czytelniej i bar- dziej profesjonalnie będzie wyglądać zmiana koloru. Podobne style CSS zastosowane są do poszczególnych wiadomości wyświetla- nych w wypunktowanej liście: li { font-size : 18px; padding-left : 25px; background : url(newspaper.gif) no-repeat; list-style : none; } Powyższy kod jest odpowiedzialny za wyświetlanie ładnej małej ikonki ga- zety obok każdego elementu listy (patrz rysunek 5.5). Każdy element jest rów- nież łączem, dlatego też zastosowana jest podobna koncepcja zmiany koloru po najechaniu kursorem myszy jak w przypadku tytułu kanału. Poniżej znajduje się kod CSS, który realizuje to zadanie: a:link { color : #333344; text-decoration : none; } a:visited { color : #9999AA; text-decoration : none; } a:hover, a:active { background : #EEEEEE; text-decoration : none; } P o b i e r a n i e da n y c h z k a n a ł ó w R S S 119 W końcu możesz zauważyć, że data publikacji każdej wiadomości jest wy- świetlana kursywą i w jasnym kolorze, dzięki czemu tytuł jest lepiej widoczny. Poniżej znajduje się styl CSS odpowiedzialny za wygląd daty publikacji poszcze- gólnych wiadomości: span.itemdate { font-style : italic; color : #CCCCDD; } To już wszystko na temat arkuszy stylów w aplikacji Czytnik wiadomości. Pozostał jeszcze skrypt PHP serwera i aplikacja będzie gotowa. Skrypt serwera aplikacji Czytnik wiadomości Widziałeś kiedyś sztafetę i miejsce, w którym jeden biegacz przekazuje pałeczkę drugiemu? To prawie to samo, co robi skrypt serwera newsfeeder.php w aplikacji Czytnik wiadomości. Po uruchomieniu pobiera dane kanału RSS ze zdalnego serwera i następnie przekazuje je do kodu JavaScript po stronie klienta. Infor- macja, skąd mają zostać pobrane dane, jest przekazywana za pomocą parametru rssurl umieszczonego w żądaniu Ajaksa. Poniżej znajduje się kod skryptu PHP: ?php header( Content-type: text/xml; ); // Zwróć dane kanału RSS echo file_get_contents($_REQUEST[ rssurl ]); ? UWAGA Pamiętaj, że zadaniem tego pośredniczącego skryptu serwera jest obejście ograniczenia uniemożliwiającego wykonywanie żądań Ajaksa do zdalnych serwerów. Gdyby takie ograniczenie nie istniało, skrypt serwera nie byłby potrzebny i klient wykonywałby po prostu żądanie bezpośrednio do serwera udostępniającego dane RSS. Jednak istnieje ważna przyczyna wprowadzenia takiego ograniczenia: bezpieczeństwo! Umożliwienie skryptom klienta wykonywania żądań do zewnętrznych serwerów byłoby zbyt niebez- pieczne, dlatego też konieczność stworzenia własnego skryptu pośredniczącego w żą- daniach Ajaksa jest niską ceną, jaką trzeba zapłacić za bezpieczny internet. Po ustawieniu nagłówka zapewniającego, że odpowiedź będzie traktowana jako dokument XML, w skrypcie pozostaje już tylko jedna linijka kodu. Funkcja file_get_contents() pobiera dane z określonego adresu URL, czyli robi dokładnie to, czego potrzebujesz. Zatem wszystkim, co robi ten skrypt, jest przekazanie adresu URL do funkcji i następnie wysłanie jej wyniku do klienta. Końcowym 120 R o z d z i a ł 5. rezultatem jest sformatowany dokument kanału RSS odsyłany do klienta w od- powiedzi Ajaksa. Testowanie aplikacji Czytnik wiadomości Kiedy po raz pierwszy otworzysz stronę czytnika wiadomości, zostanie wczytany pierwszy kanał na liście wyboru, którym są akurat najnowsze informacje z Wired News. Na rysunku 5.8 widać aplikację, w której wyświetlany jest ten kanał. Rysunek 5.8. Po otwarciu aplikacji Czytnik wiadomości wczytywany jest pierwszy kanał informacyjny na liście wyboru Po wybraniu innego kanału za pomocą listy wyboru na czas wykonywania żądania Ajaksa wyświetlany jest obrazek „wczytywanie”. Na rysunku 5.9 widać zmianę kanału z Wired News na Engadget. Rysunek 5.9. Po zmianie kanału wiadomości wyświetlany jest obrazek „wczytywanie” wskazujący, że w tle wykonywane są jakieś zadania P o b i e r a n i e da n y c h z k a n a ł ó w R S S 121 Kanały wiadomości nie mają specjalnie dużego rozmiaru, więc ich wyświetle- nie nie powinno zająć dużo czasu. Wyświetlane wiadomości zastępują na stronie obrazek „wczytywanie”, co widać na rysunku 5.10. Rysunek 5.10. Po zakończeniu wczytywania kanału wiadomości z niego zastępują na stronie obrazek „wczytywanie” Należy zauważyć, że właśnie stworzyłeś zaskakująco poręczny, niewielki czytnik wiadomości. Mam na myśli to, że po poznaniu sposobu działania Ajaksa w aplikacji Czytnik wiadomości możesz ją wykorzystać do przeglądania wia- domości. Kliknij po prostu element na liście, żeby przejść na stronę pełnej wiadomości. W tym przypadku kliknięcie przeniesie Cię na stronę wiadomości witryny Engadget Web. Oprócz interesujących wiadomości o gadżetach strona Engadget Web jest także świetnym przykładem tego, jak łatwo wykorzystać kanały RSS do publi- kowania informacji z witryny. Popatrz na górny prawy róg strony Engadget Web, gdzie znajduje się standardowa pomarańczowa ikonka RSS. Kliknij ją, żeby uzyskać adres URL kanału informacyjnego, który możesz dodać do Czytnika wiadomości. 122 R o z d z i a ł 5. Przerabianie aplikacji Czytnik wiadomości Żadna aplikacja w tej książce nie jest tak naprawdę ukończona. Mówiąc to, mam na myśli, że przykładowe aplikacje są tylko punktem, od którego możesz zacząć eksperymentowanie z Ajaksem. Czytnik wiadomości nie stanowi wyjąt- ku i w rzeczywistości jest znakomitym przykładem aplikacji, którą możesz do- stosować do własnych potrzeb. Być może najbardziej oczywistym sposobem przerobienia aplikacji Czytnik wiadomości jest zmiana samych kanałów wiadomości. Jest to także najprostsza zmiana, ponieważ wymaga tylko modyfikacji znaczników option na stronie — zmiany tytułów i wartości, tak żeby odpowiadały innym kanałom. Pamiętaj o tym, że możesz dodać dowolną liczbę znaczników option , tworząc listę wyboru z wieloma różnymi kanałami wiadomości. Musisz tylko umieścić nazwę kanału pomiędzy znacznikami option i /option , a następnie przypisać adres URL do atrybutu value. Możesz również zdecydować, że możliwość wyboru kanałów wiadomości z listy nie jest tym, czego chcesz, i w takim przypadku po prostu osadzić pojedynczy kanał w swojej stronie. Żeby to zrobić, musisz wziąć odpowiedni fragment kodu ze strony newsfeeder.html i umieścić go we własnej witrynie. Będzie się to wiązać głównie z przekopiowaniem kodu z sekcji head oraz z przeniesieniem funkcji obsługi zdarzenia onload znajdującej się w znaczniku body , która wywołuje funkcję loadFeed(). Musisz także stworzyć element div o identyfikatorze feed- content. Na końcu będziesz jeszcze musiał przerobić funkcję loadFeed(), tak żeby wykorzystywała wybrany przez Ciebie adres URL kanału wiadomości zamiast pobierania go z listy wyboru. Jeśli zdecydujesz się na osadzenie kanału informacyjnego na stronie, na której jest już jakaś zawartość, prawdopodobnie będziesz chciał ograniczyć liczbę wy- świetlanych wiadomości. Na przykład możesz chcieć wyświetlać tylko pięć pierw- szych wiadomości. Żeby to zrobić, musisz zmienić pętlę for w funkcji handleFeed- Request() tak, jak poniżej: for (var i = 0; (i feedItems.length) (i numItems);i++) { W powyższym kodzie zmienna numItems wskazuje, ile wiadomości ma zostać wyświetlonych. Możesz użyć zmiennej lub na sztywno zakodować tę liczbę: for (var i = 0; (i feedItems.length) (i 10);i++) { W powyższym przykładzie liczba wyświetlonych wiadomości jest ograniczona do dziesięciu. Pętla for w dalszym ciągu sprawdza długość tablicy feedItems, po- nieważ może się zdarzyć, że liczba wiadomości w kanale będzie mniejsza niż dzie- sięć, a w takim przypadku zostaną wyświetlone wszystkie dostępne wiadomości. P o b i e r a n i e da n y c h z k a n a ł ó w R S S 123 Ostatnim zadaniem, które możesz wziąć pod uwagę, kiedy masz już wiedzę na temat RSS, jest stworzenie własnego kanału. Jeśli masz bloga lub stronę in- ternetową z regularnie zmienianą zawartością, udostępnienie użytkownikom kanału informacyjnego na Twojej stronie jest bliską przyszłością. Mam nadzie- ję, że dowiedziałeś się w tym rozdziale wystarczająco dużo na temat formatu RSS, żeby spróbować stworzyć własne dokumenty RSS. Tak naprawdę najlep- szym rozwiązaniem jest stworzenie skryptu, który automatycznie będzie kon- wertował zawartość HTML na format RSS, dzięki czemu Twoja witryna będzie automatycznie publikowana w postaci kanałów wiadomości. Sposób realizacji tego rozwiązania wykracza nieco poza zakres tego rozdziału, ale masz już dobre narzędzie do testowania swoich kanałów wiadomości, kiedy już je stworzysz. Podsumowanie W tym rozdziale wprowadziłem Cię w interesujący obszar zarządzania zawar- tością internetową znany jako kanały wiadomości, który wykorzystuje standar- dowy, oparty na XML-u, format RSS (ang. Really Simple Syndication). Za po- mocą RSS można pobrać skrót zawartości witryny internetowej bez potrzeby jej odwiedzania. Co więcej, można pobrać zawartość z innej witryny i udostęp- nić ją na własnych stronach. Jest to dobra metoda aktualizowania własnych stron bez konieczności wprowadzania zmian we własnej zawartości. Stworzona przez Ciebie aplikacja Czytnik wiadomości pozwoliła zademonstrować, w jaki sposób za pomocą Ajaksa można dynamicznie wczytywać dane RSS i czytelnie prezentować je na stronie, dzięki czemu możliwe jest czytanie i nawigowanie do wiadomości. Aplikacja ta zawiera podstawowy kod, dzięki któremu możesz bez większego wysiłku umieścić kanały wiadomości RSS na własnych stronach. 124 R o z d z i a ł 5.
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Ajax. Niezbędnik projektanta dynamicznych aplikacji
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ą: