Ajax.

Niezbdnik
projektanta
dynamicznych aplikacji
Autor: Michael Morrison
Tumaczenie: Maciej Jezierski
ISBN: 978-83-246-1393-9
Tytu oryginau: Ajax Construction Kit:
Building Plug-and-Play Ajax Applications
(Negus Live Linux Series)
Format: 170x230, stron: 280
Wykorzystaj gotowe rozwizania w technologii AJAX!
Jak wykorzysta technologi AJAX?
Jak wykona najczciej spotykane zadania?
Jak zwikszy interaktywno serwisw WWW?

Technologia AJAX (skrt od ang. Asynchronous JavaScript and XML) pozwala

na tworzenie dynamicznych stron WWW, dostarczajcych niezapomnianych wrae
ich uytkownikom. Praktycznie wszystkie wspczesne aplikacje WWW oraz dua cz
witryn internetowych korzystaj z dobrodziejstw tego rozwizania, a jeszcze dzi
rwnie i Twoja strona moe zyska na interaktywnoci.
Dziki ksice Ajax. Niezbdnik projektanta dynamicznych aplikacji poznasz zasady
dziaania technologii AJAX, jej zalety oraz wady. Autor prezentuje dziesi przykadw
zastosowania technologii AJAX. Dziki nim nauczysz si midzy innymi, w jaki sposb
pobiera dane z kanaw RSS, jak wykorzysta format XML oraz jak kontrolowa
wprowadzane przez uytkownika dane w czasie rzeczywistym. Najwaniejsze jest
jednak to, e kade z tych praktycznych rozwiza moesz zaimplementowa
bezporednio na Twojej stronie!

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Zalety technologii AJAX

Przykadowe rozwizania, korzystajce z AJAX
Sposoby uywania formatu XML
Zasady funkcjonowania technologii AJAX
Tworzenie interaktywnych formularzy
Sposoby wykorzystania kanaw RSS
Dynamiczne pobieranie danych z innych serwisw
Sposb na efektown galeri
Tworzenie okien informacyjnych
Przewidywanie treci wprowadzanych przez uytkownika
Metody i waciwoci obiektu XMLHttpRequest
Przyszo technologii AJAX

Twoje strony te mog by interaktywne!

Spis treci
Podzikowania .............................................................................. 10
O autorze ....................................................................................... 11
Wstp ............................................................................................. 13

Cz I

Obz szkoleniowy Ajaksa ........................................ 17

Rozdzia 1.

Ajax i nowy wspaniay wiat sieci WWW .................................... 19

Obiad z Ajaksem ............................................................................................... 20
Ajax, Sting i asynchronia .................................................................................. 21
Przeadowywa czy nie przeadowywa .......................................................... 22
Czym waciwie jest Ajax? ............................................................................... 24
Ajax w rzeczywistoci ....................................................................................... 24
Ajax nie nadaje si do wszystkiego .................................................................. 28
Ponowne spojrzenie na kalkulator kosztw dostawy ...................................... 29
Podsumowanie .................................................................................................. 32

Rozdzia 2.

Wewntrz aplikacji ajaksowej ..................................................... 33

Jak dziaa Ajax ................................................................................................... 34
Cykl ycia dania ajaksowego ........................................................................ 37
Zapoznanie z bibliotek ajaksow .................................................................... 40
Budowa przegldarki ksiek elektronicznych ............................................... 45
Dopasowanie przegldarki ksiek .................................................................. 50
Podsumowanie .................................................................................................. 51

Spis treci

Cz II

Tworzenie prawdziwych aplikacji ajaksowych ........53

Rozdzia 3.

Dynamiczne adowanie danych:

przegldarka ksiek oparta na XML-u ...................................... 55
Zadanie: wczytywanie danych w mniejszych fragmentach ............................ 56
Projekt: przegldarka ksiek w formacie XML ............................................. 58
Implementacja przegldarki ksiek ............................................................... 63
Testowanie przegldarki ksiek ..................................................................... 76
Przerabianie przegldarki ksiek ................................................................... 78
Podsumowanie .................................................................................................. 79

Rozdzia 4.

Wykorzystanie Ajaksa
do dynamicznego wypeniania list: lista akcji ........................... 81
Zadanie: wywietlanie 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 kanaw RSS ............................................ 103

Zadanie: dynamiczne odpytywanie kanaw informacyjnych .................... 104
Projekt: aplikacja do odczytu wiadomoci ..................................................... 106
Implementacja aplikacji Czytnik wiadomoci ............................................... 112
Testowanie aplikacji Czytnik wiadomoci ..................................................... 121
Przerabianie aplikacji Czytnik wiadomoci ................................................... 123
Podsumowanie ................................................................................................ 124

Rozdzia 6.

Odgadywanie myli uytkownika

za pomoc autouzupeniania .................................................... 125
Zadanie: przewidywanie wprowadzanych danych ....................................... 126
Projekt: aplikacja z automatycznym uzupenianiem ..................................... 128
Implementacja aplikacji Uzupeniacz ........................................................... 132
Testowanie aplikacji Uzupeniacz ................................................................. 138
Przerabianie aplikacji Uzupeniacz ............................................................... 139
Podsumowanie ................................................................................................ 140

Rozdzia 7.

Tworzenie interaktywnego interfejsu uytkownika

ze sprawdzaniem poprawnoci ................................................. 141
Zadanie: sprawdzanie poprawnoci danych
wprowadzanych przez uytkownika w czasie rzeczywistym ..................... 143
Projekt: aplikacja Sprawdzacz ........................................................................ 145
Implementacja aplikacji Sprawdzacz ............................................................ 149
Testowanie aplikacji Sprawdzacz .................................................................. 156
Przerabianie aplikacji Sprawdzacz ................................................................ 158
Podsumowanie ................................................................................................ 161

Ajax. Niezbdnik projektanta aplikacji plug and play

Rozdzia 8.

Rewelacyjny interfejs do przegldania obrazkw .................. 163

Zadanie: dynamiczne wczytywanie obrazkw .............................................. 164
Projekt: dynamiczna przegldarka obrazkw ............................................... 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 kosztw dostawy .................................... 209
Zadanie: pobieranie aktualnych kosztw 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

Przeszo, teraniejszo i przyszo Ajaksa .......................... 261

Dodatek B

Krtki opis obiektu XMLHttpRequest ....................................... 265

Skorowidz ................................................................................... 273

Spis treci

5
Pobieranie danych
z kanaw RSS

AJAX W STAROYTNEJ GRECJI

Nie umniejszajc roli asynchronicznych aplikacji internetowych, by czas, kiedy Ajax
mia wiksze znaczenie. Mam na myli czasy staroytnej Grecji, kiedy legendarny grecki
bohater Ajaks walczy w wojnie trojaskiej. Mityczna sia i odwaga Ajaksa zostay opisane przez greckiego poet Homera w poemacie Iliada.

Jako kto, kto przez kilka lat tworzy i utrzymywa wiele witryn internetowych,
bardzo entuzjastycznie podszedem do kanaw RSS, kiedy zobaczyem je po
raz pierwszy. Umoliwiaj one wywietlanie informacji z innych serwisw i moesz
umieci je na wasnych stronach. Zapewniaj automatyczn aktualizacj witryny, a przynajmniej kanaw informacyjnych, ktre s na niej umieszczone.
Jeli nie masz wprawy lub nie chcesz skrupulatnie uzupenia wiadomoci, moesz
przyj, e kana informacyjny umieszczony na Twojej stronie pozwoli udostpnia interesujce, automatycznie aktualizowane informacje. Kana informacyjny,
ktry bdzie idealnie dopasowany do zawartoci Twojej strony, znajdziesz najprawdopodobniej ju po chwili poszukiwa.

W tym rozdziale omwi, w jaki sposb Ajax umoliwia dynamiczne odpytywanie kanaw informacyjnych i wywietlanie ich zawartoci na stronie. Przykadowa aplikacja, ktr poznasz w tym rozdziale, udostpnia prosty interfejs
umoliwiajcy wybieranie rnych usug informacyjnych i nastpnie wywietlenie ich na stronie. Oprcz tego podczas wykonywania dania Ajaksa zobaczysz may adny obrazek, ktry jest niemal tak samo odjazdowy jak dynamiczne pobieranie wiadomoci.
Poniej znajduje si lista plikw wykorzystywanych w aplikacji Czytnik wiadomoci w tym rozdziale. S one umieszczone w spakowanym archiwum zawierajcym przykadowy kod doczony do ksiki i znajdujcym si na serwerze FTP
wydawnictwa Helion pod adresem ftp://ftp.helion.pl/przyklady/ajaxnp.zip, w katalogu chap05.
newsfeeder.html strona gwna,
newsfeeder.php skrypt serwera do pobierania danych z kanaw
informacyjnych,
newsfeeder.css arkusz stylw do formatowania wiadomoci,
ajaxkit.js podstawowe funkcje Ajaksa w bibliotece ajaksowej,
domkit.js funkcje do obsugi DOM w bibliotece ajaksowej,
newspaper.gif ikonka gazety wywietlana obok kadej wiadomoci,
wait.gif animowana ikonka wywietlana podczas wykonywania
dania Ajaksa.

Zadanie: dynamiczne odpytywanie kanaw

informacyjnych
Zadaniem w tym rozdziale jest wykorzystanie Ajaksa do dynamicznego odpytywania usug internetowych udostpniajcych kanay informacyjne o dane (wiadomoci), a nastpnie wywietlanie ich na stronie. Mwic dokadniej, poszczeglne wiadomoci s tytuami penych wiadomoci, wic waciwie musisz wywietla
tytuy wiadomoci, ktre bd suy jako cza do poszczeglnych penych
wiadomoci. Jak si okazuje, kady element w kanale informacyjnym zawiera
midzy innymi zarwno tytu, jak i cze, tak wic kana informacyjny udostpnia
wszystkie dane wymagane do wykonania zadania.
Zanim zagbimy si w zadanie, musimy przede wszystkim przyjrze si
samym kanaom informacyjnym i ich roli w internecie. Wikszo kanaw informacyjnych oparta jest na technologii RSS. Umoliwia ona publikowanie zawartoci WWW, co oznacza, e moesz atwo pobiera informacje o nowociach
pojawiajcych si na rnych witrynach bez koniecznoci ich odwiedzania. Chocia skrt RSS by rnie interpretowany, najnowszym i najbardziej odzwierciedlajcym jego zadania rozwiniciem jest Really Simple Syndication (ang.

104

Rozdzia 5.

naprawd atwe publikowanie). Kanay informacyjne RSS s w rzeczywistoci

dokumentami XML zawierajcymi wiadomoci. Szerzej omwi je w dalszej czci
rozdziau.
UWAGA
Historia formatu RSS i jego rnych wersji jest do skomplikowana, ale wystarczy wiedzie, e najnowsz i najszerzej stosowan wersj RSS jest RSS 2.0. Moesz take spotka si z kanaami informacyjnymi w formacie Atom, ktry jest bardzo podobny do
RSS 2.0.

Za pomoc specjalnego oprogramowania nazywanego czytnikiem kanaw

moesz ledzi kanay informacyjne pochodzce z rnych witryn i mie wygodny
dostp do szerokiego zestawu informacji bez potrzeby odwiedzania samych
witryn. Moesz porwna RSS do pewnego rodzaju paska informacyjnego z wiadomociami z sieci, ktry umoliwia biece monitorowanie nowych publikacji
na Twoich ulubionych witrynach.
Wikszo wspczesnych przegldarek posiada wbudowan obsug przegldania kanaw informacyjnych, chocia nie jest ona tak rozbudowana jak w wyspecjalizowanych czytnikach kanaw. Na rysunku 5.1 wida gwne wiadomoci
witryny Wired wywietlane w przegldarce Firefox.

Rysunek 5.1. Kanay RSS mog by wywietlane w wikszoci przegldarek

internetowych bez potrzeby instalowania specjalnych wtyczek czy oprogramowania

Pobieranie danych z kanaw RSS

105

Oczywicie przegldanie kanau informacyjnego bezporednio w przegldarce

to nie to samo co osadzanie go na wasnej stronie. Tym zajmiemy si w naszym
zadaniu wykorzystaniem Ajaksa do dynamicznego pobierania i wywietlania
kanaw informacyjnych na stronie. Poniewa kady kana informacyjny ma
swj wasny unikalny adres URL, ajaksowa cz zadania jest waciwie bardzo
prosta pobranie caego dokumentu XML z okrelonego adresu. Oznacza to,
e nie musisz w jaki specjalny sposb przetwarza danych po stronie serwera,
co znacznie uatwia spraw.
Poniewa danie Ajaksa w tej aplikacji jest tak proste, rozbudujemy troch
interfejs uytkownika, dodajc do niego informacj, e dane s wczytywane.
Jest to o tyle wane, e niektre kanay informacyjne zawieraj wystarczajco duo
danych, eby widoczne byo opnienie w ich odczycie. Nawet kilkusekundowe
opnienie moe by mylce, jeli nie wiesz, co si dzieje. Eleganckim rozwizaniem tego problemu jest wywietlanie podczas wykonywania dania obrazka
sygnalizujcego wczytywanie.
Ostatni czci zadania jest umoliwienie uytkownikowi wyboru spord
kilku rnych kanaw informacyjnych. Zapewni to nie tylko dobry sposb
przeprowadzenia testw obcieniowych, ale take wiksz elastyczno aplikacji z punktu widzenia uytkownika. Oczywicie podczas doczania RSS do
swojej strony moesz zdecydowa si na wykorzystanie pojedynczego kanau i zrezygnowa z moliwoci wyboru. Tak czy siak, przykadowa aplikacja Czytnik wiadomoci jest dobrym pocztkiem Twoich przygd z kanaami RSS w Ajaksie.

Projekt: aplikacja do odczytu wiadomoci

Projekt aplikacji Czytnik wiadomoci rozpoczniemy od dania Ajaksa, w ktrym
do aplikacji przesyane s dane z serwera kanaw informacyjnych. danie rozpoczyna si przesaniem adresu URL do serwera, ktry nastpnie zwraca dokument XML zawierajcy szczegowe dane kanau informacyjnego, wczajc w to
list z poszczeglnymi wiadomociami, czami do nich oraz datami publikacji.
danie Ajaksa jest wywoywane przez uytkownika, ktry wybiera kana informacyjny na licie.
Biorc pod uwag to, e kady kana informacyjny ma wasny adres URL,
ktry jest wykorzystywany jako podstawa dania Ajaksa, musisz znale sposb,
eby powiza URL z nazw kanau wywietlan uytkownikowi na licie wyboru.
Atrybut value znacznika <option> idealnie nadaje si do przechowywania adresu
URL kanau i umoliwia atwe tworzenie listy wyboru.
Lista wyboru kanaw informacyjnych jest gwnym elementem interfejsu
uytkownika aplikacji Czytnik wiadomoci. Interfejs ten skada si z dwch czci:
listy wyboru kanaw informacyjnych oraz miejsca, w ktrym wywietlane s wczytane dane. Dane kanaw informacyjnych w tym przypadku skadaj si z tytuu kanau oraz poszczeglnych wiadomoci sucych jako cza do penej wersji wiadomoci. Na rysunku 5.2 wida, w jaki sposb interfejs uytkownika aplikacji Czytnik
wiadomoci uczestniczy w daniu Ajaksa pobierajcym kana informacyjny.
106

Rozdzia 5.

Rysunek 5.2. Interfejs uytkownika aplikacji Czytnik wiadomoci skada si z listy

wyboru i miejsca, w ktrym wywietlany jest tytu kanau oraz poszczeglne wiadomoci
Wczeniej wspomniaem, e aplikacja powinna wykorzysta animowany obrazek, eby wskaza uytkownikowi, e wykonywane jest danie Ajaksa pobierajce dane z kanau informacyjnego. Na rysunku 5.3 wida, jak wyglda wykorzystywany w tym celu animowany obrazek wait.gif.

Rysunek 5.3. Aplikacja Czytnik wiadomoci wykorzystuje animowany obrazek

(wait.gif), eby wskaza uytkownikowi, e wykonywane jest danie Ajaksa
Oczywicie trudno jest pokaza animacj na drukowanej stronie, ale ruch
obrazka daje uytkownikowi poczucie, e co si dzieje i strona si nie zawiesia.
Mgby zakwestionowa pomys wywietlania uytkownikowi w asynchronicznej aplikacji animowanego obrazka oznaczajcego wczytywanie. Czy w Ajaksie
nie chodzi o to, eby uytkownik nie musia na nic czeka? Tak, ale pamitaj o tym,
e aplikacja nie jest blokowana podczas dania uytkownik moe wybra
inny kana informacyjny, co spowoduje przerwanie wczytywania biecego kanau i zaadowanie nowego. Animowany obrazek suy po prostu do wskazania
uytkownikowi, e w tle wykonywane s jakie zadania.
Powiniene ju mie wystarczajce pojcie o oglnym projekcie aplikacji,
eby przej do szczegw dania i odpowiedzi Ajaksa.

danie klienta
Gdyby nie byo ogranicze bezpieczestwa, danie klienta w aplikacji Czytnik
wiadomoci byoby najprostsz czci do zaimplementowania, poniewa po
prostu wykonywaby danie GET adresu URL bez adnych parametrw. Jednak
nie mona wykona dania Ajaksa bezporednio do zdalnego serwera internetowego, co oznacza, e bdziesz musia stworzy wasny skrypt po stronie
serwera obsugujcy takie dania.

Pobieranie danych z kanaw RSS

107

Wszystkim, czego potrzeba do pobrania danych z kanau informacyjnego,

jest adres URL serwera, ktry go udostpnia. Dlatego te w daniu aplikacji
Czytnik wiadomoci od klienta do skryptu serwera musi zosta przesany adres
URL kanau informacyjnego. Nastpnie serwer obsuy takie danie, pobierze
dane i odele je w odpowiedzi Ajaksa. Kluczowym elementem jest znalezienie
odpowiednich kanaw RSS, co przekada si na poznanie ich adresw URL.
Jeli zaczniesz si baczniej przyglda witrynom internetowym, ktre odwiedzasz, moesz zauway na nich cze kanay rss albo nawet ikonk RSS umieszczone w pobliu gwnego menu lub czy nawigacyjnych. W ten sposb moesz
znale adresy URL kanaw informacyjnych, ktre s wszystkim, czego potrzebujesz do wczytania kanaw RSS za pomoc Ajaksa.
UWAGA
Wikszo informacyjnych witryn internetowych, takich jak witryny z wiadomociami,
udostpnia wiele kanaw o okrelonej tematyce. Na przykad USA Today udostpnia
ponad 30 rnych kanaw sportowych, poczwszy od szkolnego hokeja, do wycigw konnych. eby uzyska do nich dostp, musisz po prostu przewin do dou gwn stron witryny USA Today (http://www.usatoday.com/) i klikn ma pomaraczow
ikonk XML. Taka ikonka jest czsto wykorzystywana zamiast nowszej ikonki RSS.

Odpowied serwera
Strona serwera aplikacji Czytnik wiadomoci jest odpowiedzialna tylko za dostarczenie dokumentu XML zawierajcego informacje z kanau wiadomoci w formacie RSS, ktry jest formatem XML. W przeciwiestwie do niektrych przykadw w tej ksice, w ktrych skrypt PHP przetwarza dane przed zwrceniem
ich w odpowiedzi Ajaksa, aplikacja Czytnik wiadomoci wymaga tylko, eby
skrypt PHP suy jako obejcie ograniczenia uniemoliwiajcego wysanie dania klienta do zewntrznego serwera. Jest to ograniczenie zabezpieczajce
kod JavaScript po stronie klienta przed odwoywaniem si poza domen, z ktrej zosta wczytany.
Z tego powodu w aplikacji Czytnik wiadomoci jest wymagany skrypt po
stronie serwera, ale jego jedynym zadaniem jest pobranie danych z zewntrznego serwera i zwrcenie ich do klienta poprzez odpowied Ajaksa. Skrypt
serwera moesz sobie wyobrazi jako porednika pomidzy kodem JavaScript
po stronie klienta a waciwym serwerem udostpniajcym kanay informacyjne.
Ponownie kluczowym powodem zastosowania takiego podejcia jest fakt, e kod
Ajaksa moe wykonywa dania tylko do Twojego serwera, co stanowi powany problem, kiedy potrzebujesz pobra dane z innego miejsca. Rozwizaniem
jest umoliwienie skryptowi serwera pobrania danych i posuenie si nimi jako
podstaw odpowiedzi na dania Ajaksa.
Zewntrznymi (zdalnymi) serwerami, o ktrych mwi, mog by dowolne
serwery udostpniajce dane w formacie RSS. Jeli troch poszukasz, odkryjesz,
e niemal kada strona internetowa udostpnia dane w tym formacie. Kiedy za

108

Rozdzia 5.

pomoc przegldarki znajdziesz kana informacyjny, zanotuj jego adres URL

wykorzystasz go potem w kodzie podczas wykonywania dania Ajaksa po
kana RSS.

Konwersacja pomidzy klientem a serwerem

Jeli poczysz wszystko, czego dowiedziae si o komunikacji odbywajcej si
w aplikacji Czytnik wiadomoci, otrzymasz przepyw danych taki, jak na rysunku 5.4.

Rysunek 5.4. Aplikacja Czytnik wiadomoci wykonuje danie zawierajce adres

URL kanau informacyjnego i odbiera dane XML zawierajce ten kana
Danymi wysyanymi do serwera jako parametr dania Ajaksa jest adres URL
kanau informacyjnego. Chocia dane te s zawsze w formacie URL, mog mie
rn posta. Na przykad adres URL kanau informacyjnego zwizanego z witryn
internetow Scientific American wyglda tak: http://www.sciam.com/ xml/sciam.xml.
Zauwa, e powyszy adres odnosi si do okrelonego dokumentu XML
sciam.xml. Ma to sens, poniewa kanay RSS s waciwie dokumentami XML,
ale adresy URL kanaw informacyjnych nie zawsze odnosz si do plikw XML.
Na przykad adres URL kanau informacyjnego Wired News wyglda tak:
http://feeds.wired.com/wired/topheadlines.
W powyszym przykadzie URL jest ciek w przeciwiestwie do nazwy
pliku. Wynika z tego, e nie jeste w stanie przewidzie dokadnej postaci adresu
URL kanau komunikacyjnego. Z drugiej strony najczciej wystarczy po prostu
wykorzystanie adresu w takiej postaci, jak udostpnia witryna internetowa.
Kiedy znasz ju adres URL serwera kanau informacyjnego, musisz go
umieci w wikszym adresie URL, ktry bdzie czci dania Ajaksa do skryptu
serwera aplikacji Czytnik wiadomoci. Poniej znajduje si jego przykad:
newsfeeder.php?rssurl=http://www.sciam.com/xml/sciam.xml

Pobieranie danych z kanaw RSS

109

Powyszy kod pokazuje, w jaki sposb adres URL kanau informacyjnego

umieszczany jest jako pojedynczy parametr (rssurl) adresu URL. Cay adres
URL jest wykorzystywany jako podstawa dania Ajaksa, ktre zostanie wysane do skryptu serwera newsfeeder.php. Z kolei skrypt serwera pobierze adres
URL z parametru rssurl i wykorzysta go do wczytania informacji z kanau informacyjnego.
Teraz ju wiesz, e skrypt serwera pobiera adres URL z parametru rssurl
i nastpnie wykorzystuje go do pobrania dokumentu RSS. Dokument ten jest
nastpnie zwracany do kodu JavaScript poprzez odpowied Ajaksa. Poniej
znajduje si przykad 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

Rozdzia 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 wyglda na skomplikowany, ale do naszych celw

moemy go w wikszej czci zignorowa. Pamitaj o tym, e zadaniem aplikacji Czytnik wiadomoci jest wywietlenie listy wiadomoci, ktre s czami do
penej treci. Moesz wycign te dane z dokumentu XML i zignorowa
reszt. eby zobaczy, co mam na myli, popatrz na kod i znajd znacznik <item>.
Teraz spjrz na kod znajdujcy si poniej tego znacznika i znajd znaczniki
<title>, <link> oraz <dc:date>. Kod wyglda tak, jak poniej:
...
<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 wiadomoci, a w znaczniku

<link> cze do niej. Znacznik <dc:date> moe by waciwie traktowany jako
znacznik <date>, poniewa dc jest przedrostkiem przestrzeni nazw, a nie czci
znacznika. Wikszo kanaw RSS do zakodowania daty publikacji zamiast
znacznika <date> uywa <pubDate>, wic podczas przetwarzania danych XML warto
wzi pod uwag oba znaczniki. Naley rwnie obsuy sytuacj, w ktrej
nie ma adnego z tych znacznikw, poniewa data publikacji jest w dokumencie
RSS opcjonalna. Z powyszego omwienia wynika, e moesz bez wikszych
problemw przeglda kod RSS i pobra z niego potrzebne znaczniki wraz z ich
zawartoci, eby stworzy list wiadomoci.
UWAGA
Powd, dla ktrego do zakodowania daty publikacji stosowane s dwa rne znaczniki,
jest zoony i ma zwizek z konkurencyjnymi specyfikacjami i gwatownym rozwojem
formatu RSS. Nie bd tu przedstawia nudnej i zbdnej historii RSS, powiem tylko, e
najprawdopodobniej znacznie czciej spotkasz si ze znacznikiem <pubDate> ni <date>
(<dc:date>). Warto jednak obsugiwa obydwa znaczniki, poniewa <date> jest wykorzystywany przez kilka znanych stron.

Pobieranie danych z kanaw RSS

111

Oczywicie bdziesz rwnie musia pobra nazw kanau i by moe nawet

cze do jego witryny internetowej. Informacje te take znajduj si w znacznikach
<title> i <link>, ale tym razem pod znacznikiem <channel>. Kiedy ponownie
popatrzymy na kod Scientific American, zobaczymy tytu i cze kanau informacyjnego:
...
<channel>
<title>Scientific American - Official RSS Feed</title>
<link>http://www.sciam.com/</link>
....

Podsumowujc, z dokumentu RSS (XML) kanau wiadomoci w aplikacji

Czytnik wiadomoci musz zosta pobrane nastpujce informacje:
tytu kanau informacyjnego (<title> wewntrz <channel>),
cze kanau informacyjnego (<link> wewntrz <channel>),
tytuy wiadomoci (<title> wewntrz <item>),
cza wiadomoci (<link> wewntrz <item>),
daty publikacji wiadomoci (<pubDate> lub <date> wewntrz <item>).
Dwie pierwsze informacje wystpuj w dokumencie kanau informacyjnego
tylko raz, natomiast kolejne mog pojawi si wielokrotnie, jeli jest wiele wiadomoci, a zazwyczaj tak jest. Kada informacja znajduje si w osobnym znaczniku
<item>.
Chocia mgbym powici jeszcze mnstwo czasu na omwienie rnych
elementw formatu danych RSS, nie zrobi tego nie ma po prostu takiej
potrzeby. Wiesz ju wszystko, co trzeba, eby zaj si implementacj aplikacji
Czytnik wiadomoci, wic do dziea!

Implementacja aplikacji Czytnik wiadomoci

Prawdopodobnie jeste przygotowany na stworzenie gwnych czci aplikacji
Czytnik wiadomoci: strony internetowej oraz skryptu serwera. Jest jednak jeszcze
trzecia cz ukadanki arkusz stylw CSS. Nie jest on niezbdny, ale pozwala na nadanie wywietlanym informacjom adnego wygldu. Poniej znajduj si wymagane elementy aplikacji:
strona HTML (newsfeeder.html),
arkusz stylw CSS (newsfeeder.css),
skrypt PHP serwera (newsfeeder.php).

112

Rozdzia 5.

Pamitaj o tym, e w skad tych elementw wchodz take zewntrzne serwery wskazywane przez adresy URL poszczeglnych kanaw informacyjnych.
Serwery te nie s czci aplikacji, to znaczy nie znajduj si na nich adne pliki ani zasoby, ktrymi musisz si zajmowa, ale bez wzgldu na to peni kluczow rol w funkcjonowaniu aplikacji. Dlatego te kiedy w nastpnych punktach bdziesz pracowa nad plikami aplikacji Czytnik wiadomoci, pamitaj, e
s one uzalenione od zdalnych serwerw, z ktrych pobierane s dane.

Strona internetowa aplikacji Czytnik wiadomoci

Strona aplikacji Czytnik wiadomoci (newsfeeder.html) jest niewtpliwie najwaniejsz jej czci, poniewa odpowiada za przetwarzanie danych RSS odesanych przez skrypt serwera i wywietlenie ich w czytelny sposb. Na rysunku 5.5
wida, e strona zawiera list wyboru kanaw wiadomoci, a pod ni element
div zawierajcy cze z tytuem wybranego kanau oraz list czy wiadomoci.

Rysunek 5.5. Strona aplikacji Czytnik wiadomoci skada si z listy wyboru kanau
oraz informacji zwizanych z aktualnie wybranym kanaem
Kod HTML strony aplikacji Czytnik wiadomoci z interfejsem uytkownika
znajduje si w znaczniku <body>, ktry przedstawiono poniej:

Pobieranie danych z kanaw RSS

113

<body onload="loadFeed()">
<div id="ajaxState" style="display:none"></div>
<br />
<div>Wybierz kana wiadomoci:
<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
News</option>
<option value="
http://www.michaelmorrison.com/mambo/index2.php?
option=com_rss&feed=RSS2.0&no_html=1">Blog Michaela
Morrisona</option>
</select>
</div>
<br />
<div id="feedcontent"></div>
</body>

Kiedy pominiesz list wyboru stworzon za pomoc znacznika <select>,

zobaczysz, e kod jest bardzo may. W rzeczywistoci na stronie s tylko dwa
widoczne elementy: lista wyboru (feed) oraz element div (feedcontent) wykorzystywany do wywietlania wiadomoci z dynamicznie wczytanych kanaw informacyjnych.
Fragmentem kodu, ktrego nie powiniene przegapi w powyszej stronie,
jest funkcja obsugi zdarzenia onload odpowiedzialna za wczytanie danych
z pierwszego kanau na licie wyboru za pomoc funkcji loadFeed(). Zanim zajmiemy si t funkcj, warto wskaza, e moesz dostosowa list kanaw w aplikacji Czytnik wiadomoci, uzupeniajc j o wasne kanay i nie zmieniajc adnego
innego fragmentu kodu strony. Inaczej mwic, moesz cakowicie dostosowa
aplikacj, nie patrzc na pozostay kod JavaScript po prostu dodaj nowe
znaczniki <option> lub zmodyfikuj istniejce, umieszczajc w nich tytuy i adresy innych kanaw informacyjnych.
Jeli chcesz zrozumie, w jaki sposb dziaa aplikacja, oczywicie bdziesz
musia zagbi si w kod JavaScript. Poniej znajduje si kod funkcji loadFeed()
odpowiedzialnej za inicjalizacj dania Ajaksa wczytujcego dane kanau informacyjnego:

114

Rozdzia 5.

function loadFeed() {
// Wyczy poprzedni zawarto kanau
document.getElementById("feedcontent").innerHTML =
"<img src='wait.gif' alt='Wczytywanie...' />";
// Wylij danie Ajaksa wczytujce now zawarto kanau
ajaxSendRequest("GET", "newsfeeder.php?rssurl=" +
encodeURIComponent(document.getElementById('feed').options[
document.getElementById('feed').selectedIndex].value),
handleFeedRequest);
}

Pierwsza rzecz, ktr robi funkcja loadFeed(), jest jedn z najbardziej interesujcych funkcjonalnoci aplikacji ot wywietla ona obrazek oczekiwania (wait.gif), ktry pojawia si podczas przetwarzania dania. Obrazek by ju
przedstawiony na rysunku 5.3, ale kiedy zobaczysz go we waciwym kontekcie, tak jak na rysunku 5.6, jego rola bdzie bardziej oczywista.

Rysunek 5.6. Animowany obrazek wczytywania jest wykorzystywany do wskazania

uytkownikowi, e przetwarzane jest danie Ajaksa
Powracajc do kodu funkcji loadFeed(), obrazek wczytywania jest wywietlany
poprzez zmian zawartoci elementu div o identyfikatorze feedcontent i umieszczenie w nim znacznika <img>. Zmiana ta jest wykonywana poprzez ustawienie
waciwoci innerHTML elementu div. Moesz wykorzysta t waciwo do
dynamicznego zmieniania zawartoci elementu na stronie. Wykorzystamy j
ponownie za chwil w kodzie wywietlajcym tytu kanau informacyjnego i wiadomoci w tym samym elemencie div.
W ostatnim fragmencie kodu loadFeed() funkcja wysya danie Ajaksa.
Tworzony jest adres URL sucy do komunikacji ze skryptem PHP serwera,
zawierajcy parametr rssurl, w ktrym znajduje si adres URL kanau informacyjnego. Ustawiana jest tu rwnie funkcja obsugi Ajaksa handleFeedRequest(), wykonujca wikszo zada w aplikacji.
UWAGA
W tym miejscu zdradz Ci may sekret jest to pierwsze miejsce w ksice, w ktrym
do zmiany zawartoci na stronie HTML wykorzystaem waciwo innerHTML. Czuj
si troch winny, poniewa waciwo ta nie zostaa oficjalnie zaakceptowana jako
standard internetowy przez World Wide Web Consortium (W3C), co powoduje, e wykorzystanie jej jest wtpliwe. Jednak jest ona nieprawdopodobnie porczna i wykorzystywana

Pobieranie danych z kanaw RSS

115

w niezliczonych witrynach internetowych przez dowiadczonych programistw, wiec

istnieje mae prawdopodobiestwo, e w najbliszym czasie przestanie by obsugiwana.
Alternatyw jest zmiana zawartoci strony wycznie za pomoc interfejsu API DOM.
Technika ta jest co prawda preferowana, ale w wikszoci przypadkw bardziej skomplikowana. Zdecydowaem si na prostot i dlatego wykorzystaem waciwo innerHTML.
Jeli chcesz zapozna si z dyskusj na temat rnic midzy 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 myli kod znajdujcy si tu pod funkcj
loadFeed(), ktry wczytuje obrazek wait.gif:
var waitImage = new Image();
waitImage.src = "wait.gif";

Zadaniem tego kodu jest to, eby nie byo widoczne opnienie podczas
wczytywania obrazka. Rol obrazka jest wskazanie uytkownikowi, e w tle co
si dzieje. Dlatego te wczytujemy go jeszcze przed wywietleniem strony. Jest
to moliwe dziki temu, e kod wczytujcy obrazek znajduje si poza jakkolwiek funkcj JavaScript, co powoduje, e jest automatycznie wykonywany podczas wczytywania strony.
Powracajc do funkcji handleFeedRequest(), jej zadaniem jest reagowanie
na odpowied Ajaksa pobranie zwrconych danych RSS i wywietlenie wiadomoci z kanau. Poniej znajduje si kod tej funkcji:
function handleFeedRequest() {
if (request.readyState == 4 && request.status == 200) {
// Zapamitaj dane z odpowiedzi XML
var xmlData = request.responseXML;
// Wygeneruj zawarto, zaczynajc od tytuu kanau
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 wiadomoci
feedContent += "<ul>";
var feedItems = channelElem.getElementsByTagName("item");
for (var i = 0; i < feedItems.length; i++) {
var itemTitle =
getText(feedItems[i].getElementsByTagName("title")[0]);
var itemLink = getText(feedItems[i].getElementsByTagName(
"link")[0]);

116

Rozdzia 5.

var itemPubDate =
getText(feedItems[i].getElementsByTagName("pubDate")[0]);
if (itemPubDate == "")
itemPubDate =
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>";
// Wywietl zawarto kanau
document.getElementById("feedcontent").innerHTML = feedContent;
}

}
ajaxUpdateState();

Oczywicie jest tu sporo kodu, ale nie jest on specjalnie trudny. Pamitaj o tym,
e tak naprawd suy on do stworzenia fragmentu HTML. Inaczej mwic,
funkcja tworzy cz strony internetowej, ktra moe zosta umieszczona i wywietlona w elemencie div z zawartoci kanau informacyjnego. Wygenerowany
HTML zawiera tytu kanau informacyjnego bdcy jednoczenie czem do strony, z ktrej pochodzi. Kod HTML zawiera take nienumerowan (wypunktowan) list wiadomoci skadajcych si z tytuu, ktry jest rwnie czem,
oraz daty publikacji. Naley zauway, e wygenerowany kod HTML zawiera
odwoania do klas arkusza stylw CSS, ktre umoliwiaj zastosowanie odpowiedniego stylu dla danej zawartoci.
Pod koniec kodu funkcji handleFeedRequest() moesz zobaczy lini kodu
umieszczajc dynamicznie wygenerowany kod HTML na stronie:
document.getElementById("feedcontent").innerHTML = feedContent;

Chocia niewielka, ta pojedyncza linia robi bardzo duo, biorc pod uwag,
e jest odpowiedzialna za zamian obrazka wczytywanie na sformatowany tytu
kanau informacyjnego oraz poszczeglne wiadomoci.
Wygld strony aplikacji Czytnik wiadomoci jest wynikiem zastosowania arkusza stylw newsfeeder.css doczanego do strony za pomoc poniszego cza:
<link rel="stylesheet" type="text/css" href="newsfeeder.css" />

Arkusz stylw newsfeeder.css znajduje si w tym samym katalogu chap05

co reszta plikw rdowych aplikacji Czytnik wiadomoci. W nastpnym punkcie
omwi go krtko i przedstawi jego wpyw na ostateczny wygld aplikacji.
Pobieranie danych z kanaw RSS

117

Arkusz stylw aplikacji Czytnik wiadomoci

Przyznam si, e niechtnie zamieszczam kod arkusza stylw CSS w ksice
o Ajaksie. Jednak aplikacja Czytnik wiadomoci jest znakomitym przykadem tego,
jak bardzo mona zmieni wygld aplikacji za pomoc stosunkowo niewielkiej
iloci kodu. Jeli mi nie wierzysz, spjrz na rysunek 5.7 przedstawiajcy aplikacj Czytnik wiadomoci bez zastosowania arkusza stylw.

Rysunek 5.7. Po usuniciu arkusza stylw aplikacja Czytnik wiadomoci wyglda ubogo
Porwnaj ten rysunek z rysunkiem 5.5 przedstawiajcym ten sam kana informacyjny, ale z zastosowaniem arkusza stylw. Moim celem jest pokazanie
tego, e chocia CSS ma niewiele wsplnego z Ajaksem, jednak mona za jego
pomoc nada aplikacji bardziej elegancki i profesjonalny wygld.
Poniej znajduje si kod CSS odpowiedzialny za style kanau wiadomoci
w aplikacji Czytnik wiadomoci:
div.feedtitle {
padding-left : 5px;
background-color : #EEEEEE;
font-size : 22px;
font-weight : bold;
}
div.feedtitle a {
color : #666677;

118

Rozdzia 5.

text-decoration : none;
}
div.feedtitle a:hover {
color : #333344;
text-decoration : none;
}

Tytu kanau informacyjnego jest wygenerowanym kodem HTML z atrybutem class o wartoci feedtitle, ktry czy go z grup stylw o tej nazwie.
Jako pierwsze style ustawione s lewostronne wyrwnanie, kolor ta, rozmiar
i grubo czcionki. Nastpnie ustawiany jest kolor tekstu, ktry zmienia si,
kiedy uytkownik najedzie kursorem myszy na tytu (ktry, jak sobie przypominasz, jest czem). Styl text-decoration jest wykorzystywany do nadpisania
domylnego ustawienia HTML powodujcego podkrelanie czy, kiedy uytkownik umieci nad nimi kursor myszy w tym przypadku czytelniej i bardziej profesjonalnie bdzie wyglda zmiana koloru.
Podobne style CSS zastosowane s do poszczeglnych wiadomoci wywietlanych w wypunktowanej licie:
li {
font-size : 18px;
padding-left : 25px;
background : url(newspaper.gif) no-repeat;
list-style : none;
}

Powyszy kod jest odpowiedzialny za wywietlanie adnej maej ikonki gazety obok kadego elementu listy (patrz rysunek 5.5). Kady element jest rwnie czem, dlatego te zastosowana jest podobna koncepcja zmiany koloru po
najechaniu kursorem myszy jak w przypadku tytuu kanau. Poniej znajduje
si kod CSS, ktry 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;
}

Pobieranie danych z kanaw RSS

119

W kocu moesz zauway, e data publikacji kadej wiadomoci jest wywietlana kursyw i w jasnym kolorze, dziki czemu tytu jest lepiej widoczny.
Poniej znajduje si styl CSS odpowiedzialny za wygld daty publikacji poszczeglnych wiadomoci:
span.itemdate {
font-style : italic;
color : #CCCCDD;
}

To ju wszystko na temat arkuszy stylw w aplikacji Czytnik wiadomoci.

Pozosta jeszcze skrypt PHP serwera i aplikacja bdzie gotowa.

Skrypt serwera aplikacji Czytnik wiadomoci

Widziae kiedy sztafet i miejsce, w ktrym jeden biegacz przekazuje paeczk
drugiemu? To prawie to samo, co robi skrypt serwera newsfeeder.php w aplikacji
Czytnik wiadomoci. Po uruchomieniu pobiera dane kanau RSS ze zdalnego
serwera i nastpnie przekazuje je do kodu JavaScript po stronie klienta. Informacja, skd maj zosta pobrane dane, jest przekazywana za pomoc parametru
rssurl umieszczonego w daniu Ajaksa. Poniej znajduje si kod skryptu PHP:
<?php
header('Content-type: text/xml;');
// Zwr dane kanau RSS
echo file_get_contents($_REQUEST['rssurl']);
?>

UWAGA
Pamitaj, e zadaniem tego poredniczcego skryptu serwera jest obejcie ograniczenia
uniemoliwiajcego wykonywanie da Ajaksa do zdalnych serwerw. Gdyby takie
ograniczenie nie istniao, skrypt serwera nie byby potrzebny i klient wykonywaby po
prostu danie bezporednio do serwera udostpniajcego dane RSS. Jednak istnieje
wana przyczyna wprowadzenia takiego ograniczenia: bezpieczestwo! Umoliwienie
skryptom klienta wykonywania da do zewntrznych serwerw byoby zbyt niebezpieczne, dlatego te konieczno stworzenia wasnego skryptu poredniczcego w daniach Ajaksa jest nisk cen, jak trzeba zapaci za bezpieczny internet.

Po ustawieniu nagwka zapewniajcego, e odpowied bdzie traktowana

jako dokument XML, w skrypcie pozostaje ju tylko jedna linijka kodu. Funkcja
file_get_contents() pobiera dane z okrelonego adresu URL, czyli robi dokadnie
to, czego potrzebujesz. Zatem wszystkim, co robi ten skrypt, jest przekazanie
adresu URL do funkcji i nastpnie wysanie jej wyniku do klienta. Kocowym

120

Rozdzia 5.

rezultatem jest sformatowany dokument kanau RSS odsyany do klienta w odpowiedzi Ajaksa.

Testowanie aplikacji Czytnik wiadomoci

Kiedy po raz pierwszy otworzysz stron czytnika wiadomoci, zostanie wczytany
pierwszy kana na licie wyboru, ktrym s akurat najnowsze informacje z Wired
News. Na rysunku 5.8 wida aplikacj, w ktrej wywietlany jest ten kana.

Rysunek 5.8. Po otwarciu aplikacji Czytnik wiadomoci wczytywany jest pierwszy

kana informacyjny na licie wyboru
Po wybraniu innego kanau za pomoc listy wyboru na czas wykonywania
dania Ajaksa wywietlany jest obrazek wczytywanie. Na rysunku 5.9 wida
zmian kanau z Wired News na Engadget.

Rysunek 5.9. Po zmianie kanau wiadomoci wywietlany jest obrazek wczytywanie

wskazujcy, e w tle wykonywane s jakie zadania

Pobieranie danych z kanaw RSS

121

Kanay wiadomoci nie maj specjalnie duego rozmiaru, wic ich wywietlenie nie powinno zaj duo czasu. Wywietlane wiadomoci zastpuj na stronie
obrazek wczytywanie, co wida na rysunku 5.10.

Rysunek 5.10. Po zakoczeniu wczytywania kanau wiadomoci z niego zastpuj

na stronie obrazek wczytywanie
Naley zauway, e wanie stworzye zaskakujco porczny, niewielki
czytnik wiadomoci. Mam na myli to, e po poznaniu sposobu dziaania Ajaksa
w aplikacji Czytnik wiadomoci moesz j wykorzysta do przegldania wiadomoci. Kliknij po prostu element na licie, eby przej na stron penej
wiadomoci. W tym przypadku kliknicie przeniesie Ci na stron wiadomoci
witryny Engadget Web.
Oprcz interesujcych wiadomoci o gadetach strona Engadget Web jest
take wietnym przykadem tego, jak atwo wykorzysta kanay RSS do publikowania informacji z witryny. Popatrz na grny prawy rg strony Engadget
Web, gdzie znajduje si standardowa pomaraczowa ikonka RSS. Kliknij j,
eby uzyska adres URL kanau informacyjnego, ktry moesz doda do Czytnika
wiadomoci.

122

Rozdzia 5.

Przerabianie aplikacji Czytnik wiadomoci

adna aplikacja w tej ksice nie jest tak naprawd ukoczona. Mwic to,
mam na myli, e przykadowe aplikacje s tylko punktem, od ktrego moesz
zacz eksperymentowanie z Ajaksem. Czytnik wiadomoci nie stanowi wyjtku i w rzeczywistoci jest znakomitym przykadem aplikacji, ktr moesz dostosowa do wasnych potrzeb.
By moe najbardziej oczywistym sposobem przerobienia aplikacji Czytnik
wiadomoci jest zmiana samych kanaw wiadomoci. Jest to take najprostsza
zmiana, poniewa wymaga tylko modyfikacji znacznikw <option> na stronie
zmiany tytuw i wartoci, tak eby odpowiaday innym kanaom. Pamitaj
o tym, e moesz doda dowoln liczb znacznikw <option>, tworzc list wyboru
z wieloma rnymi kanaami wiadomoci. Musisz tylko umieci nazw kanau
pomidzy znacznikami <option> i </option>, a nastpnie przypisa adres URL
do atrybutu value.
Moesz rwnie zdecydowa, e moliwo wyboru kanaw wiadomoci 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 umieci go we wasnej witrynie. Bdzie si to wiza
gwnie z przekopiowaniem kodu z sekcji head oraz z przeniesieniem funkcji
obsugi zdarzenia onload znajdujcej si w znaczniku <body>, ktra wywouje
funkcj loadFeed(). Musisz take stworzy element div o identyfikatorze feedcontent. Na kocu bdziesz jeszcze musia przerobi funkcj loadFeed(), tak
eby wykorzystywaa wybrany przez Ciebie adres URL kanau wiadomoci zamiast
pobierania go z listy wyboru.
Jeli zdecydujesz si na osadzenie kanau informacyjnego na stronie, na ktrej
jest ju jaka zawarto, prawdopodobnie bdziesz chcia ograniczy liczb wywietlanych wiadomoci. Na przykad moesz chcie wywietla tylko pi pierwszych wiadomoci. eby to zrobi, musisz zmieni ptl for w funkcji handleFeedRequest() tak, jak poniej:
for (var i = 0; (i < feedItems.length) && (i < numItems);i++) {

W powyszym kodzie zmienna numItems wskazuje, ile wiadomoci ma zosta

wywietlonych. Moesz uy zmiennej lub na sztywno zakodowa t liczb:
for (var i = 0; (i < feedItems.length) && (i < 10);i++) {

W powyszym przykadzie liczba wywietlonych wiadomoci jest ograniczona

do dziesiciu. Ptla for w dalszym cigu sprawdza dugo tablicy feedItems, poniewa moe si zdarzy, e liczba wiadomoci w kanale bdzie mniejsza ni dziesi, a w takim przypadku zostan wywietlone wszystkie dostpne wiadomoci.

Pobieranie danych z kanaw RSS

123

Ostatnim zadaniem, ktre moesz wzi pod uwag, kiedy masz ju wiedz
na temat RSS, jest stworzenie wasnego kanau. Jeli masz bloga lub stron internetow z regularnie zmienian zawartoci, udostpnienie uytkownikom
kanau informacyjnego na Twojej stronie jest blisk przyszoci. Mam nadziej, e dowiedziae si w tym rozdziale wystarczajco duo na temat formatu
RSS, eby sprbowa stworzy wasne dokumenty RSS. Tak naprawd najlepszym rozwizaniem jest stworzenie skryptu, ktry automatycznie bdzie konwertowa zawarto HTML na format RSS, dziki czemu Twoja witryna bdzie
automatycznie publikowana w postaci kanaw wiadomoci. Sposb realizacji
tego rozwizania wykracza nieco poza zakres tego rozdziau, ale masz ju dobre
narzdzie do testowania swoich kanaw wiadomoci, kiedy ju je stworzysz.

Podsumowanie
W tym rozdziale wprowadziem Ci w interesujcy obszar zarzdzania zawartoci internetow znany jako kanay wiadomoci, ktry wykorzystuje standardowy, oparty na XML-u, format RSS (ang. Really Simple Syndication). Za pomoc RSS mona pobra skrt zawartoci witryny internetowej bez potrzeby
jej odwiedzania. Co wicej, mona pobra zawarto z innej witryny i udostpni j na wasnych stronach. Jest to dobra metoda aktualizowania wasnych
stron bez koniecznoci wprowadzania zmian we wasnej zawartoci. Stworzona
przez Ciebie aplikacja Czytnik wiadomoci pozwolia zademonstrowa, w jaki
sposb za pomoc Ajaksa mona dynamicznie wczytywa dane RSS i czytelnie
prezentowa je na stronie, dziki czemu moliwe jest czytanie i nawigowanie
do wiadomoci. Aplikacja ta zawiera podstawowy kod, dziki ktremu moesz
bez wikszego wysiku umieci kanay wiadomoci RSS na wasnych stronach.

124

Rozdzia 5.