JQuery-zelfstudie (deel 5): AJAX ze allemaal!

Advertentie

Nu we het einde van onze jQuery mini-tutorialserie naderen, wordt het hoog tijd dat we dieper ingaan op een van de meest gebruikte functies van jQuery. Met AJAX kan een website op de achtergrond communiceren met een server zonder dat de hele pagina opnieuw moet worden geladen. Van oneindige statusstromen in Facebook-stijl tot het indienen van formuliergegevens, er zijn een miljoen verschillende situaties in het echte leven waarin deze techniek nuttig kan zijn.

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

• Inleiding: Wat is jQuery en waarom zou u erom geven? Het web interactief maken: een inleiding tot jQueryjQuery is een client-side scripting-bibliotheek 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 verder
• 1: Selectors and Basics jQuery-zelfstudie - Aan de slag: basisprincipes en selectors
  instagram viewer
  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 is dat we onze handen vuil maken met wat code en leren hoe ... Lees verder
• 2: Methoden Inleiding tot jQuery (deel 2): ​​methoden en functiesDit maakt deel uit van een doorlopende introductie voor beginners in de jQuery-webprogrammeerserie. Deel 1 behandelde de basis van jQuery over hoe u het in uw project kunt opnemen, en selectors. In deel 2 gaan we verder met ... Lees verder
• 3: Wachten op laden van pagina en anonieme functies Inleiding tot jQuery (deel 3): wachten tot de pagina is geladen en anonieme functiesjQuery is misschien wel 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 gaan maken in je eigen webprojecten. In... Lees verder
• 4: Evenementen jQuery-zelfstudie (deel 4) - Event-listenersVandaag gaan we een tandje bijsteken en echt laten zien waar jQuery schittert - evenementen. Als je de eerdere tutorials hebt gevolgd, zou je nu een redelijk goed begrip van de basiscode moeten hebben ... Lees verder
• Debuggen met Chrome Developer Tools Zoek website-problemen uit met Chrome Developer Tools of FirebugAls je mijn jQuery-tutorials tot nu toe hebt gevolgd, ben je misschien al wat codeproblemen tegengekomen en weet je niet hoe je ze moet oplossen. Wanneer het wordt geconfronteerd met een niet-functioneel stukje code, is het erg ... Lees verder

Een wat?

AJAX is een acroniem voor Asynchroon Javascript en XML, maar het sleutelwoord hier is asynchroon. Asynchroon verwijst naar het feit dat deze verzoeken op de achtergrond plaatsvinden en de browse-ervaring van de gebruiker niet onderbreken. Je hebt het waarschijnlijk nog nooit eerder opgemerkt, maar als een website zichzelf dynamisch bijwerkt, is de kans groot dat hij hiervoor AJAX gebruikt.

Voordat AJAX, elke vorm van interactie met een server, of het nu het ophalen van nieuwe gegevens of het posten van informatie van de gebruiker, zou 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 wat foto's op te halen met een JSON-datatype. Het maakt eigenlijk niet uit hoe Flickr de ontvangende kant van dingen implementeert, want dat is het mooie van API's - 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 afhandeling van AJAX in WordPress voor het indienen van een contactformulier Een tutorial over het gebruik van AJAX in WordPressAJAX is een opmerkelijke webtechnologie die ons verder heeft gebracht dan de simpele 'kliklink, ga naar een andere pagina' structuur van het internet 1.0. Hiermee kunnen websites inhoud dynamisch ophalen en weergeven zonder de gebruiker... Lees verder , dus misschien wil je dat ook eens bekijken; het houdt in dat u uw eigen PHP-handler schrijft en deze integreert in het "officiële" WordPress AJAX-proces.

De AJAX-methode

Dit is het basisformaat van een AJAX-verzoek:

$ .ajax ({type: "GET or POST", url: "API or your PHP handler URL", datatype: "JSON", // afhankelijk van wat voor soort gegevens je terug wilt, maar JSON is het meest gemeenschappelijke gegevens: {// een set sleutel: "waarde" paren}, succes: functie (gegevens) {// omgaan met een succesvolle terugkeer van gegevens}, fout: functie (bericht) {// omgaan met de fout } });

Dit ziet er in eerste instantie vrij complex uit - niet geholpen door het ontbreken van inspringing van deze codeplug-in - maar je zult zien hoe gemakkelijk het is om naar een echt wereldvoorbeeld te gaan.

Flickr API AJAX

In dit voorbeeld pakken we de tags die bij het huidige WordPress-bericht horen en halen we een aantal afbeeldingen op om aan het einde van het artikel toe te voegen. Er is een vergelijkbaar voorbeeld in de jQuery-documentatie, maar het gebruikt een snelkoppelingsmethode 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 terugkrijgt, denk ik dat het leren van de daadwerkelijke AJAX-methode belangrijker is, dus dat is hoe we het zullen doen.

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

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

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

Op dit moment doet het alles om het uit te voeren naar de browserconsole of om een ​​foutmelding te geven als die er is. Om echt iets te doen met de geretourneerde gegevens, voegt u ergens toe waar de afbeeldingen moeten worden geplaatst:

En bewerk de succes parameter van de AJAX-aanroep om te herhalen over de artikelen die worden geretourneerd.

$ .each (data.items, function (i, item) {if (i == 3) geeft false terug; // stop wanneer we 3 $ ("# flickr") hebben. append (""); });

En daar hebben we het. We zijn toevoegen 3 items van het geretourneerde JSON-object (de gegevens zijn nul geïndexeerd, dus als we bij item 3 komen, zijn we eigenlijk bij het vierde item. Verwarrend, ik weet het. Op dat moment gebruiken we false teruggeven om uit de elk() Ik heb de inhoud van de objecten die worden geretourneerd al onderzocht, dus ik ken de gegevensstructuur en ik haal alleen een link en IMG-referentie op. Als je wilt weten wat er nog meer wordt geretourneerd, gooi dan gewoon een console.log (item) daarin.

Hier zijn de resultaten op mijn testsite en de volledige code op deze PasteBin. Merk op dat de geretourneerde resultaten in feite rommel zijn - mijn bericht bevatte de tag DIY voor een inloop kippenren, en Flickr heeft me DIY-breien gegeven. Leuk. Dit is natuurlijk een van de hindernissen die je tegenkomt wanneer je met een API werkt en dingen automatisch doet; je zou je berichten opnieuw kunnen taggen (een aanzienlijke onderneming), het verzoek wijzigen om te vragen naar "alle" tags in plaats van "elke" (zal waarschijnlijk terugkeren) niets in dit geval), of bedenk een nieuw aangepast veld waarnaar u een gericht zoekwoord zou specificeren om met de API te gebruiken (waarschijnlijk de gemakkelijkst).

SEO-overwegingen

Dit is geen belangrijk punt, maar aangezien u bezig bent met het ontwikkelen van websites, zou het dat wel moeten zijn vermeld: zoekmachines indexeren geen inhoud die niet bestaat bij het laden van de pagina, zoals alles wat is gedaan via AJAX. Het absoluut slechtste wat je zou kunnen doen, is om je blog volledig AJAXify, zodat de startpagina slechts een iframe-achtige container was voor alle inhoud die dynamisch wordt geladen. Gebruik AJAX verstandig om verbeteren de pagina-inhoud, niet als een vervanging. Of geconfronteerd worden met ernstige gevolgen.

Bedankt voor het lezen en ik hoop dat ik je wat ideeën heb gegeven. Natuurlijk is Flickr niet de enige API die er is - alleen Google "openbare API"En u zult zeker meer dingen vinden waarmee u kunt spelen.

Volgende week is de laatste les in de jQuery Tutorial-serie als we de jQuery UI-plug-in bekijken. Zoals altijd zijn opmerkingen en suggesties welkom; Als u een vraag heeft waar anderen baat bij hebben, overweeg dan om deze op onze Answers-site te plaatsen.