web
ajax AJAX (Asynchronous JavaScript and XML) è una tecnologia web che permette alle pagine di comunicare con il server in background senza ricaricare l’intera pagina. Grazie ad AJAX, si possono aggiornare solo parti specifiche della pagina, rendendo le applicazioni web più veloci, interattive e simili a software desktop. Oggi, al posto di XML, si usa spesso JSON per lo scambio dei dati.  
         il mio computer  
 

La tecnologia AJAX nello sviluppo di pagine web 🚀

Pubblicato il: 15-9-2025

Ultima Modifica: 15-9-2025

Menù

La tecnologia AJAX nello sviluppo di pagine web 🚀
Esempio completo: pagina con caricamento dinamico e modulo AJAX
Esempio completo con MySQL

 

La tecnologia AJAX nello sviluppo di pagine web 🚀

Negli ultimi anni, il modo in cui interagiamo con i siti web è cambiato radicalmente. Non vogliamo più pagine che si ricaricano completamente ogni volta che clicchiamo un pulsante o inviamo un modulo: vogliamo esperienze rapide, fluide e interattive. Qui entra in gioco AJAX.

Cos’è AJAX?

AJAX sta per Asynchronous JavaScript and XML. È una tecnica di sviluppo web che permette alle pagine di comunicare con il server in background, senza ricaricare l’intera pagina. Nonostante l’acronimo contenga “XML”, oggi è comune usare JSON per lo scambio dati, più leggero e facile da gestire.

In pratica, grazie ad AJAX:

  • Puoi aggiornare solo una parte della pagina (ad esempio una lista di prodotti o commenti).

  • Migliori la velocità percepita dal visitatore.

  • Crei un’esperienza simile a quella di un’applicazione desktop direttamente nel browser.

Come funziona AJAX?

AJAX combina tre tecnologie principali:

  1. JavaScript – gestisce l’invio delle richieste al server e l’aggiornamento della pagina.

  2. XMLHttpRequest / Fetch API – permette di inviare richieste HTTP in background.

  3. HTML/CSS – aggiorna dinamicamente la pagina con i nuovi dati ricevuti.

Il flusso tipico è:

  1. L’utente compie un’azione (clicca un pulsante, seleziona un filtro, ecc.).

  2. JavaScript invia una richiesta al server.

  3. Il server elabora la richiesta e restituisce dati (JSON, XML, testo).

  4. JavaScript riceve i dati e aggiorna la pagina senza ricaricarla.

Esempio pratico

Immagina una pagina con un pulsante “Mostra commenti”:


					

						

							

								



        

            
            document.getElementById("loadComments").addEventListener("click", 
			function() {
fetch("commenti.php")
.then(response => 
			response.json())
.then(data => {
let commentSection = 
			document.getElementById("comments");
commentSection.innerHTML = 
			"";
data.forEach(comment => {
let p = 
			document.createElement("p");
p.textContent = comment.autore + ": 
			" + comment.testo;
commentSection.appendChild(p);
});
})

			.catch(error => console.error("Errore:", error));
});

            		
        

        

            
			
        

    

							

						

						

						

					

					

					
In questo esempio:

					
    
						
  • 
						
    
						
						fetch("commenti.php") invia una richiesta al 
						server.
    
						
    • 
						
  • 
						
    La risposta JSON 
						viene elaborata e aggiunta alla sezione dei commenti.
    
						
    • 
						
  • 
						
    L’utente vede i 
						nuovi commenti 
						senza ricaricare la pagina.
    
						
    • 
					

					

					
Vantaggi di AJAX

					
    
						
  • 
						
    🔄 
						Interattività 
						migliorata: le azioni dell’utente sono 
						immediate.
    
						
    • 
						
  • 
						
    🚀 
						Velocità 
						percepita: si caricano solo i dati necessari.
    
						
    • 
						
  • 
						
    💾 
						Riduzione del 
						traffico: meno dati vengono trasferiti rispetto 
						a un ricaricamento completo della pagina.
    
						
    • 
						
  • 
						
    🌐 
						Compatibilità 
						multi-browser: funziona con tutti i browser 
						moderni.
    
						
    • 
					

					

					
Svantaggi e attenzioni

					
    
						
  • 
						
    🔒 
						Sicurezza: 
						è necessario sanificare sempre i dati ricevuti dal 
						server.
    
						
    • 
						
  • 
						
    ⚠️ 
						Accessibilità: 
						alcune funzionalità potrebbero non funzionare con 
						browser vecchi o senza JavaScript.
    
						
    • 
						
  • 
						
    📚 
						Gestione 
						complessa dello stato: bisogna controllare 
						correttamente quali dati sono aggiornati.
    
						
    • 
					

					

					
Conclusione

					
AJAX non è più una 
					novità, ma una 
					pietra miliare dello sviluppo web moderno. Permette 
					di creare applicazioni web più veloci, interattive e simili 
					a software desktop, migliorando l’esperienza utente senza 
					sacrificare la leggerezza del sito.

					
Se vuoi che un sito web 
					sembri “vivo” e reattivo, AJAX è uno strumento
					indispensabile. 
					E con l’arrivo di tecnologie moderne come
					Fetch API 
					e JSON, è 
					diventato anche più semplice da implementare rispetto ai 
					primi tempi di XMLHttpRequest.

					

						

							
							
							torna sù
							 Torna sù
						

					

					
 

					

					Esempio completo: pagina 
					con caricamento dinamico e modulo AJAX

					
Struttura dei file

					
Avremo tre file 
					principali:

					
    
						
  1. 
						
    
						index.html 
						→ la pagina web con il pulsante e il modulo.
    
						
    2. 
						
  2. 
						
    
						load_comments.php 
						→ restituisce i commenti in JSON.
    
						
    3. 
						
  3. 
						
    
						submit_comment.php 
						→ riceve i dati del modulo e li salva (simulazione).
    
						
    4. 
					

					

					
1️⃣ index.html

					

					

						

							

								



        

            
            <!DOCTYPE html>
<html lang="it">
<head>
<meta 
			charset="UTF-8">
<title>Pagina AJAX di esempio</title>
<style>

			body { font-family: Arial, sans-serif; margin: 20px; }
#comments 
			{ margin-top: 20px; border-top: 1px solid #ccc; padding-top: 10px; }

			p { margin: 5px 0; }
input, textarea { display: block; margin: 
			5px 0; width: 300px; }
button { margin-top: 10px; }
</style>

			</head>
<body>

<h1>Commenti dinamici con AJAX</h1>


			<button id="loadComments">Mostra commenti</button>
<div 
			id="comments"></div>

<h2>Invia un nuovo commento</h2>

			<form id="commentForm">
<input type="text" name="autore" 
			placeholder="Il tuo nome" required>
<textarea name="testo" 
			placeholder="Il tuo commento" required></textarea>
<button 
			type="submit">Invia</button>
</form>

<script>
// 
			Funzione per caricare i commenti
function loadComments() {

			fetch('load_comments.php')
.then(response => response.json())

			.then(data => {
let commentSection = 
			document.getElementById('comments');
commentSection.innerHTML = 
			"";
data.forEach(comment => {
let p = 
			document.createElement('p');
p.textContent = comment.autore + ": 
			" + comment.testo;
commentSection.appendChild(p);
});
})

			.catch(err => console.error('Errore:', err));
}

// 
			Gestione clic sul pulsante "Mostra commenti"

			document.getElementById('loadComments').addEventListener('click', 
			loadComments);

// Gestione invio modulo con AJAX

			document.getElementById('commentForm').addEventListener('submit', 
			function(e) {
e.preventDefault(); // previene il ricaricamento 
			della pagina
let formData = new FormData(this);


			fetch('submit_comment.php', {
method: 'POST',
body: formData

			})
.then(response => response.json())
.then(result => {

			alert(result.message);
loadComments(); // ricarica i commenti

			this.reset(); // pulisce il modulo
})
.catch(err => 
			console.error('Errore:', err));
});
</script>

</body>

			</html>

            		
        

        

            
			
        

    

							

						

						

						

					

					

					

					
2️⃣ load_comments.php

					

					

						

							

								



        

            
            <?php
// Simuliamo dei commenti
$comments = [
["autore" => 
			"Paolo", "testo" => "Che bel sito!"],
["autore" => "Maria", 
			"testo" => "Molto interessante."],
["autore" => "Luca", "testo" 
			=> "Grazie per le informazioni."]
];

header('Content-Type: 
			application/json');
echo json_encode($comments);
?>

            		
        

        

            
			
        

    

							

						

						

						

					

					

					

					
3️⃣ submit_comment.php

					

					

						

							

								



        

            
            <?php
// Recupera i dati inviati dal modulo
$autore = 
			$_POST['autore'] ?? '';
$testo = $_POST['testo'] ?? '';


			if($autore && $testo) {
// Qui normalmente salveresti i dati in 
			un database
// Per semplicità, rispondiamo solo con un messaggio

			$response = ["success" => true, "message" => "Commento inviato con 
			successo!"];
} else {
$response = ["success" => false, 
			"message" => "Errore: dati mancanti"];
}


			header('Content-Type: application/json');
echo 
			json_encode($response);
?>

            		
        

        

            
			
        

    

							

						

						

						

					

					

					

					
✅
					Come funziona:

					
    
						
  1. 
						
    L’utente clicca
						Mostra 
						commenti → i commenti vengono caricati senza 
						ricaricare la pagina.
    
						
    2. 
						
  2. 
						
    L’utente scrive un 
						commento e clicca
						Invia 
						→ i dati vengono inviati in background e la lista dei 
						commenti si aggiorna automaticamente.
    
						
    3. 
						
  3. 
						
    Tutto avviene con
						AJAX, 
						senza refresh della pagina.
    
						
    4. 
						
					
    
						
    
							
							
							torna sù
							 Torna sù
						
    
					
    
						
					

					

					Esempio completo con 
					MySQL

					
1️⃣ Creazione del 
					database

					
Puoi creare un database 
					chiamato ajax_demo 
					e una tabella comments 
					così:

					

					

						

							

								



        

            
            CREATE DATABASE ajax_demo CHARACTER SET utf8mb4 COLLATE 
			utf8mb4_unicode_ci;

USE ajax_demo;

CREATE TABLE 
			comments (
id INT AUTO_INCREMENT PRIMARY KEY,
autore 
			VARCHAR(100) NOT NULL,
testo TEXT NOT NULL,
data_invio 
			TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

            		
        

        

            
			
        

    

							

						

						

						

					

					

					

					
2️⃣ Configurazione 
					connessione PHP (config.php)

					

					

						

							

								



        

            
            <?php
$host = "localhost"; // o l'indirizzo del tuo server MySQL

			$user = "tuo_utente";
$pass = "tua_password";
$db = 
			"ajax_demo";

// Connessione al database
$conn = new 
			mysqli($host, $user, $pass, $db);

// Controllo connessione

			if ($conn->connect_error) {
die("Connessione fallita: " . 
			$conn->connect_error);
}
?>

            		
        

        

            
			
        

    

							

						

						

						

					

					

					

					
3️⃣ 					lload_comments.php

					

					

						

							

								



        

            
            <?php
header('Content-Type: application/json');
require 
			'config.php';

$sql = "SELECT autore, testo, 
			DATE_FORMAT(data_invio, '%d/%m/%Y %H:%i') as data_invio FROM 
			comments ORDER BY data_invio DESC";
$result = $conn->query($sql);

			
$comments = [];
if ($result->num_rows > 0) {
while($row = 
			$result->fetch_assoc()) {
$comments[] = $row;
}
}


			echo json_encode($comments);
$conn->close();
?>

            		
        

        

            
			
        

    

							

						

						

						

					

					

					

					
4️⃣ 					ssubmit_comment.php

					

					

						

							

								



        

            
            <?php
header('Content-Type: application/json');
require 
			'config.php';

$autore = trim($_POST['autore'] ?? '');

			$testo = trim($_POST['testo'] ?? '');

if($autore && $testo) {

			$stmt = $conn->prepare("INSERT INTO comments (autore, testo) VALUES 
			(?, ?)");
$stmt->bind_param("ss", $autore, $testo);
if 
			($stmt->execute()) {
$response = ["success" => true, "message" => 
			"Commento inviato con successo!"];
} else {
$response = 
			["success" => false, "message" => "Errore nell'invio del commento"];

			}
$stmt->close();
} else {
$response = ["success" => false, 
			"message" => "Errore: dati mancanti"];
}

$conn->close();

			echo json_encode($response);
?>

            		
        

        

            
			
        

    

							

						

						

						

					

					

					

					
5️⃣ 					index.html

					
Puoi usare lo stesso 
					file che ti ho inviato prima. L’unica differenza è che 
					adesso il caricamento dei commenti e l’invio modulo 
					interagiscono con 
					il database reale.

					

					
✅
					Come funziona 
					adesso:

					
    
						
  1. 
						
    I commenti vengono 
						memorizzati nel database MySQL.
    
						
    2. 
						
  2. 
						
    Ogni visita alla 
						pagina o clic su
						Mostra 
						commenti mostra tutti i commenti salvati.
    
						
    3. 
						
  3. 
						
    L’invio dei nuovi 
						commenti aggiorna il database senza ricaricare la 
						pagina.
    
						
    4. 
						
					
    
						
    
							
							
							torna sù
							 Torna sù