Introduzione alle chiamate Ajax

Pubblicato: 2021-11-01

Benvenuti alla nostra Introduzione all'Ajax! In questo articolo analizzeremo le basi di Ajax e come viene utilizzato in un esempio del mondo reale. Vedremo anche un esempio di una chiamata Ajax-PHP. Sebbene abbiamo fatto del nostro meglio per semplificare questo tutorial, una conoscenza pratica di Javascript, PHP e WordPress è molto importante per comprendere appieno ciò che segue. Con questo in mente iniziamo!

Cos'è l'Ajax?

Ajax sta per JavaScript asincrono e XML.

Ajax non è un linguaggio di programmazione, ma una serie di tecniche che combinano le tecnologie web esistenti per creare applicazioni web migliori.

Migliorare i siti web con Ajax

Ajax ha una vasta gamma di usi. Tra queste, una delle funzioni principali sono le chiamate Ajax. Le chiamate Ajax consentono a un sito Web di aggiornare parte del suo contenuto su un'azione dell'utente senza la necessità di ricaricare la pagina. Pertanto, a differenza di una normale richiesta HTTP, non dobbiamo attendere la risposta del server per continuare a interagire con il sito web.

Tradizionalmente, le richieste HTTP vengono inviate a un server Web e dopo che sono state elaborate il server restituisce l'output aggiornato in un nuovo caricamento della pagina. In una richiesta Ajax, questa sequenza di azioni avviene dietro le quinte, in modo asincrono, in modo che l'utente non venga interrotto. Ciò migliora l'interattività e la reattività e rende il sito più dinamico.

Come funziona una chiamata Ajax?

Una chiamata Ajax inizia con l'utente finale che esegue un'azione sul front-end di un sito Web (ad esempio, facendo clic su un pulsante). Quando viene eseguita quell'azione, viene attivato un evento Javascript e il suo listener chiama una funzione.

All'interno della funzione, viene lanciata la chiamata Ajax e, con l'aiuto di XML, le informazioni vengono impacchettate e la richiesta viene inviata a uno script del server.

N OTA: Al giorno d'oggi, in quasi tutte le occasioni, JSON è preferito all'XML in quanto è più veloce, più facile da leggere e programmare e altro ancora.

All'interno dello script, la richiesta viene elaborata con l'ausilio di un linguaggio di scripting lato server come PHP, Java, Ruby, Python ecc.

La risposta viene rinviata al client e una funzione di callback aggiorna la parte di contenuto corrispondente con i dati ricevuti.

Diamo un'occhiata a come funziona in un esempio

Un semplice esempio di chiamata Ajax

Creiamo un'applicazione di ricerca che ti permetta di vedere i risultati della ricerca in tempo reale durante la ricerca in un elenco di titoli di articoli.

Useremo PHP come linguaggio di scripting lato server e ti guideremo attraverso questo, dal punto di vista degli utenti finali.

Passaggio 1: il modulo HTML

Innanzitutto, abbiamo bisogno di una casella di testo che l'utente riempirà di testo e da qualche parte in cui visualizzare il risultato. Quindi creiamo un semplice modulo HTML e un elemento che mostrerà i risultati.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> </body> </html>

Passaggio 2: funzione Javascript

Quando un utente inserisce del testo, vogliamo vedere i risultati in tempo reale, se disponibili. Useremo l'evento Javascript onkeyup che attiva una funzione quando l'utente rilascia un tasto sulla tastiera.

La funzione dovrà ottenere il testo corrente come parametro per continuare il processo.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> <script type="text/javascript"> function foundArticles(str) { } </script> </body> </html>

Compiliamo la funzione.

Passaggio 3: la richiesta

All'interno della funzione, dobbiamo prima creare un oggetto XMLHttpRequest per interagire con il server e quindi chiamare un'altra funzione che farà qualcosa con il valore passato nella nostra funzione foundArticles() .

Nel processo sopra descritto, l'interazione con il server viene eseguita con l'uso di un gestore di eventi Javascript XMLHttpRequest.onready statechange, che viene chiamato quando viene modificata la proprietà readyState . Chiariamo ulteriormente questi passaggi:.

  • La proprietà readyState restituisce lo stato in cui si trova un client XMLHttpRequest .
  • Ogni volta che readyState cambia, viene generato l'evento readystatechange .
  • La proprietà onreadystatechange contiene il gestore eventi da chiamare quando viene generato l'evento readystatechange .

Passaggio 4: cosa fare con la richiesta

Ora, dobbiamo fare qualcosa quando l'operazione è completa e, dopo aver consultato quali stati sono disponibili, lo impostiamo sullo stato 4.

Quindi, al termine dell'operazione, il testo all'interno dell'elemento HTML con id txtHint dovrebbe essere sostituito con la risposta del server. Questo è quando dobbiamo utilizzare la proprietà responseText , che restituisce il testo ricevuto dal server dopo l'invio della richiesta.

Ora aggiungiamo il codice all'interno della funzione foundArticles() che corrisponde a quanto appena descritto sopra.

 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } }

NOTA: dobbiamo sottolineare qui che il rendering di HTML in questo modo, senza sfuggirvi, è una cattiva pratica dal punto di vista della sicurezza e lo facciamo solo per il bene di questo tutorial in modo che il codice sia il più semplice possibile. Per sicurezza, non utilizzare nessuno dei codici forniti in questo articolo per l'uso nel mondo reale!

Successivamente dobbiamo inviare la richiesta al server e utilizzare i dati che vengono restituiti.

Passaggio 5: i dati

In questo esempio i dati verranno archiviati in un file PHP. Creiamo un file data.php nella stessa cartella e includiamo il seguente codice:

 <?php // We fill in the posts array with the data to look up to $posts = array( "C Language course", "C++ course", "About Bootstrap", "Learn to write HTML", "All about SS", "CSS3 course", "JAVA course", "JavaScript tutorials", "Learn PHP", "MySQL examples", "Learn Python", "AngularJS", "Photoshop Tutorials", "C#", "ASP.NET", "SAP", "ORACLE", "Wordpress CMS for beginners", "Build your own Android app", "All about SEO", "Illustrator", "Flash", "Action Script" ); // We get the requested value from the URL and store it in a variable $req = $_REQUEST["req"]; $autocomplete = ""; // Iterate $posts if $req is not empty if ($req !== "") { $req = strtolower($req); foreach($posts as $name) { $lowname = strtolower($name); if ( strpos( $lowname , $req ) !== false ) { $autocomplete = $name; } } } // Output echo $autocomplete === "" ? "no suggestion" : $autocomplete;

Non confonderti con $req = $_REQUEST["req"]; linea. Questo è il modo in cui lo script recupera la query all'interno del file custom.js che esamineremo a breve.

Passaggio 6: metodi di richiesta

Useremo il metodo open() del nostro oggetto XMLHttpRequest per inizializzare la richiesta e il metodo send() per scambiare dati con il server.

I parametri che utilizziamo per il metodo open() sono:

  • Il metodo. Significato il metodo di richiesta HTTP ("GET", "POST", "PUT", "DELETE" ecc.).
  • L'URL a cui inviare la richiesta.
 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } xmlhttp.open("GET", "data.php?req=" + str, true); xmlhttp.send(); }

Come puoi vedere, il metodo open() inizializza una richiesta GET a "data.php?req=" + str URL.

L'URL verrà quindi utilizzato da $req = $_REQUEST["req"]; variabile all'interno del file data.php per recuperare il valore.

Diamo un'occhiata a una visuale della richiesta di esempio:

A questo punto il modulo dovrebbe funzionare correttamente. Se inserisci, diciamo la parola “corso” il risultato dovrebbe essere:

“C Corso di lingua”,
“Corso C++”,
“Corso CSS3”,
“Corso JAVA”.

Conclusione

Questo è stato un esempio di un esempio molto semplice di richiesta Ajax che è una tecnica molto popolare da utilizzare durante la creazione di siti Web. Sebbene sia semplice, si spera di averti avvicinato alla comprensione dell'instradamento in tali richieste e questo potrebbe aiutarti a iniziare a codificare il tuo. In un prossimo articolo, rivisiteremo Ajax, in un ambiente WordPress, quindi restate sintonizzati!