Resúmenes

Apuntes universitarios en formato Markdown desde Obsidian.

Ajax

download Descargar MD

Ajax non è una tecnologia singola, ma un approccio allo sviluppo web che permette a una pagina di aggiornare i propri dati in modo asincrono, ovvero senza ricaricare l'intera pagina (evitando il cosiddetto postback).

Il Modello Ajax

In un'applicazione tradizionale, ogni interazione (click, invio form) richiede una nuova richiesta HTTP e il server risponde inviando una pagina HTML completa.

Con Ajax:

  1. Evento: L'utente compie un'azione.
  2. Richiesta: JavaScript crea un oggetto XMLHttpRequest (o usa la moderna API fetch) e invia una richiesta al server in background.
  3. Elaborazione: Il server processa la richiesta e restituisce solo i dati necessari (solitamente in formato JSON).
  4. Aggiornamento: JavaScript riceve i dati e aggiorna solo una parte specifica del DOM.

    XMLHttpRequest (L'oggetto Core)

    È l'oggetto JavaScript che permette la comunicazione HTTP asincrona.

    Esempio di Richiesta GET (Nativa)

    
var xhr = new XMLHttpRequest();

// 1. Configurazione (Metodo, URL, Asincrono=true) xhr.open("GET", "api/dati?id=123", true);

// 2. Gestore dell'evento di risposta xhr.onreadystatechange = function() { if (xhr.readyState === 4) { // Operazione completata if (xhr.status === 200) { console.log("Dati ricevuti:", xhr.responseText); document.getElementById("risultato").innerHTML = xhr.responseText; } else { console.error("Errore HTTP:", xhr.status); } } };

// 3. Invio xhr.send();

## JSON: Lo Standard per i Dati
Sebbene l'acronimo contenga "XML", oggi si usa quasi esclusivamente **JSON** (*JavaScript Object Notation*) perché più leggero e facile da processare in JS.

```javascript
// Da stringa JSON (ricevuta dal server) a oggetto JS
var obj = JSON.parse('{"nome": "Mario", "eta": 30}');

// Da oggetto JS a stringa JSON (da inviare al server)
var str = JSON.stringify(obj);

Considerazioni su Usabilità e Sicurezza

Vantaggi

  • Interattività: L'utente non sperimenta interruzioni (niente schermo bianco durante il caricamento).
  • Risparmio di Banda: Si scambiano solo piccoli frammenti di dati, non intere pagine HTML.

    Svantaggi e Sfide

  • Tasto Indietro: Ajax non aggiorna automaticamente la cronologia del browser. Tornando indietro, l'utente potrebbe finire alla pagina precedente a quella dove ha iniziato l'interazione Ajax.
  • SEO: I motori di ricerca faticano a indicizzare contenuti caricati dinamicamente (problema ridotto con i moderni crawler).
  • Stato di Attesa: È fondamentale mostrare un loader (es. una GIF o un testo "Caricamento...") per far capire all'utente che l'operazione è in corso.

    Sicurezza

[!WARNING] Importante

  • Same-Origin Policy: Per sicurezza, Ajax può fare richieste solo allo stesso dominio da cui è stata caricata la pagina (salvo configurazioni CORS o uso di JSONP).
  • Validazione Lato Server: Non fidarsi mai dei controlli JavaScript. Un utente malintenzionato può bypassare Ajax e inviare richieste SQL Injection direttamente al server.

    Gestione dei Timeout

    In caso di rete lenta, la richiesta potrebbe "sparire". È bene implementare un limite massimo di attesa.

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.timeout = 5000; // 5 secondi

xhr.ontimeout = function () {
    alert("La richiesta ha impiegato troppo tempo!");
};
xhr.send();