A Primer on Ajax in het WordPress Frontend het proces begrijpen

Een paar artikelen geleden gaf ik een inleiding op Ajax in het WordPress-dashboard, maar de opmerkingen leidden tot een discussie voor precies hoe dit te doen op de WordPress-frontend (en hoe dit op de juiste manier te doen).

Ik raad ten zeerste aan om de vorige serie te herzien om een idee te krijgen waar we naartoe gaan, maar in dit artikel geven we een heel kort overzicht van wat Ajax is, hoe het werkt, hoe je het op de voorgrond kunt instellen en inzicht in de haken die WordPress biedt.

In het volgende artikel bouwen we eigenlijk een klein project dat de theorie in praktijk brengt. We lopen de broncode door en we zorgen er ook voor dat deze beschikbaar is op GitHub.

In de tussentijd gaan we aan de slag met het beoordelen van Ajax en de faciliteiten die WordPress ons biedt.

Een opfrissing van Ajax

Op dit moment is Ajax niet nieuw. In feite is het moeilijk om een moderne website en / of webtoepassing te vinden die deze nog niet bevat, dus ik ga deze kort en krachtig houden.

Over het algemeen is Ajax wat ons in staat stelt om gedeeltelijke pagina-updates uit te voeren.

Dit betekent dat we een onderdeel (of delen) van een pagina kunnen bijwerken zonder dat een gebruiker de hele pagina hoeft te vernieuwen. De levenscyclus gaat meestal ongeveer als volgt:

Een gebruiker activeert een actie op de website. Misschien klikken ze op een knop, klikken ze op een link of iets dergelijks.
Zonder de vernieuwing van de pagina, worden de gegevens naar de server verzonden.
De server verwerkt de gegevens en verzendt gegevens terug.
De website verwerkt vervolgens de geretourneerde gegevens - het antwoord - en werkt de pagina dienovereenkomstig bij.

Relatief eenvoudig te begrijpen, toch?

Ajax in WordPress

Om dit proces in WordPress te begrijpen, moeten we een paar ideeën bekijken die concreter zijn dan 'de gebruiker doet iets' en 'werkt de pagina dienovereenkomstig bij'.

Met dat gezegd, zijn de meesten van ons bekend met de acties, filters en het algemene haaksysteem van WordPress, ahum, aansluiten bij de levenscyclus van de WordPress-pagina om onze eigen functionaliteit te introduceren of om gegevens te verwerken voordat deze wordt weergegeven. Als dit niet het geval is, raadpleegt u de WordPress-hooks - zowel acties als filters - omdat deze reeks ervan uitgaat dat u vertrouwd bent met zowel.

Introductie van Ajax in WordPress verloopt in drie stappen. Het is letterlijk een recept dat elke keer dat je een asynchrone actie wilt introduceren, kan worden gevolgd.

Voordat ik naar dit recept ga kijken, wil ik eerst een aantal termen definiëren voor de beginners en voor degenen onder u die net bekend zijn met Ajax:

Evenement - Dit betekent dat er is iets gebeurd. Letterlijk kan dit betekenen dat de gebruiker het formaat van het browservenster heeft gewijzigd, dat de gebruiker iets in een invoerveld heeft getypt of dat de gebruiker op een element heeft geklikt.
Verzoek - Dit is wat de browser naar de server verzendt. Dit kan een set gegevens bevatten die de server moet verwerken; anders kan dit alleen maar een signaal zijn dat de gebruiker een gebeurtenis heeft geactiveerd.
Event-handler - Dit is een functie die reageert op wanneer er is iets gebeurd. Dit is meestal een functie die zich op de server bevindt en de gegevens verwerkt die worden verzonden zodra de bovenstaande gebeurtenis heeft plaatsgevonden.
antwoord - Dit zijn de gegevens die de gebeurtenishandler terugstuurt naar de browser en die wordt gebruikt om de pagina bij te werken.

Met dat gezegd, hier is het recept dat wordt gebruikt om een Ajax-verzoek te formuleren in de context van WordPress (zowel in het dashboard als in thema's of op de frontend):

Voer een element in waarop de gebruiker klikt en stel een gebeurtenishandler in met JavaScript om het verzoek te verzenden.
Definieer de gebeurtenishandler in uw functions.php bestand als u werkt met een thema of in uw plugin.php bestand als u met een plug-in werkt.
Schrijf JavaScript om het antwoord van de gebeurtenishandler af te handelen.

Vereiste acties en filters

Voor degenen onder u die mijn vorige serie over Ajax in het Dashboard hebben gelezen of die bekend zijn met Ajax in WordPress, bent u waarschijnlijk al bekend met de bestanden en hooks die nodig zijn voor de implementatie van Ajax.

Concreet:

ajaxurl is de URL die wordt aangeboden door WordPress waarnaar we ons verzoek sturen.
wp_ajax_my_action is de haak die we gebruiken om onze event-handler aan te sluiten.

Voor een volledige opfriscursus, moet je het project uitchecken op GitHub.

Het implementeren van Ajax op de publieke kant lijkt erg op elkaar, maar het vereist twee dingen:

Importeren van de Ajax-bibliotheek van WordPress
Twee haken - een daarvan is dezelfde als hierboven vermeld.

In het volgende bericht besteden we aandacht aan het importeren van de Ajax-bibliotheek van WordPress en hoe je hiervan kunt profiteren, maar het belangrijkste om te begrijpen in de rest van de post zijn de twee haken die nodig zijn voor het instellen van onze Ajax-bibliotheek. event handlers.

De `wp_ajax_my_action` Haak

De wp_ajax_my_action haak is dezelfde die we gebruiken wanneer we met Ajax werken in het Dashboard. Hiermee kunnen we Ajax-ingeschakelde acties bieden aan gebruikers die zijn ingelogd op WordPress.

Dit betekent dat je zou gebruiken deze hook als u Ajax-functionaliteit wilt introduceren voor gebruikers die beheerders, bewerkers, contribuanten of leden van een site zijn.

Bedenk dat je het niet declareert wp_ajax_my_action precies zoals het is. In plaats daarvan, het achtervoegsel 'my_action'moet worden vervangen door uw methode naam. Dus als je een functie hebt met de handtekening:

 function my_custom_handler ()  // stop my_custom_handler

Dan zou de bijbehorende haak er eigenlijk zo uitzien:

 function my_custom_handler ()  // end my_custom_handler add_action ('wp_ajax_my_custom_handler', 'my_custom_handler');

Het is natuurlijk niet altijd ideaal om de functionaliteit te beperken tot gebruikers die op de website zijn ingelogd.

De `wp_ajax_nopriv_my_action` Haak

De wp_ajax_nopriv_my_action is heel vergelijkbaar met de wp_ajax_my_action haak behalve één ding:

Je zou gebruiken deze hook als je Ajax-functionaliteit aan gebruikers wilt introduceren zonder dat ze zich op de site hoeven aan te melden.

Het functioneert op exact dezelfde manier en is onderhevig aan exact dezelfde regels, behalve zijn "doelgroep", om zo te zeggen. Dit betekent dat je je functies als volgt kunt definiëren:

 function my_custom_handler ()  // end theme_custom_handler add_action ('wp_ajax_nopriv_my_custom_handler', 'my_custom_handler');

Eenvoudig, toch?

Maar er is een beveiligingsprobleem hier: omdat u bepaalde functies opent voor gebruikers die niet zijn aangemeld, zullen belangrijke beveiligingsfuncties zoals nonce-waarden niet noodzakelijkerwijs werken, dus u moet heel selectief zijn over wat u doet ' gaan mensen toestaan om te doen als ze niet zijn ingelogd op de site.

Als algemene vuistregel, ik zeg altijd dat gebruikers die niet zijn ingelogd op de site geen toegang mogen hebben tot het wijzigen - dat wil zeggen, wijzigen, bijwerken, verwijderen of toevoegen - van gegevens aan de site. Natuurlijk, het is een beetje restrictief, maar dit is een kwestie van de gegevens op uw blog, site of applicatie.

Waarom zou je dat opofferen?

Een werkvoorbeeld

In het volgende bericht gaan we een werkvoorbeeld bekijken waarmee gebruikers die op de website zijn ingelogd berichten kunnen markeren die ze hebben gelezen.

Zorg er ondertussen voor dat je de volgende artikelen inhaalt, want ze helpen je om het komende bericht te verbeteren:

WordPress Filterreferentie
WordPress Action Reference
Ajax in Plugins
Een primer op Ajax in het WordPress-dashboard

Code