Come funziona l'Ajax
Questo articolo discuterà i componenti di Ajax e come funziona l'Ajax. Parleremo del funzionamento di AJAX in alcune migliori applicazioni basate sul Web. Inoltre, verrà fornito un confronto tra il modello convenzionale e AJAX. Quindi iniziamo!
Componenti di Ajax
Ajax è un insieme di tecniche di sviluppo web. Si basa sui componenti di seguito:
- Nel modello Ajax, il XHTML/HTML è considerato le lingue fondamentali e i fogli di stile a cascata (CSS) come il linguaggio di presentazione.
- IL Document Modello a oggetti è utilizzato per mostrare contenuti dinamici e scopi di interazione.
- Per lo scambio di dati, Ajax si basa su XML, e XSLT viene utilizzato per la manipolazione dei dati.
- IL XMLHTTPREQUEST L'oggetto viene utilizzato per la comunicazione asincrona nel modello.
- da ultimo, JavaScript è usato per collegare tutte queste tecnologie in Ajax.
Come funziona l'Ajax
Ogni volta che gli utenti inviano qualsiasi richiesta dall'interfaccia utente o si verifica un evento come un pulsante che viene fatto clic o la pagina Web caricata, JavaScript crea un "XMLHTTPREQUEST"Oggetto. Successivamente, l'oggetto creato invia un httprequest al server web. Quindi, il server elabora il ricevuto Httprequest Interagendo con il database. Quando i dati richiesti vengono recuperati dal database, viene generata una risposta e il server lo rispetta JSON O XML dati sul browser. Nel passaggio successivo, JavaScript elabora i dati restituiti e aggiorna la pagina Web di conseguenza.
L'immagine qui sotto illustra anche il funzionamento di Ajax:
Ajax Esempi pratici
Considera la funzione di completamento automatico del Google sito web. Ti aiuta a completare le parole chiave mentre digiti. Le pagine Web di Google rimangono le stesse quando le parole chiave cambiano in tempo reale. Quando Internet non era così avanzato all'inizio anni 90, La pagina Web di Google è stata ricaricata ogni volta che mostrava una nuova raccomandazione della schermata del browser.
In 2004, Google ha iniziato a incorporare il modello AJAX dietro le quinte di Google Map e Google Mail. Permette lo scambio di dati e consente al livello di presentazione di funzionare senza interferire.
L'Ajax è ora comunemente utilizzato in diverse applicazioni basate sul Web per semplificare la comunicazione con il server. Abbiamo anche compilato un elenco di altri esempi pratici dell'Ajax:
- Chat room: Al giorno d'oggi, le chat room integrate sono tra le più caratteristiche di un sito Web. I siti Web offrono chat room sulla loro homepage, usando le quali è possibile comunicare con il proprio rappresentante del servizio clienti. Puoi esplorare la pagina Web durante l'invio e la ricezione di messaggi dalle chat room. Ajax non ricarica l'intera pagina durante queste attività simultanee.
- Sistemi di valutazione e voto: Hai mai partecipato a qualche modulo di voto online o hai dato una valutazione del prodotto dopo averlo acquistato online? L'Ajax è utilizzato in entrambi i sistemi menzionati. Dopo aver dato la valutazione o il voto, il sito Web aggiornerà la sezione di calcolo, mentre il resto rimane inalterato.
- Notifica di tendenza di Twitter: La notifica alla moda di Twitter è una grande caratteristica per stare al passo con ciò che sta accadendo nel mondo. Ajax è stato recentemente impiegato su Twitter per gli aggiornamenti e aggiorna l'applicazione ogni volta che vengono inviati nuovi tweet in merito agli argomenti di tendenza senza influire sul sito Web principale.
In breve, i modelli Ajax facilitano il multitasking. Supponiamo di notare un'applicazione che esegue due attività contemporaneamente, senza metterne una inattiva e l'altra in uno stato attivo. In questi scenari, l'Ajax sta lavorando in background.
Confronto tra AJAX e modello convenzionale
| Modello Ajax | Modello convenzionale |
|---|---|
| Quando si verifica un evento, il browser definisce una chiamata JavaScript, attiva XMLHTTPREQUEST. | Il browser passa una richiesta HTTP al server nel modello convenzionale. |
| L'oggetto creato quindi invia una richiesta HTTP al server in background. | I dati vengono ricevuti e quindi recuperati dal server. |
| La richiesta viene ricevuta, i dati richiesti vengono recuperati e inviati al browser Web. | Il browser Web accetta la risposta del server. |
| I dati recuperati vengono inviati al browser e visualizzati direttamente sulla pagina. Nel modello AJAX, nel frattempo non viene eseguita alcuna operazione di ricarica della pagina. | Il browser ricarica la pagina per l'aggiornamento. Durante questa operazione, gli utenti devono attendere fino a quando la pagina non viene ricaricata. Questa azione richiede tempo e mette carichi extra sul server. |
Conclusione
Ajax consente di aggiornare le pagine Web in modo asincrono mentre scambia i dati in background. Ciò afferma che gli elementi della pagina Web possono essere aggiornati senza ricaricare le pagine. Questo articolo ha discusso dei componenti dell'Ajax e di come funziona l'Ajax. Abbiamo parlato del funzionamento di Ajax in alcune migliori applicazioni basate sul Web. Inoltre, viene fornito anche un confronto tra i modelli convenzionali e Ajax.