Coma iniziare a Sviluppare in AJAX con WordPress

Bisogna ammetterlo, siamo nel 2015 e su wpAndMore non è ancora apparso un articolo che mostra come utilizzare JavaScript all'interno del nostro CMS preferito. Oggi abbiamo deciso di cambiare le cose, oggi si parla di Ajax!

Quello che voglio fare in questo articolo non è mostrarti per filo e per segno come poter creare un plugin WordPress che ti permette di utilizzare diversi effetti Ajax, a dire il vero neanche andremo a spiegare  come sia possibile crearne uno.

Semplicemente desidero porre chiarezza su uno dei metodi più confusionari di WordPress, la creazione di chiamate AJAX.

Allo stesso tempo, se ti interessa approfondire maggiormente le tue conoscenze sulla creazione di un plugin, non mi resta che consigliarti la nostra serie all’interno della quale ti insegnamo come potrai creare uno stream di tweet all’interno di WordPress utilizzando le ultime API.

Leggendo questo articolo sarai in grado di farti chiarezza su una delle caratteristiche più strane nello sviluppo WordPress e diventerai padrone di una tecnologia che ad oggi rende dinamici la maggior parte dei siti web.

Ajax viene infatti utilizzato in un gran numero di siti web, se hai un account Facebook sai benissimo di cosa sto parlando. Puoi navigare da un commento a un altro, ricevere notifiche, comunicare con i tuoi amici… Senza mai dover ricaricare l’intera pagina.

Forse ad oggi non ci fai nemmeno caso, per te è normale che porzioni del sito web si possano modificare senza il bisogno di caricare nuovamente la pagina, ma ti assicuro che fino a qualche anno fa questo era veramente difficile da realizzare!

Per fortuna che un insieme di tecnologie, compreso il linguaggio JavaScript, sono state unite per collaborare alla realizzazione di questo effetto dando vita all’acronimo Ajax.

Quattro lettere, infinite possibilità

Praticamente il significato di questa parola è: Asynchronous JavaScript and XML. Come puoi vedere questo coinvolge il già citato linguaggio JavaScript e anche del XML; anche se quest’ultimo ad oggi è stato sostituito da JSON, un formato che hai scoperto qualche articolo fa.

Nonostante questo piccolo aggiornamento, Ajax funziona egregiamente per realizzare degli effetti di modifiche dal vivo e anche WordPress ne fa largo uso, basta pensare al funzionamento del Customizer per avere un veloce feedback.

Unire questa tecnica alla piattaforma ci permetterà di creare dei campi di ricerca interattivi che, un po’ come Google, possono suggerirti la parola che stai cercando; creare finestre modali che si aprono alla pressione di un link o ottenere gli ultimi messaggi all’interno di un determinato social network.

Se hai provato il plugin Front-end Editor sviluppato fino a qualche tempo fa (anche se ad oggi non più mantenuto) ti sarai sicuramente accorto che grazie ad Ajax era possibile scrivere il nostro intero articolo all’interno delle pagine del proprio tema, forse non lo sapevi ma stavi proprio utilizzando la stessa tecnologia che stiamo scoprendo in questo articolo!

Ovviamente per essere in grado di sfruttare al meglio questa potenzialità all’interno della nostra piattaforma preferita avrai bisogno di conoscere il linguaggio JavaScript (cosa che puoi approfondire con il nostro corso gratuito), ma in questo articolo cercherò di spiegarti le cose sorvolando alcune caratteristiche base di questo linguaggio e andremo subito a vedere un po’ di codice che ci permetterà di comprendere come sia possibile gestire una chiamata Ajax.

Gestire le chiamate Ajax con jQuery

Anche se ho aperto questo articolo dicendo che quest’oggi saremmo andati molto veloci, allo stesso tempo non vorrei averti dato l’impressione di correre troppo e di tralasciare alcuni aspetti essenziali per il tuo apprendimento. Quindi per assicurarmi che tutto stia andando per il verso giusto devo porti la seguente domanda e introdurre una piccola spiegazione, spero che tu non te la prenderai a male per questo.

Ti ricordi il funzionamento base di Internet, vero?

Praticamente tutto Internet si basa sul funzionamento di una telefonata.

Da una parte troviamo il client, un computer come il tuo, all’interno del quale viene eseguito un browser che richiede una pagina web. Da questo computer parte una telefonata alla ricerca del server, un computer sempre connesso ad Internet, che contiene la pagina cercata e che la restituisce come risposta alla telefonata. Come dicevo prima, queste comunicazioni hanno sempre richiesto il caricamento della pagina intera, ma grazie ad Ajax possiamo dire al browser di ricaricare soltanto delle porzioni di essa senza farci appesantire da tutto il contenuto.

Pensa come è utile questa funzionalità quando ci troviamo a commentare un articolo o, meglio ancora, uno status su Facebook. Questo tipo di implementazione Ajax significa poter inserire la nostra risposta mentre vediamo apparire i messaggi dei nostri amici e delle altre persone che seguono la discussione, sicuramente questo ci fa capire che c’è attività e poter inviare le nostre opinioni senza dover ricaricare la pagina e ci fa sentire ancora di più parte attiva della conversazione.

Ho scelto di analizzare questa trasformazione nell’esperienza utente perché diventa sempre più essenziale comprendere il suo funzionamento, anche se il nostro unico scopo è quello di modificare un plugin che non si comporta come dovrebbe 😉

Ovviamente il metalinguaggio XML non è più un componente integrante (anche se ormai viene mantenuto all’interno dell’acronimo per non confondere le idee), questa tecnica fa molto affidamento al codice JavaScript che possiamo inserire.

Sicuramente avrei potuto mostrarti il funzionamento andando a scrivere del codice vanilla (ovvero del codice scritto con lo stesso linguaggio di programmazione) ma dato che WordPress ne fa largo uso e che con il suo utilizzo semplifichiamo moltissimo la sintassi, nel prossimo esempio vedremo come sia possibile creare una chiamata AJAX con jQuery.

Se sei curioso di scoprire come sia invece possibile creare una chiamata AJAX con del codice JavaScript ti aspetto su html5AndMore dato che su quel sito pubblichiamo molto più contenuto dedicato allo sviluppo frontend e questo argomento sarà sicuramente trattato nelle prossime settimane.

Ovviamente non mi aspetto che tu capisca tutto il codice che ti ho appena presentato in un colpo solo, ma almento la voce POST dovrebbe averti ricordato qualcosa… Ancora niente? Sicuro?

Tornando ad introdurre un po’ di teoria, il protocollo HTTP si basa su otto richieste differenti dove le più interessanti sono praticamente la richiesta GET e quella POST. La prima è quella che vediamo quotidianamente all’interno di moltissimi siti web compreso il backend di WordPress e ci permette di passare dei dati da una parte all’altra dell’applicazione andando a modificare la URL. Il metodo POST invece è dedicato all’invio di informazioni dalla pagina in cui siamo all’altra utilizzando generalmente un modulo.

E in questo modo ti ho appena spiegato il parametro type usato all’interno della nostra richiesta Ajax che prende il nome di jQuery.ajax ({ }), adesso sai come si scrive una chiamata di questo tipo.

In questo esempio di codice stiamo usando jQuery al posto del $ perché nello script non ho provveduto ad inserire il codice per il noConflict() che ci permette di far convivere questo con altri framework JavaScript, cosa molto probabile all’interno di WordPress.

Un altro parametro che dovrai impostare all’interno di questa chiamata è url che ti permette di definire la pagina che dovrà processare i dati che verranno inviati, proprio come accade all’interno del modulo di commenti per esempio.

All’interno di questo CMS dovrai sempre puntare alla pagina admin-ajax.php perché è quella all’interno della quale si possono trovare tutti gli endpoint che saranno in grado di gestire il contenuto inviato all’interno del parametro data. Infatti, all’interno del parametro data saranno presenti tutte le informazioni che il nostro utente avrà inviato.

Con il rischio di ripetermi voglio farti un altro esempio perché ho proprio paura di perderti in questo passaggio, se ti senti sicuro delle tue conoscenze salta pure un po’ più avanti.

Quando ti ho detto che Internet si basa sulle telefonate, non intendevo dire che una volta che il server ha risposto al client la telefonata termina, entrambi possono continuare a scambiarsi informazioni. Ad esempio, se abbiamo un modulo di contatti all’interno della pagina che il browser avrà richiesto, il nostro utente sarà in grado di compilarlo e di inviarlo (grazie al metodo POST) a WordPress dove verranno processate le informazioni e salvate all’interno di un database.

Con il classico linguaggio PHP avremmo dovuto assistere ad un caricamento della pagina completo, ma grazie ad Ajax siamo in grado di mandare queste informazioni, salvarle all’interno di un database e di ottenere un messaggio di successo senza neanche dover attendere un nuovo caricamento.

Ma allora cosa fa PHP?

Ti ho appena spiegato che cosa fa il PHP all’interno di questo scambio dati, praticamente è la parte che va a prendere le informazioni contenute nel server per poi mostrarle nella porzione del sito che abbiamo appositamente sviluppato.

Nell’esempio di codice che ti ho mostrato precedentemente la parte che mette in comunicazione il codice JavaScript con il linguaggio PHP con questa stringa: action: wpam_get_time. Praticamente con questo singolo parametro diciamo a WordPress di creare un Hook in grado di gestire, tramite le azioni, i dati che vengono passati dal nostro codice.

Hai notato che nella frase precedente ho inserito le parole Hook e azione?

Se sviluppi con WordPress da diverso tempo dovrebbe aver richiamato nella tua mente un ricordo, relativo agli Action Hook. Può darsi che tu non conosca questi elementi oppure hai bisogno di una piccola rinfrescata, non preoccuparti perché qua su wpAndMore abbiamo già pubblicato un paio di articoli relativi a questo argomento.

Praticamente grazie al codice JavaScript siamo in grado di creare degli Action Hook personalizzati e dedicati soltanto al tipo di informazioni che vengono inviate.

Il codice commentato che trovi qua sopra è tutto quello che ti serve per rispondere al precedente script jQuery e mostrare la data del tuo server all’interno di una finestra modale.

La parte che ti potrebbe confondere di più rispetto al codice che ti ho appena mostrato, o almeno quella che confonde la maggior parte degli sviluppatori WordPress è: come mai stiamo usando due Action Hook?

Come dicevo prima, queste Action Hook vengono creati automaticamente da WordPress grazie al parametro action passato dal nostro codice JavaScript, ma allo stesso tempo vediamo che il nome di queste action viene generato automaticamente in base al nome di questa azione.

Il problema è che vengono generate due azioni, perché?

Nel codice precedente trovi infatti wp_ajax_wpam_get_time e wp_ajax_nopriv_wpam_get_time, ma dove è la differenza tra queste due? Ebbene per farla semplice, la prima Action è dedicata alle chiamate Ajax che riguardano il backend della nostra piattaforma mentre la seconda ci permette di creare chiamate Ajax che verranno sfruttate anche nel frontend della nostra applicazione.

A seconda delle funzionalità che stai creando non avrai bisogno di utilizzarle sempre entrambe, anche perché la seconda richiede delle accortezze di sicurezza maggiori, ma nell’esempio che ti ho appena fatto sono state inserite entrambe per presentare al meglio questo argomento.

Nella parte successiva del codice trovi la funzione date() che prende la data del tuo server e la passa nuovamente allo script JavaScript che ti ho mostrato precedentemente. Successiva a questa troviamo la funzione die() che serve invece ad uscire dalla funzione e terminare l’esecuzione del codice PHP sul server, giusto per ottimizzare le nostre risorse.

Prima di passare alla parte conclusiva dell’articolo vorrei porre la tua attenzione su un fatto molto importante, ovvero l’utilizzo della funzione echo.

Dato che crei le tue funzioni in PHP sarai a conoscenza del parametro return che viene usato molto più spesso all’interno di queste ma in questo caso specifico abbiamo dovuto utilizzare echo perché altrimenti lo script JavaScript non sarebbe stato in grado di leggere le informazioni provenienti dal server.

Conclusioni

Anche se questo non è stato un articolo molto tecnico, dato che abbiamo condiviso soltanto un paio di blocchi di codice, la mia intenzione era semplicemente di introdurti a questi concetti e trattare uno degli argomenti più spinosi nella gestione delle chiamate Ajax all’interno di WordPress, ovvero la creazione automatica di due Hook distinti.

Capire fin da ora questa caratteristica ti permetterà di lavorare meglio con questa tecnologia.

Al tempo stesso ti ricordo che a breve usciranno altri articoli che trattano questo argomento più nello specifico in modo tale da permetterti di capire meglio, con esempi pratici, come potrai sfruttare il potere che adesso hai tra le mani.

Nel frattempo se hai delle curiosità riguardo alcuni effetti Ajax che hai visto attivi all’interno di qualche sito web ti invito ad utilizzare la sezione dei commenti, in questo modo aiuterai anche noi a comprendere in quali campi è più interessante l’utilizzo di queste tecnologie e potremmo produrre articoli ancora più interessanti.

 

Lascia il tuo Pensiero

8 Responses to “Coma iniziare a Sviluppare in AJAX con WordPress”

  1. wido

    Un buon uso di ajax con WordPress dovrebbe comunque includere anche i nonce onde evitare che si possano effettuare chiamate ajax esterne. Sbaglio? Inoltre non sarebbe consigliabile l’uso di wp_die() ? O in questo caso non fa alcuna differenza?

    Rispondi
    • Andrea Barghigiani

      Ciao Wido,

      come scritto in un recente articolo l’uso dei nonce è essenziale quando si passano informazioni da una pagina all’altra quindi anche nel caso di Ajax. Questo articolo è stato creato per introdurre lo sviluppatore a questo argomento e non è consigliabile utilizzare il codice mostrato; in fin dei conti la cosa che mi premeva di più era quello di far capire come utilizzare le due Action Hook e quali fossero le sue funzioni 🙂

      Per quanto riguarda wp_die() diciamo che il suggerimento è corretto soltanto quando vogliamo restituire un messaggio HTML in uscita, altrimenti se vogliamo uscire dallo script PHP basta anche die() o ancora meglio exit; che praticamente è la sintassi moderna e che svolge la stessa funzione.

      Spero di aver risolto i tuoi dubbi wido ma se hai bisogno di approfondire non esitare a chiedere 🙂

      Rispondi
  2. Luigi

    Altro articolo molto interessante:) una piccola domanda, che rapporto c’è tra la tecnologia ajax e le reset api? chiedo questo perchè vado un pò in confusione, visto che anche la tecnologia delle rest api fa uso di endpoint e di oggetti json.

    Rispondi
    • Andrea Barghigiani

      Ciao Luigi, diciamo che le differenze stanno alla base delle due tecnologie che sono distinte ma questo non ti evita di utilizzarle entrambe.

      Diciamo che con le rest puoi configurare la tua installazione per rispondere a determinati endpoint (diversi da quelli Ajax ma dedicati alle REST API e che puntano a file e codice PHP. non JavaScript) e in una parte distinta del tuo sito web le utilizzi per applicare degli effetti Ajax (al momento mi viene in mente un filtro/ricerca) per personalizzare dal vivo i contenuti della pagina.

      Non è necessario costruire un’applicazione mobile per sftuttare al tempo stesso le tecnologie.

      Rispondi pure se hai bisogno di ulteriore aiuto.

      Rispondi