Head First Ajax Edycja polska.pdf

(3520 KB) Pobierz
Head First Ajax.
Edycja polska
Autor: Rebecca Riordan
T³umaczenie: Marcin Rogó¿
ISBN: 978-83-246-1778-4
Tytu³ orygina³u:
Head First Ajax
Format: 200230, stron: 516
Technologia AJAX (skrót od ang. Asynchronous JavaScript and XML) tchnê³a nowe
¿ycie w strony internetowe. Sprawi³a, ¿e sta³y siê one interaktywne, przyjazne w u¿yciu
oraz dynamiczne. Dziêki niej aplikacje internetowe coraz bardziej przypominaj¹ te
standardowe, znane z codziennej pracy. Jeœli jednak ogrom mo¿liwoœci tej technologii
wydaje Ci siê trudny do opanowania – jesteœ w b³êdzie! Przekonaj siê, ¿e z dobrym
podrêcznikiem nic nie bywa trudne! „Head First Ajax. Edycja polska” to kolejny przyjazny
podrêcznik z ciesz¹cej siê wielkim uznaniem Czytelników serii Head First. Znajdziesz
tu nowatorskie i skuteczne techniki nauki, a przy tym du¿o praktycznych informacji
i humoru. Trudno wyobraziæ sobie lepsze warunki do zdobywania nowej wiedzy. Dziêki
tej ksi¹¿ce dowiesz siê, jak myœleæ „po ajaksowemu”, obs³ugiwaæ zdarzenia, okie³znaæ
asynchronicznoœæ oraz wykorzystaæ model DOM i format JSON. Te oraz wiele innych
ciekawych wiadomoœci, dziêki którym szybko opanujesz tajniki AJAX-a, znajdziesz
w³aœnie w tym wyj¹tkowym podrêczniku.
• Przeznaczenie technologii AJAX
• Skutki asynchronicznoœci ¿¹dañ w AJAX-ie
• Obs³uga zdarzeñ w jêzyku JavaScript
• Wykorzystanie wielu procedur dla jednego zdarzenia
• Operacje na drzewie DOM
• Zastosowanie frameworków oraz innych bibliotek
• U¿ycie formatu XML w ¿¹daniach i odpowiedziach
• Format JSON
• Tworzenie formularzy i ich walidacja
• ¯¹dania POST
Odkryj, jak skuteczny i przyjazny mo¿e byæ podrêcznik do nauki AJAX-a!
Spis
treści
Spis treści (skrócony)
Wprowadzenie
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
A
B
Ajax — zastosowanie.
Aplikacje internetowe dla nowego pokolenia
Projektowanie aplikacji w metodologii Ajax.
Myślenie „po ajaksowemu”
Zdarzenia w JavaScripcie.
Reagowanie na użytkowników
Kilka procedur obsługi zdarzeń.
Dwoje to już towarzystwo
Aplikacje asynchroniczne.
To jak odnawianie prawa jazdy
Obiektowy model dokumentu.
Leśnictwo na stronie WWW
Manipulowanie DOM-em.
Moje życzenie jest dla ciebie rozkazem
Frameworki i zestawy narzędzi.
Nie ufaj nikomu
Żądania i odpowiedzi XML.
Więcej niż mogą wyrazić słowa
JSON.
Syn JavaScriptu
Formularze i walidacja.
Powiedz to, co chciałeś powiedzieć
Żądania POST.
Paranoja to twoja przyjaciółka
Pozostałości.
Pięć najważniejszych tematów (których nie omówiliśmy)
Funkcje narzędziowe.
Po prostu daj mi kod
21
33
73
123
169
201
255
307
351
365
399
427
465
491
503
Spis treści (z prawdziwego zdarzenia)
W
Wprowadzenie
Skierujmy mózg na Ajaksa.
Ty
starasz się czegoś
nauczyć,
natomiast
mózg
stara ci się
wyświadczyć przysługę, pilnując, aby to, czego się uczysz, nie zostało
zapamiętane.
Mózg myśli
sobie: „Lepiej zostawię miejsce na bardziej istotne sprawy, na przykład których zwierząt unikać, czy
też dlaczego uprawianie snowboardingu nago jest złym pomysłem”. A więc
jak
można zmylić mózg,
aby myślał, że twoje życie zależy od znajomości Ajaksa?
Dla kogo jest ta książka?
Wiemy, co myślisz
Wiemy, co myśli twój mózg
Metapoznanie: myślenie o myśleniu
Oto co zrobiliśmy
Oto co TY możesz zrobić, aby skłonić swój mózg do posłuszeństwa
Przeczytaj
Zespół korektorów merytorycznych
Podziękowania
22
23
23
25
26
27
28
30
31
7
Spis
treści
Ajax — zastosowanie
1
Aplikacje internetowe dla nowego pokolenia
Zmęczony czekaniem na przeładowanie strony?
Sfrustrowany pokracznymi
interfejsami aplikacji internetowych? Czas, aby zaczęły one przypominać przyjemne w użyciu
aplikacje desktopowe. Jak to zrobić? Za pomocą
Ajaksa
— twojej przepustki do tworzenia
bardziej interaktywnych, sprawniej reagujących
i
łatwiejszych w użyciu aplikacji internetowych.
Pomiń drzemkę, musisz dopieścić swoje witryny. Czas na zawsze pozbyć się niepotrzebnych
i długotrwałych przeładowań strony.
Strony WWW: podejście tradycyjne
Strony WWW: podejście nowoczesne
Kiedy możemy mówić o stronie w metodologii Ajax?
Rockandrollowe pamiątki Roba
Ajax i rock and roll w 5 krokach
Etap 1. Modyfikujemy kod XHTML
Etap 2. Inicjalizacja JavaScriptu
Etap 3. Tworzenie obiektu żądania
Etap 4. Pobieranie informacji o przedmiocie
Napiszmy kod żądający informacji o przedmiocie
Zanim rozpoczniesz pracę z obiektem żądania,
upewnij się, że on istnieje
Obiekt żądania jest po prostu obiektem
Hej, serwerze, wywołaj potem u mnie displayDetails(), dobrze?
Do wysłania żądania użyj send()
Na żądanie Ajaksa serwer zwykle zwraca dane
Ajax jest agnostykiem serwerowym
34
35
37
38
44
46
48
52
54
56
57
58
59
60
62
63
67
68
70
Jestem zdesperowany,
ale nie stać mnie na szybsze
serwery ani na zespół
specjalistów.
Użyj funkcji zwrotnej do pracy z danymi zwróconymi przez serwer
Pobierz odpowiedź serwera z właściwości responseText obiektu żądania
Żegnajcie, tradycyjne aplikacje internetowe!
Strony ajaksowe rozmawiają
z serwerem tylko wtedy, kiedy muszą...
i tylko o tym, o czym serwer wie.
Problemem witryny Roba nie są zbyt wolne
serwery, ale fakt, że strony
ciągle
wysyłają
żądania... nawet wtedy, gdy nie muszą.
danie
function
getDetails()
getDetails
{
...
displayDetails()
}
getDetails.php
Serwer zawsze coś
przetwarza i zwraca
dane... czasem kod
HTML, a czasem
surowe informacje.
thumbnails.js
danie
serwer WWW
Kod JavaScript może
użyć danych
z serwera do zaktuali
zowania tylko
fragmentu strony.
Serwer odpowiada,
a przeglądarka uruchamia
funkcję zwrotną.
8
Spis
treści
Projektowanie aplikacji w metodologii Ajax
2
W trakcie...
Nazwa użytkownika
jest w porządku.
Myślenie „po ajaksowemu”
Witamy wśród aplikacji ajaksowych — to zupełnie nowy świat internetowy.
Utworzyłeś już swoją pierwszą aplikację w metodologii Ajax i zaczynasz zastanawiać się, jak
wprowadzić żądania asynchroniczne do pozostałych swoich witryn. Ale w Ajaksie nie wszystko
sprowadza się do programowania. Musisz
inaczej myśleć o aplikacji.
Samo wykonywanie
żądań asynchronicznych nie sprawia, że staje się ona bardziej przyjazna dla użytkownika.
To ty powinieneś mu pomóc
uniknąć popełnienia błędów,
a to oznacza konieczność
powtórnego przemyślenia projektu
całej aplikacji.
Tradycyjna witryna Mike’a jest do bani
Użyjmy Ajaksa do ASYNCHRONICZNEGO przesyłania żądań rejestracji
Aktualizacja strony rejestracji
PROGRAMOWA konfiguracja procedury obsługi zdarzenia window.onload
Kod JavaScript znajdujący się poza funkcjami
jest wykonywany podczas odczytu skryptu
Co kiedy się wydarza?
A na serwerze...
Niektóre części projektów ajaksowych będą takie same... zawsze
Funkcja createRequest() jest zawsze taka sama
Twórz obiekt żądania... w wielu przeglądarkach
Projekt aplikacji ajaksowej obejmuje zarówno stronę WWW,
jak i program po stronie serwera
Co już zrobiliśmy...
Co jeszcze musimy zrobić...
Obiekt żądania łączy twój kod z przeglądarką
Porozumiewasz się z przeglądarką, a nie z serwerem
Przeglądarka wywołuje kod zwrotnie
i przekazuje do niego odpowiedź serwera
Pokaż Mike’owi ajaksową stronę rejestracji
Teraz formularz może przesyłać żądania do serwera na dwa sposoby
Utwórzmy klasy CSS dla każdego stanu przetwarzania żądania...
...i zmieńmy klasę CSS za pomocą JavaScriptu
Zmiany? Nie potrzebujemy ich!
Ten obrazek
informuje,
że nazwa
użytkownika
jest
w porządku.
74
76
81
84
86
87
88
90
91
94
96
99
99
102
103
106
108
109
112
113
114
115
Nazwa użytkownik
a
jest zajęta.
Po wpisaniu nazwy użytkownika
powinien zostać wyświetlony ten
obrazek postępu.
Przycisk wysyłania
jest wyłączony.
Zezwalaj na rejestrację tylko wtedy, gdy wprowadzono odpowiednie dane
Teraz możesz
przesłać stronę.
9
Spis
treści
Zdarzenia w JavaScripcie
3
Pocz tkuj cy.
Tu powiniene zacz ,
je eli nie uprawia e
jeszcze jogi.
Reagowanie na użytkowników
Czasami kod musi reagować na inne rzeczy dziejące się w aplikacji
internetowej...
W takiej sytuacji przydatne są
zdarzenia.
Zdarzenie jest
czymś, co dzieje się
na stronie, w przeglądarce, a nawet na serwerze. Nie wystarczy jedynie wiedzieć o zdarzeniach...
Czasami trzeba na nie odpowiedzieć. Tworząc kod i rejestrując go jako
procedurę obsługi
zdarzenia,
możesz sprawić, aby przeglądarka wykonywała go zawsze, gdy wystąpi określone
zdarzenie. Połącz zdarzenia i ich procedury obsługi, a otrzymasz
interaktywne aplikacje
internetowe.
Wszystko zaczęło się od „psa z głową w dół”
Aplikacje ajaksowe to coś więcej niż suma ich części
Oto kod XHTML strony Marty...
Zdarzenia są kluczem do interaktywności
Połącz zdarzenia ze strony WWW z procedurami obsługi w kodzie JavaScript
Za pomocą zdarzenia window.onload zainicjalizuj
pozostałe elementy interaktywne strony
Niech przyciski po lewej stronie reagują na kliknięcia
Użyj treści i struktury XHTML
Dopisz też kod funkcji hideHint()
Karty: złudzenie optyczne (i graficzne)
Sięgaj po obrazy za pomocą pętli for...
Klasy CSS są (znowu) kluczem do rozwiązania problemu
Hm... ale karty nie są <a>!
To popsuło nasz JavaScript, prawda?
Użyj obiektu żądania do pobrania z serwera informacji o zajęciach
Zachowaj ostrożność, gdy masz dwie funkcje
zmieniające tę samą część strony
Gdy musisz zmieniać obrazy w skrypcie, myśl o zmienianiu klas CSS
W XHTML-u odnośniki są reprezentowane przez elementy <a>
Potrzebujemy też funkcji wyświetlającej i ukrywającej przycisk
124
131
132
134
137
138
143
144
147
148
149
150
151
152
157
158
163
164
165
rednio zaawansowany.
Je eli kurs dla pocz tkuj cych
przesta by wyzwaniem,
spróbuj swoich si tutaj.
Zaawansowany.
Bardzo wymagaj cy!
10

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin