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

Reklama

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 Facebook po przesyłanie danych formularzy - istnieje milion różnych rzeczywistych sytuacji, w których ta technika może być przydatna.

Jeśli nie czytałeś poprzednich samouczków, sugeruję, abyś to zrobił przed rozwiązaniem tego problemu, ponieważ będą one opierać się na sobie.

• Wprowadzenie: Co to jest jQuery i dlaczego powinno Cię to obchodzić? Interaktywność sieci: wprowadzenie do jQueryjQuery to biblioteka skryptów po stronie klienta, z której korzysta prawie każda nowoczesna strona internetowa - sprawia, że ​​strony internetowe są interaktywne. To nie jedyna biblioteka JavaScript, ale jest to najbardziej rozwinięta, najbardziej obsługiwana i najczęściej używana ... Czytaj więcej
• 1: Selektory i podstawy
  instagram viewer
  Samouczek jQuery - Pierwsze kroki: podstawy i selektoryW 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 ... Czytaj więcej
• 2: Metody Wprowadzenie do jQuery (część 2): Metody i funkcjeJest to część ciągłego wprowadzenia dla początkujących do serii programowania stron 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ć ... Czytaj więcej
• 3: Oczekiwanie na ładowanie strony i anonimowe funkcje Wprowadzenie do jQuery (część 3): Oczekiwanie na załadowanie strony i anonimowe funkcjejQuery jest prawdopodobnie niezbędną umiejętnością dla współczesnego twórcy stron internetowych, a w tej krótkiej mini-serii mam nadzieję, że dam wam wiedzę, aby zacząć z niej korzystać w swoich własnych projektach internetowych. W... Czytaj więcej
• 4: Wydarzenia Samouczek jQuery (część 4) - Detektory 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 ... Czytaj więcej
• Debugowanie za pomocą Narzędzi dla programistów Chrome Rozwiązywanie problemów z witryną za pomocą Narzędzi Chrome dla programistów lub FirebugJeśli do tej pory śledziłeś moje samouczki jQuery, być może masz już problemy z kodem i nie wiesz, jak je naprawić. W obliczu niefunkcjonalnego kodu, jest bardzo ... Czytaj więcej

Ż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 strony przez 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, bez względu na to, czy pobierała nowe dane, czy wysyłała informacje z powrotem do użytkownika, musiała 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ą, 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 przed chwilą kolejny samouczek obsługa AJAX w WordPress w celu przesłania formularza kontaktowego Samouczek korzystania z AJAX w WordPressAJAX to niezwykła technologia internetowa, która przesunęła nas poza zwykły „link kliknięcia, przejdź do innej strony” struktura Internetu 1.0. Umożliwia witrynom dynamiczne pobieranie i wyświetlanie treści bez użytkownik... Czytaj więcej , więc możesz też to sprawdzić; polega na napisaniu własnego modułu obsługi PHP i zintegrowaniu go z „oficjalnym” procesem AJAX WordPress.

Metoda AJAX

Oto podstawowy format żądania AJAX:

$ .ajax ({type: „GET or POST”, adres URL: „API lub adres URL twojej obsługi PHP”, typ danych: „JSON”, // w zależności od rodzaju danych, które chcesz odzyskać, ale JSON jest najbardziej wspólne dane: {// zestaw kluczy: pary „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. Jest podobny przykład w dokumentacji jQuery, ale używa metody 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 w ten sposób to zrobimy.

Najpierw jeden single.php a my postaramy się utworzyć echo prostej listy oddzielnych przecinków 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 ():

php. $ tagslist = get_the_tags (); foreach ($ tagslist jako $ tag) { echo $ tag-> name. ","; }

Działa to ładnie, 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 pod adresem ten 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 sukces parametr wywołania AJAX do iteracji po przedmiotów które są zwracane.

$ .each (data.items, funkcja (i, item) {if (i == 3) zwraca false; // przestań, gdy będziemy mieć 3 $ („# flickr”). append („"); });

Mamy to. Byli dołączanie 3 elementy ze zwróconego obiektu JSON (dane są indeksowane zerowo, więc jeśli przejdziemy do punktu 3, to właściwie jesteśmy na czwartym elemencie. Mylące, wiem. W tym momencie używamy zwróć false wyskoczyć z każdy() iterator). Już sprawdziłem zawartość zwracanych obiektów, więc znam strukturę danych i wyciągam tylko link i referencję IMG. Jeśli chcesz wiedzieć, co jeszcze jest zwracane, po prostu rzuć console.log (pozycja) tam.

Oto wyniki na mojej stronie testowej i pełny kod w tym PasteBin. Zauważ, że zwrócone wyniki są w zasadzie śmieciami - mój post zawierał tag majsterkowanie dla wybieg dla kurczaka, a Flickr dał mi majsterkowanie. Ładny. Oczywiście jest to jedna z przeszkód, które napotykasz podczas pracy z API i robienia rzeczy automatycznie; możesz albo ponownie otagować swoje posty (znaczące przedsięwzięcie), zmienić prośbę o podanie „wszystkich” tagów zamiast „dowolnych” (prawdopodobnie zwróci nic w tym przypadku) lub zaproponuj nowe niestandardowe pole, w którym określisz docelowe słowo kluczowe do użycia z interfejsem API (prawdopodobnie najłatwiej).

Uwagi dotyczące SEO

To nie jest główny punkt, ale skoro zajmujesz się tworzeniem stron internetowych, powinno tak być wspomniano: wyszukiwarki nie indeksują treści, które nie istnieją podczas wczytywania strony, na przykład cokolwiek zrobionego przez 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 ładowanych dynamicznie. Używaj AJAX mądrze, aby wzmacniać treść 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ę bawić.

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.