XML HttpRequest

Tutti i browser moderni hanno un oggetto XMLHttpRequest integrato per richiedere dati dal server.

l'oggetto XMLHttpRequest

L'oggetto XMLHttpRequest può essere utilizzato per richiedere dati dal server web.

L'oggetto XMLHttpRequest èIl sogno degli sviluppatori, perché puoi:

  • Aggiornamento della pagina web - senza ricaricare la pagina
  • Richiesta dati dal server - dopo che la pagina è stata caricata
  • Ricezione dati dal server - dopo che la pagina è stata caricata
  • Invio dati al server - in background

Esempio XMLHttpRequest

Quando scrivi caratteri nella casella di input qui sotto, XMLHttpRequest viene inviato al server e restituisce alcune suggerimenti di nome (dal server):

Esempio

Inserisci il nome nella casella di input qui sotto:

Nome: Suggerimenti: La sezione AJAX di questa guida spiega l'esempio sopra.

Invio XMLHttpRequest

Di seguito è riportata la sintassi comune JavaScript per l'uso dell'oggetto XMLHttpRequest:

Esempio

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Azione tipica da eseguire quando il documento è pronto:
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "filename", true);
xhttp.send();

Prova da solo

esempio di spiegazione

La prima riga dell'esempio sopra crea un l'oggetto XMLHttpRequest:

var xhttp = new XMLHttpRequest();

onreadystatechange l'attributo specifica la funzione da eseguire ogni volta che lo stato dell'oggetto XMLHttpRequest cambia:

xhttp.onreadystatechange = function()

quando readyState l'attributo è 4 e status Quando l'attributo è 200, la risposta è pronta:

if (this.readyState == 4 && this.status == 200)

responseText Le proprietà vengono restituite come stringhe di testo dalla risposta del server.

Le stringhe di testo possono essere utilizzate per aggiornare le pagine web:

document.getElementById("demo").innerHTML = xhttp.responseText;

Imparerai di più sull'oggetto XMLHttpRequest nella sezione AJAX di questo tutorial.