JQuery bemutató (5. rész): Mindegyik AJAX!

Hirdetés

Mivel közeledik a jQuery mini-bemutató sorozatunk vége, itt az ideje, hogy mélyebben áttekintsük a jQuery egyik leggyakrabban használt funkcióját. Az AJAX lehetővé teszi egy weboldal számára, hogy a háttérben kommunikáljon egy kiszolgálóval, anélkül, hogy az egész oldal újratöltődne. A Facebook-stílusú végtelen státuszfolyamoktól az űrlapadatok benyújtásáig egymillió különböző valósági helyzet van, amelyekben ez a technika hasznos lehet.

Ha még nem olvasta el a korábbi oktatóanyagokat, azt javaslom, hogy tegye meg, mielőtt ezzel foglalkoznának, mivel egymásra épülnek.

• Bevezetés: Mi a jQuery és miért érdekel? A web interaktívvá tétele: Bevezetés a jQuery-baA jQuery egy ügyféloldali szkriptkönyvtár, amelyet szinte minden modern webhely használ - interaktívvá teszi a webhelyeket. Ez nem az egyetlen Javascript könyvtár, de a legfejlettebb, leginkább támogatott és legszélesebb körben használt ... Olvass tovább
• 1: Kiválasztók és alapok jQuery bemutató - Az első lépések: Alapok és választók
  instagram viewer
  A múlt héten arról beszélt, hogy mennyire fontos a jQuery minden modern webes fejlesztő számára, és miért fantasztikus. Ezen a héten azt hiszem, itt az ideje, hogy megtisztítsuk kezünket valamilyen kóddal, és megtanuljuk, hogyan ... Olvass tovább
• 2: Módszerek Bevezetés a jQuery-be (2. rész): Módszerek és funkciókEz része a jQuery web programozási sorozat kezdő bevezetésének. Az 1. rész ismerteti a jQuery alapjait annak bevonásával a projektbe, és a választókat. A 2. részben folytatjuk ... Olvass tovább
• 3: Várakozás az oldalbetöltésre és az anonim funkciókra Bevezetés a jQuery-be (3. rész): Várakozás az oldal betöltésére és névtelen funkciókA jQuery vitathatatlanul elengedhetetlen képesség a modern webfejlesztő számára, és ebben a rövid mini-sorozatban remélem, hogy megismeri a tudást, hogy elkezdje felhasználni saját webprojekteiben. Ban ben... Olvass tovább
• 4: Események jQuery bemutató (4. rész) - Események hallgatóiMa egy bevágást fogunk rúgni, és valóban megmutatjuk, hol ragyog a jQuery - események. Ha követte a korábbi útmutatásokat, akkor meg kell értenie az alapkódot ... Olvass tovább
• Hibakeresés a Chrome Developer Tools segítségével Tájékozódjon a Chrome fejlesztői eszközökkel vagy a Firebug-lal kapcsolatos webhelyproblémákrólHa eddig követte a jQuery útmutatásaimat, akkor előfordulhat, hogy már egyes kódproblémákkal szembesült, és nem tudja, hogyan lehet ezeket megjavítani. Ha egy nem működő bit kóddal szembesül, ez nagyon ... Olvass tovább

Egy Mi?

AJAX rövidítése a Aszinkron Javascript és XML, de itt van a kulcsszó aszinkron. Az aszinkron arra a tényre utal, hogy ezek a kérelmek a háttérben fordulnak elő, és nem szakítják meg a felhasználó böngészési élményét. Valószínűleg soha nem is észrevette ezt korábban, de ha egy webhely dinamikusan frissíti magát, akkor nagy esély van arra, hogy az AJAX-t használja ehhez.

Az AJAX előtt a szerverrel történő bármilyen interakciót - akár új adatok lekérése, akár információk visszaküldése a felhasználótól - új oldalbetöltéssel és átirányításokkal kellett volna elvégezni.

Ma megvizsgáljuk egy harmadik fél szolgáltatásának, a Flickrnek a használatát, akitől az AJAX segítségével képeket tölthetünk le JSON adattípus használatával. Valójában nem számít, hogy a Flickr hogyan hajtja végre a dolgok fogadó oldalát, mert ez a szépsége API-k - csak annyit kell tudnunk, hogy egy API URL, milyen adatokat fogunk visszakapni, és hogyan lehet ezeket manipulálni.

További olvasás céljából egy ideje írtam egy másik oktatóanyagot az AJAX kezelése a WordPress-ben kapcsolattartási űrlap benyújtására Oktatóanyag az AJAX használatáról a WordPress-benAz AJAX egy figyelemre méltó webes technológia, amely túlment az egyszerű „kattintási link, menjen egy másik oldalra” túllépésén az Internet 1.0 felépítése. Ez lehetővé teszi a webhelyek számára a tartalom dinamikus letöltését és megjelenítését a felhasználói ... Olvass tovább , ezért érdemes ellenőrizni ezt is; ez magában foglalja a saját PHP-kezelő írását és az integrálását a „hivatalos” WordPress AJAX folyamatba.

Az AJAX módszer

Az AJAX kérés alapvető formátuma:

$ .ajax ({típus: "GET vagy POST", URL: "API vagy a PHP kezelő URL-je", adattípus: "JSON", // attól függően, hogy milyen adatot szeretne visszaadni, de a JSON a legtöbb általános adatok: {// kulcskészlet: "érték" párok}, siker: függvény (adatok) {// kezeli az adatok sikeres visszatérését}, hiba: függvény (üzenet) {// kezelje a hibát } });

Ez eleinte meglehetősen bonyolultnak tűnik - ezt nem segíti a kód beépítésének hiánya -, de látni fogja, milyen egyszerű ez a való világ példájához jutni.

Flickr API AJAX

Ebben a példában megragadjuk az aktuális WordPress-bejegyzéshez tartozó címkéket, és beolvasunk néhány képet, amelyeket a cikk végére lehet csatolni. Van egy hasonló példa a jQuery dokumentációjában, de a rövidített módszert használja, az úgynevezett getJSON () a teljes AJAX formátum magyarázata helyett. Noha ez egy érvényes módszer a dolgok elvégzésére, ha tudja, hogy csak a JSON-adatokat fogja visszakapni, úgy érzem, hogy a tényleges AJAX-módszer megtanulása fontosabb, tehát így csináljuk.

Először egy fel single.php és megpróbáljuk kigombolni az aktuális postai címkék egyszerű vesszővel elválasztott listáját. Általában használnád the_tags () erre, de ez nem jó, mivel ezeket később változóként akarjuk tárolni the_tags () visszaforgatja őket egy előre formázott formában. Ehelyett használjuk get_the_tags ():

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

Ez szépen működik, tehát ezt az AJAX kérésből a következők szerint adjuk ki a Flickr API URL-hez (vegye figyelembe, ez egy képernyőkép - a behúzás megőrzése érdekében a kód elérhető a következő oldalon: ez a PasteBin).

Ezen a ponton csak annyit tesz, hogy megjelenjen a böngésző konzoljára, vagy riasztjon egy hibaüzenetet, ha van. Ha valóban megteszi valamit a visszatérő adatokkal, akkor adjon hozzá valamit a képek elhelyezéséhez:

És szerkessze a siker paramétere az AJAX hívásnak, hogy iteráljon az példány amelyeket visszaadnak.

$ .each (data.items, function (i, item) {if (i == 3) false; // állj meg, amikor 3 dollárunk van ("# flickr"). append (""); });

És ott van. vagyunk hozzáfűzés 3 elem a visszaadott JSON-objektumból (az adatok nulla indexeléssel vannak ellátva, tehát, ha a 3. elemhez jutunk, valójában a negyedik tételnél vagyunk. Zavaró, tudom. Ezen a ponton használjuk hamis visszaadást kiugrni a minden egyes() iterátor). Már megvizsgáltam a visszaadott objektumok tartalmát, tehát ismerem az adatszerkezetet, és csak egy linket és IMG-referenciát vonok ki. Ha szeretné tudni, hogy mi még visszatér, csak dobjon a console.log (elem) ott.

Itt vannak az eredmények a teszthelyzetemben, és a teljes kód ezen a PasteBin-en. Vegye figyelembe, hogy a visszatérő eredmények alapvetően szemét - a bejegyzésem tartalmazta a címkét DIY egy a walk-in csirkefutás, és Flickr adta nekem DIY kötés. Szép. Természetesen ez az egyik akadály, amellyel szembesül az API-val való munka során, és automatikusan a dolgok elvégzésekor; vagy újból megcímkézheti a hozzászólásait (jelentős vállalkozás), megváltoztathatja a „minden” címke kérésének kérését az „esetleges” helyett (valószínűleg visszatér) ebben az esetben semmi), vagy állítson fel egy új egyéni mezőt, amelyre megcéloz egy célzott kulcsszót, amelyet használni kíván az API-val (valószínűleg a legegyszerűbb).

SEO szempontok

Ez nem nagy kérdés, de mivel webhelyek fejlesztésével foglalkozik, ennek ennek kell lennie megemlítették: a keresőmotorok nem indexelnek olyan tartalmat, amely nem létezik az oldal betöltésekor, például bármi megtörtént keresztül AJAX. Az abszolút legrosszabb dolog, amit megtehetsz, az lenne, hogy teljes mértékben kiigazíthatod blogod úgy, hogy a kezdőlap csupán iframe-szerű tároló legyen az összes dinamikusan betöltött tartalom számára. Okosan használja az AJAX-t fokozza az oldal tartalma, nem mint a csere. Vagy súlyos következményekkel kell szembenéznie.

Köszönöm az olvasást, és remélem, hogy adtam neked néhány ötletet. Természetesen a Flickr nem az egyetlen ott elérhető API - csak a Google “nyilvános API”És biztos, hogy talál még olyan dolgokat, amelyekkel játszhatna.

A jövő héten a jQuery Tutorial sorozat utolsó leckéje lesz, amikor megnézjük a jQuery felhasználói felület beépülő modult. Mint mindig, üdvözöljük az észrevételeket és javaslatokat; Ha kérdése van, amelyből mások is profitálnak, fontolja meg, hogy feladja-e a Válaszok webhelyünket.