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

Když se blížíme ke konci naší mini-tutoriálové série 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 stavových toků ve stylu Facebooku až po odesílání dat z formulářů existuje řada různých skutečných životních situací, ve kterých může být tato technika užitečná.

Pokud jste si nečetli předchozí návody, navrhuji, abyste tak učinili před tím, než se s tím vypořádáte, protože na sobě staví.

• Úvod: Co je to jQuery a proč by vás to mělo zajímat? Vytváření interaktivního webu: Úvod do jQuery Vytváření interaktivního webu: Úvod do jQuery jQuery je skriptovací knihovna na straně klienta, kterou používá téměř každý moderní web - díky tomu jsou webové stránky interaktivní. Není to jediná knihovna Javascript, ale je to nejrozvinutější, nejvíce podporovaná a nejpoužívanější…
• 1: Výběry a základy jQuery Tutorial - Začínáme: Základy a výběry jQuery Tutorial - Začínáme: Základy a výběry 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…
• 2: Metody Úvod do jQuery (Část 2): Metody a funkce Úvod do jQuery (Část 2): Metody a funkce Toto je část úvodního ú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…
• 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í funkce Úvod do jQuery (část 3): Čekání na načtení stránky a anonymní funkce jQuery je pravděpodobně základní dovedností pro 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…
• 4: Výukový program jQuery (část 4) - posluchače událostí Výukový program jQuery (část 4) - posluchače událostí Dnes si to vyzvedneme zářezem 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 ...
• Ladění pomocí nástrojů pro vývojáře Chrome Problémy s webovými stránkami pomocí nástrojů pro vývojáře Chrome nebo Firebug Problémy s webovými stránkami pomocí nástrojů pro vývojáře Chrome nebo Firebug Pokud jste dosud sledovali mé tutoriály jQuery, možná jste již narazili na některé problémy s kódem a nevíte jak opravit je. Když čelíme nefunkčnímu kódu, je to velmi…

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 ještě nikdy nevšimli, ale pokud se web dynamicky aktualizuje, existuje velká šance, že to používá AJAX..

Před AJAX, jakákoli forma interakce se serverem, ať už je to načítání nových dat nebo zveřejňování informací zpět od uživatele, by musela být 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 manipulovat.

Pro další čtení jsem před nějakou dobou napsal další tutoriál o zacházení s AJAX ve WordPressu pro odeslání kontaktního formuláře Výukový program o používání AJAXu v WordPressu Výukový program o používání AJAXu ve WordPressu AJAX je pozoruhodná webová technologie, která nás posunula nad rámec jednoduchých “klikněte na odkaz, přejděte na jinou stránku” struktura internetu 1.0. Umožňuje webovým stránkám dynamicky načítat a zobrazovat obsah bez uživatele ..., takže si to můžete také ověřit; to zahrnuje psaní vlastního PHP handleru a jeho integraci do “oficiální” Proces 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 pro PHP", datový typ: "JSON", // v závislosti na tom, jaký druh dat chcete zpět, ale JSON jsou nejběžnější data: // množina klíčů: páry "value", success: function (data) // handle úspěšný návrat dat, error: function (message) // handle the error);

Zpočátku to vypadá docela složitě - nepomůže to ani nedostatkem odsazení z tohoto pluginu kódu - ale uvidíte, jak snadné je, když se dostanete na příklad ze 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. V dokumentaci jQuery je podobný příklad, ale používá zkratkovou metodu nazvanou getJSON () mí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ší, takže 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 () k tomu, ale není to dobré, 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 ():

název.","; ?>

Funguje to hezky, takže to uvnitř požadavku AJAX zašleme na adresu URL Flickr API takto (poznámka: toto je snímek obrazovky - aby se zachovalo odsazení, kód je k dispozici na tomto 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 budou 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 ("
SEO úvahy
Toto není hlavní bod, ale protože se zabýváte vývojem webových stránek, mělo by se to zmínit: vyhledávače nebudou indexovat obsah, který neexistuje při načítání stránky, jako cokoli, co se děje prostřednictvím 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é API tam venku - jen 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; Pokud máte otázku, z níž budou mít prospěch další, zvažte zveřejnění na našem webu Odpovědi.