jQuery Tutorial (część 5) AJAX Them All!

Gdy zbliżamy się do końca naszej serii mini-samouczków jQuery, najwyższy czas przyjrzeć się dokładniej jednej z najczęściej używanych funkcji jQuery. AJAX pozwala stronie komunikować się z serwerem w tle bez konieczności ponownego ładowania całej strony. Od nieskończonych strumieni statusu w stylu Facebooka do przesyłania danych formularza, istnieje milion różnych rzeczywistych sytuacji, w których ta technika może być przydatna.

Jeśli nie przeczytałeś poprzednich samouczków, sugeruję, abyś to zrobił przed rozwiązaniem tego problemu, ponieważ są one oparte na sobie.

• Wprowadzenie: Co to jest jQuery i dlaczego powinno Cię to obchodzić? Interaktywność sieci: wprowadzenie do jQuery Interaktywność sieci: wprowadzenie do jQuery jQuery to biblioteka skryptów po stronie klienta, z której korzysta prawie każda nowoczesna strona internetowa - sprawia, że ​​strony są interaktywne. To nie jedyna biblioteka JavaScript, ale jest to najbardziej rozwinięta, najczęściej obsługiwana i najczęściej używana…
• 1: Selektory i podstawy Samouczek jQuery - Pierwsze kroki: Podstawy i selektory Samouczek jQuery - Pierwsze kroki: Podstawy i selektory W zeszłym tygodniu mówiłem o tym, jak ważna jest jQuery dla każdego współczesnego programisty i dlaczego jest niesamowita. W tym tygodniu myślę, że nadszedł czas, aby ubrudzić sobie ręce kodem i dowiedzieć się, jak…
• 2: Metody Wprowadzenie do jQuery (część 2): Metody i funkcje Wprowadzenie do jQuery (część 2): Metody i funkcje Jest to część ciągłego wprowadzenia dla początkujących do serii programów internetowych jQuery. Część 1 obejmowała podstawy jQuery dotyczące tego, jak włączyć go do projektu oraz selektorów. W części 2 będziemy kontynuować…
• 3: Oczekiwanie na ładowanie strony i anonimowe funkcje Wprowadzenie do jQuery (część 3): Oczekiwanie na ładowanie strony i anonimowe funkcje Wprowadzenie do jQuery (część 3): Oczekiwanie na ładowanie strony i anonimowe funkcje jQuery jest prawdopodobnie niezbędną umiejętnością dla nowoczesny twórca stron internetowych, a w tej krótkiej mini-serii mam nadzieję, że dam wam wiedzę, aby zacząć z niej korzystać we własnych projektach internetowych. W…
• 4: Wydarzenia Samouczek jQuery (część 4) - nasłuchiwanie zdarzeń Samouczek jQuery (część 4) - nasłuchiwanie zdarzeń Dzisiaj podnosimy poprzeczkę i naprawdę pokazujemy, gdzie świeci jQuery - wydarzenia. Jeśli korzystałeś z poprzednich samouczków, powinieneś teraz dość dobrze rozumieć podstawowy kod…
• Debugowanie za pomocą narzędzi deweloperskich Chrome Wykrywanie problemów z witryną za pomocą narzędzi programistycznych Chrome lub Firebug Wykrywanie problemów ze stron internetowych za pomocą narzędzi programistycznych Chrome lub Firebug Jeśli do tej pory obserwowałeś moje samouczki jQuery, być może masz już problemy z kodem i nie wiesz, jak to zrobić naprawić je. W obliczu niefunkcjonalnego fragmentu kodu jest bardzo…

Że co?

AJAX jest akronimem dla Asynchroniczne JavaScript i XML, ale słowo kluczowe jest tutaj asynchroniczny. Asynchroniczny oznacza fakt, że żądania te występują w tle, nie zakłócając przeglądania użytkownika. Prawdopodobnie nigdy wcześniej tego nie zauważyłeś, ale jeśli witryna aktualizuje się dynamicznie, istnieje duża szansa, że ​​używa do tego AJAX.

Przed AJAX każda forma interakcji z serwerem, czy to w celu pobierania nowych danych czy wysyłania informacji z powrotem do użytkownika, musiałaby być wykonywana przy użyciu nowego ładowania strony i przekierowań.

Dzisiaj przyjrzymy się korzystaniu z usługi innej firmy, Flickr - od której możemy korzystać z AJAX do pobierania zdjęć za pomocą typu danych JSON. W rzeczywistości nie ma znaczenia, w jaki sposób Flickr realizuje stronę odbiorczą rzeczy, ponieważ takie jest piękno Pszczoła - wszystko, co musimy wiedzieć, to adres URL interfejsu API, jakie dane otrzymamy i jak nimi manipulować.

Do dalszej lektury napisałem jakiś tutorial jakiś czas temu na temat obsługi AJAX w WordPress w celu przesłania formularza kontaktowego Samouczek na temat korzystania z AJAX w WordPress Samouczek na temat korzystania z AJAX w WordPress AJAX to niezwykła technologia internetowa, która wyszła poza proste “kliknij link, przejdź do innej strony” struktura Internetu 1.0. Umożliwia stronom internetowym dynamiczne pobieranie i wyświetlanie treści bez użytkownika… więc możesz też to sprawdzić; wymaga napisania własnego programu obsługi PHP i zintegrowania go z “urzędnik” Proces AJAX WordPress.

Metoda AJAX

Oto podstawowy format żądania AJAX:

$ .ajax (type: „GET or POST”, adres URL: „API lub adres URL twojego programu obsługi PHP”, typ danych: „JSON”, // w zależności od tego, jakiego rodzaju dane chcesz odzyskać, ale JSON jest najczęstszymi danymi: // zestaw par klucz: „wartość”, sukces: funkcja (dane) // obsłużyć pomyślny zwrot danych, błąd: funkcja (komunikat) // obsłużyć błąd);

Na początku wygląda to dość skomplikowane - nie pomaga na to brak wcięcia w tej wtyczce kodu - ale zobaczysz, jak łatwo jest przejść do przykładu z prawdziwego świata.

Flickr API AJAX

W tym przykładzie zamierzamy pobrać tagi związane z bieżącym postem WordPress i pobrać kilka zdjęć, które zostaną dołączone na końcu artykułu. Podobny przykład znajduje się w dokumentacji jQuery, ale wykorzystuje on metodę skrótu o nazwie getJSON () zamiast wyjaśniać pełny format AJAX. Chociaż jest to prawidłowy sposób robienia rzeczy, jeśli wiesz, że odzyskasz tylko dane JSON, uważam, że uczenie się rzeczywistej metody AJAX jest ważniejsze, więc tak to zrobimy.

Najpierw jeden single.php a my postaramy się wypisać echo prostej oddzielnej przecinka listy bieżących tagów postów. Zazwyczaj byś użył the_tags () aby to zrobić, ale to nie jest dobre, ponieważ w końcu chcemy je przechowywać jako zmienną the_tags () powtarza je bezpośrednio sformatowane. Zamiast tego użyjemy get_the_tags ():

Nazwa.","; ?>

Działa to dobrze, więc wyślemy to wewnątrz żądania AJAX do adresu URL interfejsu API Flickr w następujący sposób (uwaga, to zrzut ekranu - w celu zachowania wcięcia kod jest dostępny w tym PasteBin).

W tym momencie wszystko, co robi, to wyjście do konsoli przeglądarki lub ostrzeżenie o błędzie, jeśli taki istnieje. Aby faktycznie zrobić coś ze zwróconymi danymi, dodaj gdzieś do umieszczenia obrazów:

I edytuj powodzenie parametr wywołania AJAX w celu iteracji po przedmiotów które są zwracane.

$ .each (data.items, funkcja (i, item) if (i == 3) zwraca false; // zatrzymaj się, gdy otrzymamy 3 $ („# flickr”). append („
Uwagi dotyczące SEO
Nie jest to główny punkt, ale ponieważ zajmujesz się tworzeniem stron internetowych, należy wspomnieć: wyszukiwarki nie będą indeksować treści, które nie istnieją przy ładowaniu strony, na przykład wszystko, co dzieje się za pośrednictwem AJAX. Absolutnie najgorsze, co możesz zrobić, to w pełni AJAXify swojego bloga, aby strona główna była tylko kontenerem podobnym do iframe dla wszystkich treści, które są ładowane dynamicznie. Używaj AJAX mądrze, aby wzmacniać zawartość strony, a nie jako zastąpienie. Lub ponieść straszne konsekwencje.
Dziękuję za przeczytanie i mam nadzieję, że dałem ci kilka pomysłów. Oczywiście Flickr nie jest jedynym dostępnym interfejsem API - tylko Google “publiczny interfejs API” i na pewno znajdziesz więcej rzeczy, z którymi możesz się pobawić.
W przyszłym tygodniu odbędzie się ostatnia lekcja z serii samouczków jQuery, gdy sprawdzimy wtyczkę interfejsu użytkownika jQuery. Jak zawsze mile widziane są komentarze i sugestie; jeśli masz pytanie, z którego skorzystają inni, rozważ opublikowanie go na naszej stronie Odpowiedzi.