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 stuk code, is het erg ... Lees meer
Een wat?
AJAX is een afkorting voor Asynchronous Javascript and XML, maar het sleutelwoord hier is asynchroon . 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 AJAX dit doet.
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 API's - alles wat we moeten weten is een API-URL, wat voor soort gegevens we terug zullen krijgen en hoe we het 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 A Tutorial over het gebruik van AJAX in WordPress A Tutorial over het gebruiken van AJAX In WordPress AJAX is een opmerkelijke webtechnologie die ons verder heeft gebracht dan de eenvoudige kliklink, ga naar een andere pagina "structure of The 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 het "officiële" WordPress AJAX-proces.
De AJAX-methode
Hier is het basisformaat van een AJAX-verzoek:
$.ajax({ type: "GET or POST", url: "API or your PHP handler URL ", datatype:"JSON", // depending on what kind of data you want back, but JSON is the most common data: { //a set of key:"value" pairs }, success:function(data){ //handle a successful return of data }, error:function(message){ //handle the error } }); Dit ziet er aanvankelijk vrij ingewikkeld uit - niet geholpen door het gebrek aan inspringing van deze code-invoegtoepassing - 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 sneltoetsmethode met de naam getJSON () in plaats van een volledige AJAX-indeling uit te leggen. Hoewel dit een geldige manier is om dingen te doen als je weet dat je alleen JSON-gegevens terugkrijgt, heb ik het gevoel dat het leren van de werkelijke AJAX-methode belangrijker is, dus dat is hoe we het zullen doen.
Eerst één op single.php en we proberen een eenvoudige komma-afzonderlijke lijst van de huidige post-tags uit te lezen. Meestal gebruikt u de_tags () om dit te doen, maar dat is niet goed, want we willen deze uiteindelijk opslaan als een variabele, terwijl the_tags () deze rechtstreeks vooraf opgemaakt echoot. In plaats daarvan gebruiken we get_the_tags ():
name.", "; }?> 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 succesparameter van de AJAX-aanroep om de teruggestuurde items te herhalen.
$.each(data.items, function(i, item){ if(i==3) return false; // stop when we have 3 $("#flickr").append(" 
"); }); En daar hebben we het. We voegen 3 items van het geretourneerde JSON-object toe (de gegevens zijn nul geïndexeerd, dus als u bij item 3 komt, bevinden we ons eigenlijk bij het vierde item.) Verwarring, ik weet het. Op dat moment gebruiken we return false om eruit te springen van de each () 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 wilt weten wat er nog meer wordt teruggestuurd, gooi je gewoon een console.log (item) erin.
Dit 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 walk-in chicken run, 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 taggen (een aanzienlijke onderneming), het verzoek wijzigen om te vragen om "alle" tags in plaats van "any" (waarschijnlijk niets teruggeven in dit geval), of een nieuw aangepast veld bedenken waarop je zou een gericht sleutelwoord specificeren 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 de inhoud van de pagina te verbeteren, niet als 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 zal de laatste les zijn 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.