Technologie Gadgets, SEO Tipps, Geld Verdienen mit WEB!

Cos’è AJAX e come usarlo in WordPress (A…

Cos'è AJAX e come usarlo in WordPress (A...

AJAX è una potente tecnica utilizzata dagli sviluppatori web per creare contenuti dinamici e interattivi sulle pagine web. Con AJAX, puoi aggiornare parti specifiche della pagina Web senza aggiornare l’intera pagina. Ciò si traduce in un’esperienza utente senza soluzione di continuità per i visitatori del tuo sito web.

Fondamentalmente, AJAX combina diverse tecnologie, tra cui JavaScript, XML e l’oggetto XMLHttpRequest. Queste tecnologie lavorano insieme per inviare e ricevere dati tra il browser web e il server in modo asincrono.

In questo post del blog esploreremo AJAX in modo più dettagliato, incluso come funziona e perché è così utile in WordPress. Forniremo inoltre istruzioni dettagliate sull’implementazione di AJAX sul tuo sito Web WordPress per migliorare la funzionalità del tuo sito.

Breve panoramica di AJAX

AJAX sta per Asynchronous JavaScript And XML – una tecnologia che ti consente di richiedere il server in modo asincrono e apportare modifiche alle tue pagine senza ricaricarle. Lo script AJAX richiede al server di restituire alcuni dati e quindi modifica le pagine web con i dati ottenuti.

Ad esempio, immagina un menu a discesa in cui selezioni la data dell’appuntamento e un altro elenco a discesa che mostra dinamicamente le ore disponibili per la prenotazione. Attraverso uno script AJAX, al server sono state richieste le ore disponibili per selezionare il menu a tendina del trattamento.

AJAX e API REST

AJAX e API REST vengono spesso confrontate perché vengono utilizzate nello sviluppo web per migliorare l’esperienza dell’utente. Vediamo le loro principali differenze!

AJAX API REST
Un insieme di tecnologie per un’esperienza web più ricca Uno stile di architettura per la gestione delle richieste HTTP
Schermata degli aggiornamenti in modo asincrono Ruota attorno all’uso delle risorse
Può inviare richieste RESTful È possibile accedervi da un client AJAX

Come funziona AJAX?

AJAX è un insieme di tecniche di sviluppo web che consentono la modalità asincrona scambio di dati tra un browser web e un server web. Consente alle pagine Web di aggiornarsi dinamicamente senza richiedere il ricaricamento dell’intera pagina.

Tecnicamente, AJAX funziona sfruttando una combinazione di JavaScript, XML (anche se al giorno d’oggi altri formati come JSON vengono utilizzati anche) e il XMLHttpRequest oggetto. Ecco come funziona in genere:

  • Attivatore di eventi: Un evento, ad esempio il clic su un pulsante o l’invio di un modulo, attiva una richiesta AJAX.
  • Oggetto XMLHttpRequest: JavaScript crea un’istanza dell’oggetto XMLHttpRequest, che è l’intermediario tra il browser e il server.
  • Richiesta asincrona: L’oggetto XMLHttpRequest (passaggio 2) invia una richiesta asincrona al server senza interrompere o bloccare l’interazione dell’utente con la pagina web.
  • Comunicazione del server: La richiesta viene inviata al server, che la elabora e genera una risposta.
  • Recupero dei dati: Una volta completata l’elaborazione, il server invia la risposta al browser.
  • Aggiornamento dinamico: Utilizzando JavaScript, il browser manipola il Document Object Model (DOM) per aggiornare il contenuto della pagina Web in base alla risposta ricevuta senza ricaricare l’intera pagina.

Utilizzando AJAX, gli sviluppatori web possono creare applicazioni web più interattive e reattive. AJAX consente aggiornamenti in tempo reale, caricamento dinamico dei contenuti, convalida dei moduli, ecc., migliorando l’esperienza complessiva dell’utente.

Facilita interazioni web più fluide, veloci ed efficienti riducendo la necessità di ricaricare l’intera pagina e consentendo uno scambio di dati senza interruzioni tra il browser e il server.

Perché AJAX è utile?

AJAX è utile in diverse situazioni. Esploriamo alcuni di essi di seguito:

Usa il caso n. 1

AJAX consente agli utenti di WordPress di caricare i contenuti in modo dinamico senza aggiornare l’intera pagina, come viene anche chiamato Caricamento contenuto dinamico.

Esempio: immagina di avere un blog con a “Carica altro” pulsante alla fine della pagina. Utilizzando AJAX, puoi recuperare ulteriori post del blog dal server e aggiungerli al contenuto esistente quando l’utente fa clic sul pulsante.

Usa il caso n. 2

AJAX consente aggiornamenti in tempo reale sui siti web WordPress. Un esempio è l’opzione di chat dal vivo che vedi spesso sui siti Web WordPress.

Esempio: Prendi in considerazione una funzionalità di chat dal vivo in cui gli utenti possono inviare e ricevere messaggi istantaneamente. Con AJAX i messaggi possono essere inviati al server e visualizzati sull’interfaccia di chat in tempo reale senza ricaricare l’intera pagina.

Usa il caso n. 3

AJAX migliora invio e convalida del modulo in WordPress. Ciò consente un feedback immediato agli utenti se hanno commesso errori senza ricaricare la pagina. Fornisce un’esperienza di invio dei moduli più fluida ed efficiente.

Esempio: Supponiamo che tu abbia un modulo di contatto o di lead generation sul tuo sito web. Utilizzando AJAX, puoi convalidare gli input del modulo sul lato client prima di inviare i dati al server.

Usa il caso n. 4

AJAX salva automaticamente le bozze in WordPress. Ciò aiuta a prevenire la perdita di dati e fornisce un’esperienza di scrittura senza interruzioni per gli utenti di WordPress.

Esempio: Quando si scrive un post sul blog o si crea una pagina, AJAX può inviare periodicamente il contenuto al server in background, salvandolo come bozza senza richiedere il salvataggio manuale o il ricaricamento della pagina.

Gli utenti possono creare siti Web più dinamici, interattivi e reattivi sfruttando le tecniche AJAX nello sviluppo di WordPress.

Utilizzo di AJAX in WordPress

WordPress supporta AJAX in modo nativo. Puoi vedere “admin-ajax.php” dentro il cartella wp-admin. Inizialmente è stato creato per tutte le funzioni che effettuano richieste AJAX dall’amministratore di WordPress. Viene utilizzato anche per la parte pubblica del web.

Tutte le richieste AJAX di WordPress devono passare attraverso uno script PHP. In altre parole, admin-ajax.php dovrebbe essere il file PHP attraverso il quale viene richiamata un’azione che restituisce contenuto.

Nel 2013, WordPress ha introdotto l’API WordPress Heartbeat che forniva diverse funzionalità importanti, come la funzione di salvataggio automatico, la scadenza dell’accesso e l’avviso di blocco dei post mentre un altro utente scrive o modifica un post WordPress.

Blocco postale

Quando provi a modificare un post su cui sta già lavorando un altro utente, verrà visualizzato un avviso pop-up sulla situazione. Sono tre le azioni visibili. Tutti i post, AnteprimaE Rilevare.

Le funzionalità sopra menzionate sono rese possibili grazie all’API Heartbeat di WordPress, che collega il server e il browser per comunicazioni e risposte appropriate.

L’API Heartbeat di WordPress genera richieste di comunicazione con il server e attiva eventi alla ricezione di dati/risposte. Questo di solito aumenta il carico sul server e alla fine rallenta l’amministratore di WordPress.

Esempio

Accedo alla dashboard di WordPress e inizio a scrivere un post. Successivamente, apro la scheda per diversi minuti e sfoglio altre schede. La dashboard è ancora collegata e puoi vedere che admin-ajax invia continuamente richieste.

Secondo il ticket sopra menzionato, admin-ajax.php in WordPress genera richieste ogni 15 secondi. La richiesta può essere qualsiasi comunicazione con il server.

Le richieste AJAX in WordPress sono gestite da admin-ajax.php file situato in cartella wp-admin. È il file designato sia per le funzionalità AJAX back-end che per quelle rivolte all’utente.

Per avviare una richiesta AJAX, è necessario includere un parametro di azione con i dati della richiesta utilizzando il file OTTENERE O INVIARE metodo.

Questo parametro di azione determina l’hook specifico da Utilizzare innescato nel admin-ajax.php file.

I ganci hanno un nome wp_ajax_my_action E wp_ajax_nopriv_my_actionDove mia_azione corrisponde al valore del parametro di azione nella richiesta GET o POST.

Vediamo come possiamo usarlo in WordPress. Se sei nuovo su WordPress o non sei esperto di tecnologia, potrebbe essere difficile per te capirlo. È importante avere una buona conoscenza di JavaScript (jQuery è sufficiente) e conoscenza di HTML, CSS e PHP.

  • Usa il wp_enqueue_script() funzione per accodare il file JavaScript responsabile della gestione delle richieste AJAX. Assicurati di accodarlo in modo appropriato, ad esempio nel tuo tema funzioni.php o un file plug-in personalizzato.
  • Utilizza il wp_localize_script() funzione a localizzare lo script AJAX. Ciò ti consente di passare i dati dal tuo codice PHP allo script, rendendolo accessibile in JavaScript.
  • Usa WordPress wp_send_json() O wp_send_json_success() E wp_send_json_error() funzioni per inviare i dati di risposta al JavaScript lato client. Nella risposta è possibile includere i dati desiderati o un messaggio di errore.
  • Puoi usare il jQuery.ajax() metodo o abbreviazione jQuery.post() O jQuery.get() metodi per inviare la richiesta AJAX al server.

Questi esempi dimostrano come AJAX possa essere utilizzato in diversi scenari all’interno di WordPress per migliorare le interazioni dell’utente, migliorare le prestazioni e fornire un’esperienza utente fluida.

Analisi delle richieste su admin-ajax.php

Le richieste di plugin causano molti problemi con admin-ajax.php in WordPress. Questi plugin possono rallentare l’amministratore di WordPress richiedendo funzionalità specifiche come popup o aggiornamenti dei contatori di condivisione sui social. Tuttavia, non tutte le richieste sovraccaricheranno il file admin-ajax.php.

Se le richieste vengono gestite correttamente e gli sviluppatori di plugin seguono le migliori pratiche per l’utilizzo delle chiamate AJAX nei loro plugin, il file admin-ajax.php funzionerà correttamente.

Ora esploriamo alcuni modi migliori per controllare le richieste su admin-ajax.php che stanno rallentando il sito.

1. Abilita il debug

Abilita la modalità debug di WordPress aggiungendo la seguente riga al file del tuo sito wp-config.php file:

define(‘WP_DEBUG’, vero);

2. Monitorare le richieste di rete

Carica il tuo sito sul browser e vai a ispeziona > Rete. Premi Ctrl + R e individua il file admin-ajax.php. Seleziona la richiesta admin-ajax.php nell’elenco delle reti per visualizzarne i dettagli.

Presta attenzione al metodo di richiesta (GET o POST), ai parametri della richiesta e al tempo di risposta. Confronta i tempi di risposta di diverse richieste per individuare eventuali differenze principali.

3. Disattiva i plugin

Inizia a disattivare i plugin uno per uno, iniziando da quelli che hanno maggiori probabilità di interagire con admin-ajax.php, come i plugin di memorizzazione nella cache o di ottimizzazione.

Dopo aver disattivato ciascun plugin, ricarica la pagina e monitora le richieste della rete. Prendere nota di eventuali modifiche nel tempo o nelle dimensioni della risposta.

4. Identificare il colpevole

Quando noti un miglioramento significativo nei tempi di risposta o una riduzione delle dimensioni delle richieste admin-ajax.php dopo aver disattivato un particolare plugin, potresti aver identificato il colpevole.

Riattiva gli altri plugin e conferma se il problema si ripresenta quando viene attivato il plugin sospetto.

Velocizza la dashboard di WordPress

Per velocizzare il backend di WordPress, la pratica migliore è disabilitare l’API Heartbeat o almeno impostare un intervallo di tempo più lungo in modo che non raggiunga il server ogni pochi secondi.

Per questo è necessario installare il file Plug-in Brezza. Se sei un cliente DreamHost, non è necessario installare il plug-in, poiché DreamHost Breeze viene preinstallato con le applicazioni WordPress.

Accedi alla dashboard di amministrazione di WordPress. Navigare verso Plugin → Aggiungi nuovo → cerca Breeze → Installa E Attivare Esso.

Navigare verso Impostazioni → Brezza → API Heartbeat. Lì troverai 4 diverse opzioni per configurare Heartbeat.

  1. Controllo del battito cardiaco: Puoi attivare o disattivare il pulsante per attivare o disattivare l’API Heartbeat per il tuo backend, editor di post e frontend.
  2. Frontend del battito cardiaco: questo ti permetterà di modificare il comportamento del tuo Front-end o di disabilitarlo completamente.
  3. Editor dei post sul battito cardiaco: questo ti consentirà di modificare il comportamento del tuo WP Post Editor o disabilitarlo completamente.
  4. Backend del battito cardiaco: questo ti permetterà di modificare il comportamento del tuo Backend o disabilitarlo completamente.

Qui è necessario creare più regole:

Per impostazione predefinita, ottieni la frequenza predefinita dell’API Heartbeat di WordPress, ma puoi creare più regole in base alle tue esigenze.

Ad esempio, potresti voler attivare il backend di WordPress (dashboard) in 2 minuti (120 secondi), ma l’editor dei post in 3 minuti (180 secondi).

Per fare ciò, devi creare due regole: una per la dashboard di WordPress e l’altra per il Post Editor. Imposta le loro frequenze rispettivamente su 2 e 3 minuti.

Considerazioni sulla sicurezza AJAX

Ci sono alcune considerazioni sulla sicurezza di cui tenere conto quando si ha a che fare con AJAX. Eccone alcuni:

  • Le app AJAX sono vulnerabili al Cross-site Scripting (XSS). Significa che è facile manipolare i codici AJAX senza le convalide e la codifica adeguate. Di conseguenza, diventa facile rubare Informazioni, giocare con i contenuti ed eseguire azioni dannose.
  • Le chiamate alle funzioni AJAX vanno al server in testo semplice. Senza un protocollo adeguato, chiunque può estrarre informazioni sensibili. Questo sostanzialmente lascia il tuo database alla mercé di attori malintenzionati.
  • AJAX può essere incompatibile con alcuni browser Internet.

Riepilogo

Dopo aver raggiunto questo punto, hai imparato cos’è AJAX e come può migliorare l’esperienza dell’utente delle applicazioni web aggiornando e aggiornando lo schermo in modo asincrono. Abbiamo visto anche come utilizzare AJAX in WordPress, sia sul front-end che sul back-end.

Con WordPress AJAX puoi creare siti Web più dinamici e reattivi in ​​grado di interagire con il server senza ricaricare la pagina. Spero che tu abbia trovato questo post del blog utile e informativo e ti incoraggio a provare AJAX nei tuoi siti Web WordPress.

D: Cos’è WordPress admin-Ajax?

AJAX è una raccolta di script e tecnologie che consente alle pagine Web di essere aggiornate senza ricaricare l’intera pagina. L’admin-ajax di WordPress è un file contenente la codifica delle richieste Ajax su WordPress. Admin-ajax crea una connessione tra il server utilizzando Ajax e il client.

D: AJAX funziona con WordPress?

Sì, AJAX funziona con WordPress e viene implementato automaticamente su WordPress poiché fa parte del suo back-end. Viene utilizzato per gestire le operazioni del database senza ricaricare l’intera pagina.