Cos'è l'Ajax?
In questo post, discuteremo di cosa sia l'Ajax, il funzionamento graduale dell'Ajax e camminiamo attraverso un esempio per comprendere meglio l'implementazione di Ajax.
Cos'è l'Ajax?
Ajax, che rappresenta Javascript asincrono e XML, è un metodo (non un linguaggio di programmazione) che viene utilizzato per le applicazioni Web per trasmettere e ricevere dati dal server in modo asincrono, senza influire sul resto del contenuto della pagina o richiede una ricarica di pagina.
L'abbreviazione XML sta per Lingua di markup estensibile Questo viene usato per crittografare i messaggi in modo che possa essere letto da umani e macchine. XML è simile a HTML, ma ti consente di creare e personalizzare i tuoi tag.
Ajax comunica con il server utilizzando l'oggetto XMLHTTPREQUEST, JavaScript/Dom per fare richieste e XML come meccanismo di trasmissione dei dati. È diventato popolare solo quando Google lo ha messo in Google suggerisce nel 2005
Per metterlo in parole semplici, Ajax è un metodo per ridurre le interazioni server-cliente che vengono realizzate aggiornando solo una parte di una pagina Web invece di aggiornare l'intera pagina web. L'obiettivo di Ajax è quello di inviare piccole quantità di dati al server senza dover aggiornare la pagina.
Lavoro graduale dell'Ajax
- Alcuni eventi vengono eseguiti e il browser crea un oggetto XMLHTTPREQUEST, dopodiché HttPrequest viene inviato al server.
- Il server ottiene HTTPREQUEST e quindi elabora, dopo l'elaborazione, il server genera una risposta e invia la risposta al browser con alcuni dati.
- I dati restituiti vengono quindi elaborati dal browser con l'aiuto di JavaScript e a seconda della risposta JavaScript aggiorna il contenuto della pagina Web.
Facciamo passare alcuni esempi per capire meglio l'Ajax.
Esempio 1:
Questo esempio dimostrerà come modificare il contenuto di un H2 Tag usando Ajax. Innanzitutto, implementeremo la struttura della nostra pagina web utilizzando HTML.
L'oggetto XMLHTTPREQUEST
Nel codice sopra, abbiamo definito a div contenitore e gli ha dato l'attributo ID a causa del quale possiamo fare riferimento a questo contenitore di div più avanti nel nostro codice JavaScript. Questa sezione Div è definita in modo che possa visualizzare informazioni da un server. Successivamente, abbiamo definito un tag H2 e un pulsante in cui abbiamo superato un al clic evento. Ogni volta che un utente farà clic su questo pulsante, verrà generato un evento e la funzione ChangeContent () sarà eseguito.
functionChangeContent ()// XMLHTTTPREQUEST Inizializzazione dell'oggetto
constxhttp = newxmlhttpRequest ();
// utilizzando la funzione integrata Onload
xhttp.onload = function ()
// Aggiornamento del contenuto dell'elemento div
documento.getElementById ("Esempio").InnerHtml =
Questo.risposta;
// ottieni file ajax_info.TXT
xhttp.Open ("Get", "Ajax_Info.TXT");
// Invia richiesta
xhttp.Inviare();
Ora che abbiamo finito con l'installazione della pagina HTML, dobbiamo scrivere del codice di script. Per questo tutorial, includeremo il codice JavaScript all'interno del etichetta. Nel nostro codice di script, dobbiamo prima creare la funzione ChangeContent () che verrà eseguito con il clic del pulsante, possiamo farlo con le seguenti righe di codice:
functionChangeContent ()// XMLHTTTPREQUEST Inizializzazione dell'oggetto
constxhttp = newxmlhttpRequest ();
// utilizzando la funzione integrata Onload
xhttp.onload = function ()
// Aggiornamento del contenuto dell'elemento div
documento.getElementById ("Esempio").InnerHtml =
Questo.risposta;
// ottieni file ajax_info.TXT
xhttp.Open ("Get", "Ajax_Info.TXT");
// Invia richiesta
xhttp.Inviare();
Come puoi vedere nello snippet del codice sopra, la funzione genera un nuovo XMLHTTPREQUEST e attende la risposta dal server. Dopo aver ricevuto la risposta, il contenuto del div verrà sostituito da questa funzione.
Creiamo ora un file con il nome di ajax_info.TXT e scrivi alcune informazioni fittizie in questo file per esempio:
L'intero codice è riportato di seguito:
L'oggetto XMLHTTPREQUEST
L'output del codice sopra è fornito di seguito:
Possiamo vedere che quando l'utente fa clic sul pulsante, il testo "cambia" nel testo presente all'interno di Ajax_Info.file txt.
Conclusione
JavaScript esegue il codice riga per riga che si chiama esecuzione sincrona e quindi l'Ajax entra in riproduzione in quanto è un metodo che aiuta a implementare l'esecuzione asincrona del codice in JavaScript. Nell'esecuzione asincrona un'istruzione o una riga di codice non deve attendere la finitura della riga di codice precedente ed entrambi possono eseguire parallelo. L'Ajax viene utilizzato per trasmettere e ricevere dati dal server in modo asincrono senza influire sul resto della pagina e non richiede nemmeno l'intero ricaricamento della pagina.
In questo post, abbiamo visto cos'è l'Ajax e poi siamo andati a vedere come funziona l'Ajax descrivendo il processo graduale e alla fine ti abbiamo fornito un esempio per rendere il tuo concetto più chiaro.