Download to read offline
- 1 / 26
- 2 / 26
- 3 / 26
- 4 / 26
- 5 / 26
- 6 / 26
- 7 / 26
- 8 / 26
- 9 / 26
- 10 / 26
- 11 / 26
- 12 / 26
- 13 / 26
- 14 / 26
- 15 / 26
- 16 / 26
- 17 / 26
![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
Pobieranie danych z kanałów RSS 115](/proxy?url=https%3A%2F%2Fimage.slidesharecdn.com%2Fajax-niezbdnik-projektanta-dynamicznych-aplikacji4934%2F85%2FAjax-Niezbednik-projektanta-dynamicznych-aplikacji-17-320.jpg)
- 18 / 26
![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.](/proxy?url=https%3A%2F%2Fimage.slidesharecdn.com%2Fajax-niezbdnik-projektanta-dynamicznych-aplikacji4934%2F85%2FAjax-Niezbednik-projektanta-dynamicznych-aplikacji-18-320.jpg)
- 19 / 26
![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.
Pobieranie danych z kanałów RSS 117](/proxy?url=https%3A%2F%2Fimage.slidesharecdn.com%2Fajax-niezbdnik-projektanta-dynamicznych-aplikacji4934%2F85%2FAjax-Niezbednik-projektanta-dynamicznych-aplikacji-19-320.jpg)
- 20 / 26
![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.](/proxy?url=https%3A%2F%2Fimage.slidesharecdn.com%2Fajax-niezbdnik-projektanta-dynamicznych-aplikacji4934%2F85%2FAjax-Niezbednik-projektanta-dynamicznych-aplikacji-22-320.jpg)
Skip to main content
Uploaded byWydawnictwo Helion
Ajax. Niezbędnik projektanta dynamicznych aplikacji
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 * Sposób na efektowną galerię * Tworzenie okien informacyjnych * Przewidywanie treści wprowadzanych przez użytkownika * Metody i właściwości obiektu XMLHttpRequest * Przyszłość technologii AJAX Twoje strony też mogą być interaktywne!
