Ajax. Implementacje

356 Pages·2008·7.549 MB·Polish

by  Shelley Powers

Tytuł oryginału: Adding Ajax
Tłumaczenie: Tomasz Walczak
ISBN: 978-83-246-5914-2
© Helion S.A. 2008
Authorized translation of the English edition of Adding Ajax © 2007 Shelley Powers.
This translation is published and sold by permission of O’Reilly Media, Inc., the owner of all
rights to publish and sell the same.
All rights reserved. No part of this book may be reproduced or transmitted in any form or
by any means, electronic or mechanical, including photocopying, recording or by any
information storage retrieval system, without permission from the Publisher.
Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu
niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą
kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym
lub innym powoduje naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź
towarowymi ich właścicieli.
Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce
informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich
wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub
autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności
za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. [phone]
e-mail: [email protected]
WWW: http://helion.pl (księgarnia internetowa, katalog książek)
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie?ajaxim_ebook
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Pliki z przykładami omawianymi w książce można znaleźć pod adresem:
ftp://ftp.helion.pl/przyklady/ajaxim.zip
Printed in Poland.
• Poleć książkę na Facebook.com • Księgarnia internetowa
• Kup w wersji papierowej • Lubię to! » Nasza społeczność
• Oceń książkę
Spis treści
Przedmowa ....................................................................................................................7
1. Przygotowania do wdrażania Ajaksa .........................................................................15
Technologie ajaksowe 17
Początkowe porządkowanie 20
Przekształcanie tabel na układ strony oparty na CSS 25
Ciąg dalszy zmian — element po elemencie 29
Radzenie sobie ze specyfiką przeglądarek 30
Zrozumienie potrzeb użytkowników 33
Projektowanie szkieletu witryny 36
Stopniowe usprawnianie a remont generalny 39
2. Elementy Ajaksa ..........................................................................................................41
Aplikacje sieciowe 41
Przygotowywanie obiektu do użytku 48
Przygotowywanie i wysyłanie żądania 50
Przetwarzanie ajaksowych odpowiedzi 56
Punkty końcowe, zabezpieczenia języka JavaScript i widgety 71
Bezpieczeństwo 74
Pierwszy rzut oka na wydajność 75
Ostatnie słowo o asynchroniczności i synchroniczności 76
3. Narzędzia i pojęcia związane z Ajaksem ...................................................................79
Prototype 80
script.aculo.us 87
Rico 90
Dojo 92
Inne biblioteki 99
3
4. Efekty interaktywne ..................................................................................................103
Obsługa zdarzeń zgodna z Ajaksem 104
Informacje w trybie JIT 110
Podgląd na stronie 121
Zanikanie kolorów w wyniku sukcesu lub niepowodzenia 126
5. Przestrzeń — ostateczna granica .............................................................................135
Przestrzeń w poziomie — accordion 136
Strony z zakładkami 159
Nakładanie 170
6. Dane dynamiczne .......................................................................................................177
Edycja w miejscu 178
Edycja w miejscu — wydajność, bezpieczeństwo i dostępność 188
Wyróżnianie zmian 191
Jeszcze raz o dostępności aktualizacji na stronie 202
Walidacja na żywo 205
Wydajność i dwuetapowe zatwierdzanie 208
Efekty bibliotek zewnętrznych służące do obsługi danych 211
7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych .............................215
Wyzwanie — stronicowana zawartość 216
Zapamiętywanie miejsc 235
Trwałość w starym i nowym stylu — ramię w ramię 242
Nowy wygląd strony 249
Analiza końcowa 252
8. Dodawanie zaawansowanych efektów wizualnych ...............................................253
Zaawansowane sztuczki z CSS 254
Skalowalna grafika wektorowa 264
Krótki przegląd języka SVG 269
Mikser — SVG i Ajax 273
Przyszłość grafiki 280
9. Witryny typu mashup ................................................................................................281
Wyświetlanie map za pomocą Google’a 282
Druga usługa — Flickr 288
Dodawanie usług Technorati do witryny mashup 299
Modyfikowanie witryny mashup 307
Nowa wersja klientów 316
Podsumowanie informacji o witrynach mashup 325
4 | Spis treści
10. Skalowanie, infrastruktura i tworzenie witryn od podstaw ...................................327
Platformy — ścisłe czy luźne powiązanie 328
Usługi sieciowe — zasoby i bezpieczeństwo 329
Biblioteki Ajaksa — własne czy zewnętrzne? 331
Projektowanie aplikacji ajaksowych od podstaw 332
Rekomendowane platformy 337
A więc naprzód z Ajaksem 342
Skorowidz ..................................................................................................................343
Spis treści | 5
6 | Spis treści
Przedmowa
Ajax — po części rewolucja, po części ewolucja, a zdaniem niektórych tylko slogan reklamowy.
Ajax to ogólne pojęcie, które obejmuje szereg technologii:
• języki oparte na znacznikach, takie jak HTML, XHTML, XML i SVG;
• język JavaScript;
• języki CSS i XSLT;
• w końcu — choć nie są najmniej istotne — obiekty przeglądarek, włączając w to obiekt
canvas oraz obiekt, który stanowi istotę Ajaksa: XMLHttpRequest.
Choć wzrost zainteresowania Ajaksem miał miejsce stosunkowo niedawno, większość związa-
nych z nim technologii jest dostępna od około 10 lat. Z czego wynika ich obecna popularność?
Ajax to coś więcej niż zbiór technologii. Jego zastosowanie wiąże się z rozwojem stron i apli-
kacji internetowych w nowym kierunku. Programiści planowali to już wcześniej, jednak nig-
dy nie mieli narzędzi umożliwiających tworzenie takich aplikacji. Obecnie specyfikacje, które
10 lat temu były zupełną nowością, osiągają dojrzałość, a co ważniejsze, są dobrze obsługiwa-
ne w przeglądarkach internetowych. Wciąż pojawiają się także nowe specyfikacje, a producen-
ci narzędzi współpracują ze sobą w większym stopniu niż kilka lat wcześniej.
Wiele lat temu, kiedy projektanci stron zaczęli po raz pierwszy nieśmiało wspominać o do-
dawaniu interaktywności do stron internetowych, programiści byli ograniczeni przez działa-
nie przeglądarek, które obsługiwały zupełnie odmienne modele, a czasami nawet inne języki
skryptowe. Stosowanie kaskadowych arkuszy stylów (ang. Cascading Style Sheets — CSS) jako
uniwersalnej techniki dodawania warstwy prezentacji strony było utrudnione z powodu róż-
nej interpretacji stylów przez poszczególne przeglądarki, nie wspominając już o stosowa-
niu własnych rozszerzeń.
Obecnie obsługa arkuszy CSS jest powszechna, a choć wciąż występują pewne „specyficzne”
efekty w niektórych systemach, większość przeglądarek obsługuje niemal wszystkie specyfika-
cje, a więcej możliwości jest otwartych, niż zamkniętych. W przypadku skryptów prace orga-
nizacji standaryzacyjnej ECMA doprowadziły do powstania języka ECMAScript. Jest to wer-
sja języka JavaScript powszechnie przyjęta przez producentów i obsługiwana we wszystkich
najważniejszych narzędziach — zarówno internetowych, jak i innych.
Języki oparte na znacznikach stały się dużo bardziej złożone i następuje odejście od chaotycz-
nego HTML do bardziej zdyscyplinowanego XHTML. Powstają także nowe aplikacje języka
XML, na przykład skalowalna grafika wektorowa (ang. Scalable Vector Graphics — SVG), która
7
umożliwia dodawanie interaktywnej grafiki niezależnej od wtyczek czy obiektów zewnętrz-
nych. Wiąże się z tym wprowadzenie obiektów canvas, które są niezależne od stosowanego
języka znaczników. Ich rozwój odbywa się w ramach prac nad językiem HTML5. Ten język
to etap pośredni pomiędzy starszymi wersjami HTML a bardziej rygorystycznym językiem
XHTML.
Wciąż jednak nie zrezygnowano ze starych, niestandardowych obiektów, jednak nie są one im-
plementowane wyłącznie w kilku przeglądarkach, raczej stają się one powszechnie dostępne.
Jednym z takich obiektów jest XMLHttpRequest, który umożliwia wywoływanie usług sie-
ciowych bezpośrednio z poziomu stron, a następnie dynamiczne przetwarzanie wyników
bez konieczności ponownego ładowania strony.
Co to oznacza dla programistów i użytkowników? Możliwość przeczytania artykułu, kliknię-
cia go i modyfikowania w jednym miejscu — na tej samej stronie. Można także usuwać wiersze
z tabeli, a operacja usuwania odbędzie się natychmiast. To samo dotyczy aktualizacji danych.
Można też kategoryzować zdjęcia bez konieczności ponownego wczytywania strony i fotogra-
fii. Można też rozwinąć zdjęcie, po prostu klikając jego miniaturę.
Również stosowanie formularzy znacznie się zmieniło. Można dokonać wyboru na jednej liście,
a spowoduje to automatyczne zapełnienie innej listy. Można sortować dane w tabeli, używa-
jąc przeciągania, zwężać pola, aby zrobić więcej miejsca, a także klikać zakładki w celu wy-
świetlenia fragmentów dużych formularzy lub innych informacji, a wszystko to bez odświe-
żania strony.
Oczywiście znaczenie pojęcia „strona” zmieniło się, a nowe podejście ma dobre i złe cechy.
Trudno jest określić, jak oszacować koszt reklamy za „wyświetlenie strony”, jeśli można wczy-
tać setki stron bez żadnej operacji odświeżania. Silniki wyszukujące mają problemy z ob-
sługą dynamicznie generowanych odnośników, podobnie zresztą jak programy odczytujące
tekst z ekranu. W sytuacji kiedy obsługa skryptów jest wyłączona lub w ogóle jej nie ma, Ajax
nie będzie działał, ponieważ zależy od języka JavaScript.
W tym miejscu na scenę wchodzi stopniowe usprawnianie (ang. progressive enhancement).
Termin ten, ukuty przez Stevena Champeona, określa podejście, zgodnie z którym efekty
Ajaksa należy dodawać jako usprawnienia istniejących technologii sieciowych, a nie jako za-
stępnik. Inaczej mówiąc, wciąż należy tworzyć bardziej tradycyjne aplikacje sieciowe, które wy-
korzystują przesyłanie formularzy w celu aktualizacji tabel, ale następnie można usprawniać
je, dodając na przykład możliwość aktualizacji tabeli po zmianie zawartości pola bez ko-
nieczności przesyłania formularza.
Jeśli obsługa skryptów jest wyłączona, stronę z zakładkami można wyświetlać jako szereg pio-
nowych sekcji. Dane wciąż będą dostępne, jednak uporządkowane w inny sposób. W pokazie
slajdów można wyświetlać obrazy, kiedy zażąda tego albo aplikacja w języku PHP znajdująca
się na komputerze z systemem Unix, albo wywołanie języka JavaScript z przeglądarki Firefox,
Safari czy Internet Explorer.
Dzięki zastosowaniu stopniowego usprawniania nie jest istotne, czy skrypty są włączone, czy
nie, ponieważ funkcjonalność jest dostępna zawsze, tylko w odmienny sposób. Jednocześnie
liczne udogodnienia, które Ajax pozwala dodać do aplikacji sieciowych, wciąż można udo-
stępniać około 80 procentom osób, które używają odpowiednich przeglądarek z włączoną ob-
sługą skryptów.
Co jest z tego najlepsze dla Ciebie? Jesteś już w połowie drogi.
8 | Przedmowa
Odbiorcy
Jednym z głównych założeń co do Czytelników książki dotyczącej dodawania Ajaksa jest to,
że są oni projektantami stron, którzy chcą przenieść tradycyjne aplikacje sieciowe na wyższy
poziom, dodając efekty Ajaksa. Możliwe, że używasz już formularzy sieciowych, stron gene-
rowanych po stronie serwera i statycznej zawartości, a przynajmniej wiesz, jak działają trady-
cyjne aplikacje sieciowe. Masz szczęście — „część biznesowa” aplikacji jest już gotowa. Teraz
pora przenieść stronę na następny poziom.
Najpierw jednak warto zapoznać się z dokładniejszymi założeniami co do osób, które są od-
biorcami tej książki. Została ona napisana dla programistów, którzy:
• mają pewne doświadczenie z opartymi na znacznikach językami tworzenia stron interne-
towych, takimi jak HTML czy XHTML;
• mają podstawową wiedzę na temat XML i zdają sobie sprawę, że dokumenty w tym języ-
ku muszą być zarówno prawidłowe, jak i poprawnie skonstruowane;
• znają relacyjne bazy danych i używali ich albo w środowisku produkcyjnym, albo po pro-
stu z ciekawości;
• stosowali język CSS i potrafią odczytać większość arkuszy CSS;
• używali języka JavaScript i znają go dość dobrze, a także wiedzą, jak działają obiektowe
mechanizmy tego języka;
• są bardziej zainteresowani usprawnianiem istniejących aplikacji niż tworzeniem tak zwa-
nych bogatych aplikacji internetowych (ang. Rich Internet Applications — RIA).
Nie zakładam, że jesteś ekspertem w jednej z wymienionych wcześniej technologii, a jedynie
że masz pewne doświadczenie w korzystaniu z nich i z drobną pomocą (albo w postaci ma-
teriałów z internetu, albo innej książki, specyficznej dla danej technologii) potrafisz zrozumieć
działanie każdej aplikacji.
Ostatni element na liście wymagań jest najważniejszy. Ta książka nie obejmuje zagadnień nie-
zbędnych do utworzenia zastępnika programu PowerPoint w postaci strony internetowej lub
tworzenia gier sieciowych albo innych rozwiązań opartych całkowicie na skryptach.
Ta książka dotyczy wyłącznie rozbudowy istniejących aplikacji przez dodawanie do nich efek-
tów Ajaksa. Nie opisuje ona zastępowania istniejących aplikacji ani tworzenia od podstaw
w pełni ajaksowych rozwiązań. Wydawnictwo Helion ma w ofercie inne ciekawe książki, bardziej
odpowiednie dla osób zainteresowanych pracą nad następnym arkuszem kalkulacyjnym opar-
tym na przeglądarce WWW. Ta książka ma jedynie pomóc w tworzeniu bardziej żywych,
zajmujących, interesujących i w dużo większym stopniu interaktywnych stron internetowych.
Zawartość książki
Tej książki nie trzeba czytać od początku do końca. Każdy jej rozdział jest tak niezależny, jak
to możliwe. Mimo to występują pewne odwołania do wcześniejszych rozdziałów, zwłaszcza
jeśli chodzi o stosowanie biblioteki Adding Ajax, której rozwój jest opisany w książce. Cały
materiał jest dostępny w kodzie źródłowym, który można pobrać z internetu. Zalecam zapo-
znanie się z rozdziałami 1. i 2. przed przejściem do następnych części.
Przedmowa | 9
Poniżej znajduje się krótki przegląd wszystkich rozdziałów.
Rozdział 1. „Przygotowania do wdrażania Ajaksa”
Ten rozdział zawiera przegląd technologii Ajaksa, jednak przedstawia także znaczenie
przygotowania strategii modyfikowania witryny przed przystąpieniem do pisania kodu.
Obejmuje wagę określenia użytkowników oraz zawiera wskazówki dotyczące tego zada-
nia. Opisuje także znaczenie standardów oraz uzyskania przed rozpoczęciem dodawania
efektów Ajaksa pewności, że strona internetowa jest prawidłowa i stabilna. Po przeczyta-
niu tego rozdziału będziesz mógł rozpocząć dodawanie wszystkich efektów Ajaksa opisa-
nych w następnych rozdziałach.
Rozdział 2. „Elementy Ajaksa”
Ten rozdział przedstawia szczegółowy opis istoty Ajaksa — korzystanie z obiektów XML-
HttpRequest. Przedstawiono tu, jak zażądać usług sieciowych przy użyciu żądań GET
i POST, a także jak używać dynamicznych skryptów do pobierania danych z innych do-
men. Rozdział opisuje różne formaty danych: HTML, XML, a także nowszą notację JSON
(ang. JavaScript Object Notation). Omówiona jest także asynchroniczna natura Ajaksa, jak
również pewne zagadnienia i problemy związane z wydajnością.
Rozdział 3. „Narzędzia i pojęcia związane z Ajaksem”
Ten rozdział przedstawia kilka z najważniejszych bibliotek Ajaksa, między innymi: Proto-
type, script.aculo.us, Rico i MochiKit. Choć większość przykładów przedstawionych w tej
książce nie używa bibliotek zewnętrznych, w każdym rozdziale znajduje się fragment ko-
du korzystający z nich, dzięki czemu możesz zaznajomić się z danym efektem, nauczyć
się rozszerzać biblioteki i tworzyć własne, a także poznasz problemy związane z tworze-
niem rozwiązań przy użyciu wielu bibliotek Ajaksa.
Rozdział 4. „Efekty interaktywne”
Ten rozdział dotyczy interaktywności, jaką zapewnia Ajax, włączając w to używanie zda-
rzeń i metod ich obsługi w różnych przeglądarkach, a także techniki działające w przypad-
ku stosowania kilku bibliotek. W tym rozdziale znajdują się także informacje o tworzeniu
podpowiedzi, pobieraniu danych z systemu pomocy z zewnętrznych źródeł, przygotowy-
waniu efektu „zanikania” w celu sygnalizowania zmian, podglądzie w trybie „na żywo”
i łączeniu tej ostatniej techniki z aktualizacjami.
Rozdział 5. „Przestrzeń — ostateczna granica”
Ten rozdział opisuje stronę internetową jako przestrzeń i przedstawia trzy popularne po-
dejścia do zarządzania nią. Jedno z nich polega na stosowaniu kontrolki accordion, w któ-
rej przestrzeń jest zwijana w pionie. Inne to strona z zakładkami, gdzie strony są wyświe-
tlane po kliknięciu odpowiednich zakładek. Trzecia technika to nakładanie, kiedy to strona
jest zakrywana wiadomościami, zdjęciami lub innymi materiałami. Ten rozdział opisu-
je także, jak przygotować kompletne „efekty”, dzięki czemu można korzystać z efektów
z jednej biblioteki w wielu aplikacjach i na licznych stronach. Dowiesz się także, jak moż-
na zintegrować efekty z żądaniami usług sieciowych.
Rozdział 6. „Dane dynamiczne”
W tym rozdziale poznasz wiele szczegółów technicznych. Dotyczy on aktualizowania da-
nych, włączając w to dodawanie nowych informacji, usuwanie ich i wprowadzanie zmian,
a wszystko to na jednej stronie. Ten rozdział dotyczy głównie usprawniania istniejących
aplikacji sieciowych, dlatego aktualizowanie przy użyciu formularzy i aktualizowanie za
10 | Przedmowa