Ajax. Niezbędnik projektanta dynamicznych aplikacji

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!
• Jak wykorzystaæ technologiê AJAX?
• Jak wykonaæ najczêœciej spotykane zadania?
• Jak zwiêkszyæ interaktywnoœæ serwisów WWW?
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!
• Zalety technologii AJAX
• Przyk³adowe rozwi¹zania, korzystaj¹ce z AJAX
• Sposoby u¿ywania formatu XML
• Zasady funkcjonowania technologii AJAX
• Tworzenie interaktywnych formularzy
• Sposoby wykorzystania kana³ów RSS
• Dynamiczne pobieranie danych z innych serwisów
Wydawnictwo Helion • Sposób na efektown¹ galeriê
ul. Koœciuszki 1c
• Tworzenie okien informacyjnych
44-100 Gliwice
• Przewidywanie treœci wprowadzanych przez u¿ytkownika
tel. 032 230 98 63
e-mail: helion@helion.pl • Metody i w³aœciwoœci obiektu XMLHttpRequest
• Przysz³oœæ technologii AJAX
Twoje strony te¿ mog¹ byæ interaktywne!

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

Spis treści 5

Część II Tworzenie prawdziwych aplikacji ajaksowych ........53
Rozdział 3. Dynamiczne ładowanie danych:
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 Ajax. Niezbędnik projektanta aplikacji plug and play

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

Spis treści 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.

newsfeeder.html — strona główna,
newsfeeder.php — skrypt serwera do pobierania danych z kanałów
informacyjnych,
newsfeeder.css — arkusz stylów do formatowania wiadomości,
ajaxkit.js — podstawowe funkcje Ajaksa w bibliotece ajaksowej,
domkit.js — funkcje do obsługi DOM w bibliotece ajaksowej,
newspaper.gif — ikonka gazety wyświetlana obok każdej wiadomości,
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 Rozdział 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

Pobieranie danych z kanałów RSS 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 Rozdział 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.


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 Rozdział 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


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&
articleID=6FD96438-E7F2-99DF-3C8A12ACF6BB25D8&
ref=rss</link>
<guid>http://www.sciam.com/article.cfm?chanID=sa003&
ref=rss</guid>
<author>JR Minkel <editors@sciam.com></author>
<dc:date>2007-01-29T17:00:00-05:00</dc:date>
</item>
<item>
<title>News: Did Honets Abe Have Nerves of Glass?</title>
articleID=6FD6E124-E7F2-99DF-3E0EDA7A34E03A06&
ref=rss</link>
<guid>http://www.sciam.com/article.cfm?chanID=sa003&
articleID=6FD6E124-E7F2-99DF-3E0EDA7A34E03A06&
ref=rss</guid>

110 Rozdział 5.

<author>Nikhil Swaminathal <editors@sciam.com></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>
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.


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:

tytuł kanału informacyjnego (<title> wewnątrz <channel>),
łącze kanału informacyjnego (<link> wewnątrz <channel>),
tytuły wiadomości (<title> wewnątrz <item>),
łącza wiadomości (<link> wewnątrz <item>),
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:

strona HTML (newsfeeder.html),
arkusz stylów CSS (newsfeeder.css),
skrypt PHP serwera (newsfeeder.php).

112 Rozdział 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:


<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
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 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 Rozdział 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


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 =
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>";

// 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.


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 Rozdział 5.

text-decoration : none;
}

div.feedtitle a:hover {
color : #333344;
}

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;
}

a:visited {
color : #9999AA;
}

a:hover, a:active {
background : #EEEEEE;
}


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 Rozdział 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


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 Rozdział 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.


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 Rozdział 5.

Ajax. Niezbędnik projektanta dynamicznych aplikacji

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (14)

Similar to Ajax. Niezbędnik projektanta dynamicznych aplikacji

Similar to Ajax. Niezbędnik projektanta dynamicznych aplikacji (20)

More from Wydawnictwo Helion

More from Wydawnictwo Helion (20)

Ajax. Niezbędnik projektanta dynamicznych aplikacji