Výukový program jQuery (část 5): AJAX Them All!

reklama

Když se blížíme ke konci naší řady mini-tutoriálů jQuery, je na čase, abychom se hlouběji podívali na jednu z nejpoužívanějších funkcí jQuery. AJAX umožňuje webové stránce komunikovat se serverem na pozadí, aniž by bylo nutné znovu načíst celou stránku. Od nekonečných proudových toků ve stylu Facebooku až po odesílání dat z formulářů může existovat milion různých skutečných životních situací, ve kterých může být tato technika užitečná.

Pokud jste si dosud nečetli předchozí návody, doporučujeme vám to udělat před vyřešením tohoto problému, protože na sobě navazují.

• Úvod: Co je jQuery a proč by vás to mělo zajímat? Vytvoření interaktivního webu: Úvod do jQueryjQuery je skriptovací knihovna na straně klienta, kterou téměř každý moderní web používá - díky tomu jsou webové stránky interaktivní. Není to jediná knihovna Javascript, ale je to nejrozvinutější, nejvíce podporovaná a nejrozšířenější ... Přečtěte si více
• 1: Selektory a základy Výukový program jQuery - Začínáme: Základy a výběr
  instagram viewer
  Minulý týden jsem mluvil o tom, jak důležité je jQuery pro každého moderního webového vývojáře a proč je to úžasné. Tento týden si myslím, že je čas, abychom si zašpinili ruce nějakým kódem a zjistili, jak ... Přečtěte si více
• 2: Metody Úvod do jQuery (část 2): Metody a funkceToto je část úvodního úvodu do programovací série webů jQuery. Část 1 se zabývala základy jQuery o tom, jak ji zahrnout do vašeho projektu, a selektory. V části 2 budeme pokračovat ... Přečtěte si více
• 3: Čekání na načtení stránky a anonymní funkce Úvod do jQuery (část 3): Čekání na načtení stránky a anonymní funkcejQuery je patrně nezbytnou dovedností moderního webového vývojáře a v této krátké mini-sérii doufám, že vám poskytnu znalosti, které vám umožní začít je používat ve vašich vlastních webových projektech. V... Přečtěte si více
• 4: Události Výukový program jQuery (část 4) - posluchači událostíDnes to vykopneme do zářezu a skutečně ukážeme, kde jQuery svítí - události. Pokud jste postupovali podle minulých tutoriálů, měli byste nyní dobře rozumět základnímu kódu ... Přečtěte si více
• Ladění pomocí nástrojů pro vývojáře Chrome Problémy s webovými stránkami s vývojářskými nástroji Chrome nebo FirebugPokud jste dosud sledovali moje návody jQuery, možná jste již narazili na některé problémy s kódem a nevěděli jste, jak je opravit. Když čelíme nefunkčnímu kódu, je to velmi ... Přečtěte si více

Co?

AJAX je zkratka pro Asynchronní Javascript a XML, ale klíčové slovo je zde asynchronní. Asynchronní odkazuje na skutečnost, že se tyto požadavky vyskytují na pozadí, aniž by to uživatele přerušilo. Pravděpodobně jste si to nikdy předtím nevšimli, ale pokud se web dynamicky aktualizuje, existuje velká šance, že k tomu používá AJAX.

Před AJAX by musela být jakákoli forma interakce se serverem, ať už je to načtení nových dat nebo zveřejnění informací zpět od uživatele, provedena pomocí nového načtení stránky a přesměrování.

Dnes se podíváme na používání služby třetích stran, Flickru - od níž můžeme pomocí AJAX načíst některé obrázky pomocí datového typu JSON. Nezáleží na tom, jak Flickr implementuje přijímací stranu věcí, protože to je krása API - vše, co potřebujeme vědět, je adresa URL rozhraní API, jaký druh dat se dostaneme zpět a jak s nimi nakládat.

Pro další čtení jsem před chvílí napsal další tutoriál zpracování AJAX v WordPress pro odeslání kontaktního formuláře Výukový program o používání AJAX ve WordPressuAJAX je pozoruhodná webová technologie, která nás posunula nad rámec jednoduchého „kliknutí na odkaz, přejít na jinou stránku“ struktura internetu 1.0. Umožňuje webům dynamicky načítat a zobrazovat obsah bez uživatel... Přečtěte si více , můžete si to také vyzkoušet; zahrnuje psaní vlastního PHP obslužného programu a jeho integraci do „oficiálního“ procesu WordPress AJAX.

Metoda AJAX

Zde je základní formát žádosti AJAX:

$ .ajax ({type: "GET or POST", url: "API nebo URL vašeho obslužného programu PHP", datový typ: "JSON", // v závislosti na tom, jaký druh dat chcete zpět, ale JSON je nejvíce běžná data: {// sada klíčů: páry „hodnota“}, úspěch: funkce (data) {// zpracovat úspěšný návrat dat}, chyba: funkce (zpráva) {// zpracovat chybu } });

Zpočátku to vypadá docela složitě - nepomohlo to tím, že by tento kódový plugin nebyl odsazen - ale uvidíte, jak snadné je, když se dostanete na příklad skutečného světa.

Flickr API AJAX

V tomto příkladu se chystáme uchopit značky spojené s aktuálním příspěvkem WordPress a načíst některé obrázky, které se připojí na konec článku. Je tu podobný příklad v dokumentaci jQuery, ale používá zkratkovou metodu nazvanou getJSON () namísto vysvětlení plného formátu AJAX. I když je to platný způsob, jak dělat věci, pokud víte, že získáváte pouze data JSON, mám pocit, že naučit se skutečnou metodu AJAX je důležitější, a tak to uděláme.

Nejprve jeden nahoru single.php a pokusíme se zopakovat jednoduchý seznam aktuálních značek příspěvků oddělených čárkami. Obvykle byste použili the_tags () to není nic dobrého, protože je chceme nakonec uložit jako proměnnou the_tags () je ozvěna přímo předformátovaná. Místo toho použijeme get_the_tags ():

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

Funguje to pěkně, takže to budeme odesílat uvnitř požadavku AJAX na adresu URL Flickr API takto (poznámka: toto je snímek obrazovky - aby se zachovalo odsazení, kód je k dispozici na adrese tento PasteBin).

V tomto okamžiku to vše pro výstup do konzoly prohlížeče, nebo upozornění chybové zprávy, pokud existuje. Chcete-li skutečně něco udělat s vrácenými daty, přidejte místo, kam mají být obrázky umístěny:

A upravit úspěch parametr volání AJAX na iteraci přes položek které jsou vráceny.

$ .each (data.items, function (i, item) {if (i == 3) return false; // stop, když máme 3 $ ("# flickr"). append (""); });

A tady to máme. Jsme připojuje se 3 položky z vráceného objektu JSON (data jsou nulována indexována, takže pokud se dostaneme k položce 3, jsme ve skutečnosti u čtvrté položky. Matoucí, vím. V tuto chvíli používáme vrátit nepravdivé vyskočit z každý() iterator). Už jsem prozkoumal obsah vrácených objektů, takže vím strukturu dat a extrahuji pouze odkaz a odkaz IMG. Pokud chcete vědět, co se vrací, stačí hodit console.log (položka) tam.

Zde jsou výsledky na mém testovacím webu a plný kód v tomto PasteBin. Všimněte si, že vrácené výsledky jsou v podstatě nevyžádané - můj příspěvek obsahoval značku DIY pro chodící kuřecí běh, a Flickr mi dal DIY pletení. Pěkný. To je samozřejmě jedna z překážek, kterým čelíte při práci s API a automatickém provádění věcí; můžete buď znovu označit své příspěvky (značný závazek), změnit žádost a požádat o „všechny“ značky namísto „jakéhokoli“ (pravděpodobně se vrátí) nic v tomto případě), nebo přijďte s novým vlastním polem, do kterého byste určili cílené klíčové slovo, které se použije s API (pravděpodobně nejjednodušší).

SEO úvahy

To není hlavní bod, ale jelikož se zabýváte vývojem webových stránek, mělo by to být uvedeno: vyhledávače nebudou indexovat obsah, který při načítání stránky neexistuje, například cokoli udělal přes AJAX. Absolutně nejhorší věcí, kterou byste mohli udělat, by bylo plně AJAXify svůj blog tak, že domovská stránka byla pouhým kontejnerem typu iframe pro veškerý obsah, který je načten dynamicky. Používejte AJAX moudře, k zlepšit obsah stránky, nikoli jako výměna, nahrazení. Nebo čelit hrozným důsledkům.

Díky za čtení, a doufám, že jsem vám dal nějaké nápady. Flickr samozřejmě není jediné rozhraní API - pouze Google “veřejné API“A určitě najdete další věci, se kterými byste si mohli hrát.

Příští týden bude poslední lekcí série jQuery Tutorial, když se podíváme na plugin jQuery UI. Jako vždy jsou vítány připomínky a návrhy; Máte-li dotaz, z čehož budou mít prospěch další, zvažte zveřejnění na našem serveru Odpovědi.