jQuery-zelfstudie (deel 5) AJAX allemaal!

Aan het einde van onze jQuery mini-tutorial-serie wordt het tijd dat we dieper ingaan op een van de meest gebruikte functies van jQuery. Met AJAX kan een website communiceren met een server op de achtergrond zonder dat de hele pagina opnieuw hoeft te worden geladen. Van oneindige statusstreams in Facebookstijl naar het verzenden van formuliergegevens, er zijn een miljoen verschillende situaties uit het echte leven waarin deze techniek nuttig kan zijn.

Als je de vorige tutorials nog niet hebt gelezen, raad ik je aan dit te doen voordat je dit aanpakt omdat ze op elkaar voortbouwen.

• Introductie: Wat is jQuery en waarom zou het jou iets kunnen schelen? Het web interactief maken: een inleiding tot jQuery Het web interactief maken: een inleiding tot jQuery jQuery is een client-side scriptingbibliotheek die bijna elke moderne website gebruikt - het maakt websites interactief. Het is niet de enige JavaScript-bibliotheek, maar het is de meest ontwikkelde, meest ondersteunde en meest gebruikte ... Lees meer
• 1: Selectors en Basics jQuery Tutorial - Aan de slag: Basics & Selectors jQuery Tutorial - Aan de slag: Basics & Selectors Vorige week sprak ik over hoe belangrijk jQuery is voor elke moderne webontwikkelaar en waarom het geweldig is. Deze week denk ik dat het tijd wordt dat we onze handen vuil maken met een code en leren hoe ... Lees meer
• 2: Methoden Inleiding tot jQuery (deel 2): ​​methoden en functies Inleiding tot jQuery (deel 2): ​​methoden en functies Dit is onderdeel van een doorlopende introductie voor beginners van de jQuery-webprogrammeringsserie. Deel 1 behandelde de jQuery-basisprincipes van hoe deze in uw project moest worden opgenomen, en selectors. In deel 2 gaan we verder met ... Lees meer
• 3: wachten op paginabelasting en anonieme functies Inleiding op jQuery (deel 3): wachten op de te laden pagina en anonieme functies Inleiding op jQuery (deel 3): wachten op de pagina om te laden en anonieme functies jQuery is aantoonbaar een essentiële vaardigheid voor de moderne webontwikkelaar, en in deze korte miniserie hoop ik je de kennis te geven om er gebruik van te maken in je eigen webprojecten. In ... Lees meer
• 4: Events jQuery Tutorial (Deel 4) - Event Luisteraars jQuery Tutorial (Deel 4) - Event Luisteraars Vandaag gaan we een tandje bijsteken en laten we echt zien waar jQuery opduikt - evenementen. Als je de eerdere tutorials hebt gevolgd, zou je nu een redelijk goed begrip van de basiscode moeten hebben ... Lees meer
• Foutopsporing met Chrome-ontwikkelaarstools Uitvinden Websiteproblemen met Chrome-ontwikkelaarstools Or Firebug berekenen problemen met de website met Chrome-ontwikkelaarstools of Firebug Als u mijn jQuery-zelfstudies tot nu toe hebt gevolgd, is het mogelijk dat u al een aantal codeproblemen tegenkomt en niet bekend bent om ze te repareren. Wanneer je geconfronteerd wordt met een niet-functioneel stukje code, is het erg ... Lees meer

Een wat?

AJAX is een afkorting voor Asynchrone Javascript en XML, maar het sleutelwoord is hier asynchrone. Asynchroon verwijst naar het feit dat deze verzoeken op de achtergrond voorkomen en de browse-ervaring van de gebruiker niet onderbreken. Je hebt het waarschijnlijk nog nooit eerder opgemerkt, maar als een website zichzelf dynamisch aanpast, is de kans groot dat het AJAX gebruikt om dit te doen.

Vóór AJAX zou elke vorm van interactie met een server, of het nu gaat om het ophalen van nieuwe gegevens of het retourneren van informatie van de gebruiker, moeten zijn gedaan met behulp van een nieuwe pagina laden en omleidingen.

Vandaag gaan we kijken naar het gebruik van een externe service, Flickr - van wie we AJAX kunnen gebruiken om enkele foto's te maken met behulp van een JSON-datatype. Het maakt eigenlijk niet uit hoe Flickr de ontvangende kant van dingen implementeert, want dat is het mooie van APIs - alles wat we moeten weten is een API-URL, wat voor soort gegevens we terug zullen krijgen en hoe we deze kunnen manipuleren.

Voor verder lezen heb ik een tijdje geleden nog een tutorial geschreven over het omgaan met AJAX in WordPress voor het indienen van een contactformulier. Een les over het gebruik van AJAX in WordPress Een tutorial over het gebruiken van AJAX In WordPress AJAX is een opmerkelijke webtechnologie die ons verder heeft gebracht dan de eenvoudige “klik op link, ga naar een andere pagina” structuur van het internet 1.0. Hiermee kunnen websites inhoud dynamisch ophalen en weergeven zonder de gebruiker ... Lees meer, dus misschien wilt u dat ook controleren; het gaat om het schrijven van je eigen PHP-handler en dat integreren in de “officieel” WordPress AJAX-proces.

De AJAX-methode

Dit is het standaardformaat van een AJAX-aanvraag:

$ .ajax (type: "GET of POST", url: "API of uw PHP-handler-URL", datatype: "JSON", // afhankelijk van wat voor soort gegevens u terug wilt, maar JSON is de meest gebruikelijke gegevens: // een reeks sleutel: "waarde" paren, succes: functie (gegevens) // omgaan met een succesvolle terugkeer van gegevens, fout: functie (bericht) // behandel de fout);

Dit ziet er aanvankelijk vrij ingewikkeld uit - niet geholpen door het gebrek aan inspringing van deze code-plugin - maar u zult zien hoe gemakkelijk het is om in een echt wereldvoorbeeld te komen.

Flickr API AJAX

In dit voorbeeld pakken we de tags die bij het huidige WordPress-bericht horen en halen we aan het einde van het artikel enkele afbeeldingen op. Er is een vergelijkbaar voorbeeld in de documentatie van jQuery, maar het gebruikt een kortere weg-methode genaamd getJSON () in plaats van een volledig AJAX-formaat uit te leggen. Hoewel dit een geldige manier is om dingen te doen als je weet dat je alleen JSON-gegevens terug krijgt, heb ik het gevoel dat het leren van de werkelijke AJAX-methode belangrijker is, dus dat is hoe we het zullen doen.

Eerst een single.php en we zullen proberen een eenvoudige komma-afzonderlijke lijst van de huidige post-tags te herhalen. Meestal zou je gebruiken the_tags () om dit te doen, maar dat is niet goed, want we willen deze uiteindelijk als een variabele opslaan, terwijl the_tags () echoot ze rechtstreeks voorgeformatteerd. In plaats daarvan zullen we gebruiken get_the_tags ():

naam.","; ?>

Dit werkt goed, dus we zullen dit als volgt binnen een AJAX-verzoek naar de Flickr API-URL uitvoeren (let op, dit is een screenshot - om inspringen te behouden, is de code beschikbaar op deze PasteBin).

Op dit punt, alles wat het doet om naar de browser console uit te voeren, of een foutmelding te waarschuwen als er een is. Om iets daadwerkelijk met de geretourneerde gegevens te doen, voegt u ergens toe waar de afbeeldingen moeten worden geplaatst:

En bewerk de succes parameter van de AJAX-aanroep om te itereren over de items die worden teruggestuurd.

$ .each (data.items, functie (i, item) if (i == 3) return false; // stop wanneer we 3 $ ("# flickr") hebben. add (""););

En daar hebben we het. wij zijn aanhangen 3 items uit het geretourneerde JSON-object (de gegevens zijn geïndexeerd als nul, dus als u bij item 3 komt, staan ​​we eigenlijk bij het vierde item. Verwarrend, ik weet het. Op dat moment gebruiken we return false om uit de te springen elk() iterator).Ik heb de inhoud van de objecten die worden geretourneerd al onderzocht, dus ik weet de datastructuur en ik haal alleen een link en een IMG-verwijzing eruit. Als je geïnteresseerd bent om te weten wat er nog meer wordt teruggegeven, gooi je gewoon een console.log (item) daarin.

Dit zijn de resultaten op mijn testsite en de volledige code op deze PasteBin. Merk op dat de geretourneerde resultaten in feite junk zijn - mijn bericht bevatte de tag DIY voor een inloop kippenren, en Flickr heeft me DIY breien gegeven. Leuk. Natuurlijk is dit een van de obstakels waarmee je geconfronteerd wordt wanneer je met een API werkt en dingen automatisch doet; je zou je berichten opnieuw kunnen labelen (een aanzienlijke onderneming), het verzoek wijzigen om te vragen “allemaal” tags in plaats van “ieder” (waarschijnlijk in dit geval niets teruggeven), of bedenk een nieuw aangepast veld waaraan u een gericht sleutelwoord zou opgeven om met de API te gebruiken (waarschijnlijk de gemakkelijkste).

SEO-overwegingen

Dit is geen belangrijk punt, maar aangezien u websites moet ontwikkelen, moet dit worden vermeld: zoekmachines indexeren inhoud die niet bestaat bij het laden van pagina's, zoals alles dat via AJAX wordt gedaan. Het allerergste dat je zou kunnen doen, is om je blog volledig AJAXify te maken, zodat de startpagina slechts een iframe-achtige container is voor alle inhoud die dynamisch is geladen. Gebruik AJAX verstandig, om verbeteren de pagina-inhoud, niet als een vervanging. Of zie er ernstige gevolgen van ondervinden.

Bedankt voor het lezen en ik hoop dat ik je een aantal ideeën heb gegeven. Natuurlijk is Flickr niet de enige API die er is - alleen Google “openbare API” en je zult zeker meer dingen vinden waar je mee kunt spelen.

Volgende week is de laatste les in de jQuery Tutorial-reeks terwijl we de plug-in voor jQuery UI bekijken. Zoals altijd zijn opmerkingen en suggesties welkom; Als u een vraag heeft waarvan anderen zullen profiteren, kunt u overwegen deze op onze site Answers te plaatsen.

Ontdek meer over: jQuery, Programming, Web Development.