XMLHttpRequest di AJAX

L'oggetto XMLHttpRequest viene utilizzato per scambiare dati con il server.

Inviare una richiesta al server

Per inviare una richiesta al server, usiamo l'oggetto XMLHttpRequest open() e send() Metodo:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
metodo descrizione
open(method, url, async)

Determina il tipo di richiesta

  • method:tipologia di richiesta: GET o POST
  • url:posizione del server (file)
  • async:true (asincrono) o false (sincrono)
send() Inviare una richiesta al server (usato per GET)
send(string) Inviare una richiesta al server (usato per POST)

GET o POST?

GET è più semplice e veloce di POST, può essere utilizzato nella maggior parte dei casi.

Tuttavia, usa sempre POST nelle seguenti circostanze:

  • I file di cache non sono un'opzione (aggiornare i file o il database sul server)
  • Inviare grandi quantità di dati al server (POST senza limiti di dimensione)
  • Inviare l'input dell'utente (può includere caratteri sconosciuti), POST è più potente e sicuro rispetto a GET

Richiesta GET

Una semplice richiesta GET:

Esempio

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

Prova personalmente

Nel esempio sopra, potresti ottenere un risultato dalla cache. Per evitare questo, aggiungi un ID unico all'URL:

Esempio

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

Prova personalmente

Se vuoi inviare informazioni utilizzando il metodo GET, aggiungi queste informazioni all'URL:

Esempio

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

Prova personalmente

Richiesta POST

Una semplice richiesta POST:

Esempio

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

Prova personalmente

Se vuoi POST dati come un modulo HTML, usa setRequestHeader() Aggiungi un'intestazione HTTP. Per favore, usa send() Metodo che specifica i dati che devi inviare:

Esempio

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

Prova personalmente

metodo descrizione
setRequestHeader(header, value)

Aggiungi intestazione HTTP alla richiesta

  • header：stabilisce il nome dell'intestazione
  • value：stabilisce il valore dell'intestazione

url - file sul server

metodo open() url Il parametro è l'indirizzo del file sul server:

xhttp.open("GET", "ajax_test.asp", true);

Il file può essere di qualsiasi tipo, come .txt e .xml, o file di script del server, come .asp e .php (che possono eseguire operazioni sul server prima di inviare la risposta).

Asincrono - true o false?

Se si desidera inviare una richiesta asincrona:open() metodo async Il parametro deve essere impostato su true:

xhttp.open("GET", "ajax_test.asp", true);

L'invio di richieste asincrone rappresenta un grande passo avanti per gli sviluppatori web. Molte operazioni eseguite sul server sono molto lente. Prima di AJAX, questa operazione potrebbe causare la sospensione o l'interruzione dell'applicazione.

Attraverso la trasmissione asincrona, JavaScript non deve aspettare la risposta del server, ma può:

  • Esegue altri script mentre si aspetta la risposta del server
  • Gestisce la risposta quando la risposta è pronta

proprietà onreadystatechange

Attraverso l'oggetto XMLHttpRequest, è possibile definire la funzione da eseguire quando la richiesta riceve una risposta.

Questa funzione è eseguita nell'oggetto XMLHttpResponse onreadystatechange definiti nell'attributo:

Esempio

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Prova personalmente

Apprenderai di più su onreadystatechange nei capitoli successivi.

richiesta sincrona

Se si desidera eseguire una richiesta sincrona, si prega di impostare open() Il terzo parametro del metodo viene impostato su false:

xhttp.open("GET", "ajax_info.txt", false);

Async = false viene a volte utilizzato per test rapidi. Puoi anche vedere richieste同步ne nel codice JavaScript più vecchio.

Poiché il codice aspetterà che il server si completi, non è necessario la funzione onreadystatechange:

Esempio

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

Prova personalmente

Non raccomandiamo XMLHttpRequest sincrono (async = false), perché JavaScript si fermerà fino a che il server non risponde. Se il server è occupato o lento, l'applicazione potrebbe bloccarsi o fermarsi.

XMLHttpRequest sincrono è in fase di rimozione dagli standard web, ma questo processo potrebbe richiedere molti anni.

Gli strumenti di sviluppo moderno incoraggiano avvisi per richieste同步e, e in questo caso potrebbe essere lanciata l'eccezione InvalidAccessError.