Tutorial di base AJAX

Introduzione a AJAX

AJAX permette di aggiornare il contenuto della pagina web "asincronamente" scambiando dati con il server Web in background.

Questo significa che è possibile aggiornare alcune parti della pagina web senza ricaricare l'intera pagina.

Con AJAX, puoi:

Invia i dati al server Web (in background)
Leggi i dati dal server Web (dopo il caricamento della pagina)
Aggiorna la pagina web senza ricaricarla

Esempio AJAX

Il seguente codice mostra un esempio base di AJAX:

AJAX altererà questo testo

Esegui il codice

Spiegazione dell'esempio AJAX

L'esempio sopra include i seguenti componenti:

Codice HTML:

　　<!DOCTYPE html>
　　<html>
　　
　　<div id="output">
　　<h2>AJAX altererà questo testo</h2>
　　<button onclick="fetchDoc()" type="button">Invia richiesta</button>
　　</div>
　　
　　</html>

Il codice HTML contiene un<div>parziale (<h2>e<button>)

il<DIV>parziale viene utilizzato per visualizzare le informazioni provenienti dal server.

il<button>Chiamare una funzione (quando viene cliccata).

Questa funzione richiede dati dal server Web e li visualizza (senza ricaricare la pagina):

Funzione fetchDoc():

　　function fetchDoc() {
　　var httpRequest = new XMLHttpRequest();
　　httpRequest.onreadystatechange = function() {
　　　se (this.readyState === 4 && this.status === 200) {
　　　　document.getElementById("output").innerHTML = this.responseText;
　　　}
　　};
　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();
　　}

Cos'è AJAX?

AJAX sta per “Asynchronous Javascript And XML” (JavaScript e XML asincroni).

AJAX non è un linguaggio di programmazione, è una tecnologia utilizzata per accedere ai server web dalle pagine web.

AJAX ti permette di inviare richieste al server senza ricaricare la pagina.

AJAX può comunicare con il server, scambiare dati e aggiornare la pagina senza ricaricare la pagina.

AJAX può inviare e ricevere informazioni in vari formati, tra cui JSON, XML, HTML e file di testo.

In breve, è utilizzare l'oggetto XMLHttpRequest per comunicare con il server.

Le due funzionalità principali di AJAX ti permettono di eseguire le seguenti operazioni:

Inviare richieste al server senza ricaricare la pagina
Ricezione e elaborazione dei dati dal server

Come funziona AJAX?

Per eseguire la comunicazione AJAX, JavaScript utilizza un oggetto XMLHttpRequest per inviare una richiesta HTTP al server e ricevere i dati come risposta.

Tutti i browser moderni (Chrome, Firefox, IE7+, Safari, Opera) supportano l'oggetto XMLHttpRequest.

La seguente figura spiega come funziona la comunicazione AJAX:

Passaggi dell'operazione AJAX

Si è verificato un evento nella pagina web (ad esempio, la pagina è stata caricata o è stato cliccato un pulsante)
L'oggetto XMLHttpRequest viene creato dal JavaScript
L'oggetto XMLHttpRequest invia la richiesta al server web
Il server elabora la richiesta
Il server invia la risposta indietro alla pagina web
La risposta viene letta dal JavaScript
HTML DOM viene aggiornato dal JavaScript

Cosa imparerai

Nel prossimo capitolo di questa guida, imparerai:
Come creare l'oggetto XMLHttpRequest
Come inviare dati al server web (in background)
Come leggere dati dal server web (in background)
Come aggiornare una pagina web senza ricaricare la pagina

AJAX XMLHttpRequest