Oggetto XMLHttpRequest di AJAX
- Pagina precedente Introduzione a AJAX
- Pagina successiva Richiesta AJAX
L'oggetto XMLHttpRequest è la pietra angolare di AJAX.
- Crea un oggetto XMLHttpRequest
- Definisci la funzione di callback
- Aprire l'oggetto XMLHttpRequest
- Inviare richieste al server
Oggetto XMLHttpRequest
Tutti i browser moderni lo supportano Oggetto XMLHttpRequest.
L'oggetto XMLHttpRequest può essere utilizzato per scambiare dati con il server Web in background. Questo significa che è possibile aggiornare parte del contenuto della pagina web senza dover ricaricare l'intera pagina.
Crea un oggetto XMLHttpRequest
Tutti i browser moderni (Chrome, Firefox, IE, Edge, Safari, Opera) hanno un oggetto XMLHttpRequest integrato Oggetto XMLHttpRequest.
Sintassi per creare un oggetto XMLHttpRequest:
variable = new XMLHttpRequest();
Definisci la funzione di callback
La funzione di callback è una funzione passata come parametro a un'altra funzione.
In questo caso, la funzione di callback dovrebbe contenere il codice da eseguire quando la risposta è pronta.
xhttp.onload = function() {
// Cosa fare quando la risposta è pronta
}
Invia la richiesta
Per inviare una richiesta al server, puoi usare l'oggetto XMLHttpRequest open() e send() Metodo:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Esempio
// Crea l'oggetto XMLHttpRequest
const xhttp = new XMLHttpRequest();
// Definisci la funzione di callback
xhttp.onload = function() {
// Puoi usare i dati qui
}
// Invia la richiesta
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Accesso a domini incrociati (Access Across Domains)
Per motivi di sicurezza, i browser moderni non permettono l'accesso a domini incrociati.
Questo significa che la pagina web e il file XML che cerca di caricare devono essere situati sullo stesso server.
Gli esempi su CodeW3C.com aprono file XML situati nel dominio CodeW3C.com.
Se desideri utilizzare uno degli esempi sopra nella tua pagina web, il file XML che carichi deve essere situato sul tuo server.
Metodi dell'oggetto XMLHttpRequest
| Metodo | Descrizione |
|---|---|
| new XMLHttpRequest() | Crea un nuovo oggetto XMLHttpRequest. |
| abort() | Annulla la richiesta corrente. |
| getAllResponseHeaders() | Restituisci informazioni sulla testa. |
| getResponseHeader() | Restituisci informazioni specifiche sulla testa. |
| open(method, url, async, user, psw) |
Stabilisci la richiesta.
|
| send() | Invia una richiesta al server, utilizzato per richieste GET. |
| send(string) | Invia una richiesta al server, utilizzato per richieste POST. |
| setRequestHeader() | Aggiungi un tag/valore alla intestazione da inviare. |
Attributi dell'oggetto XMLHttpRequest
| Proprietà | Descrizione |
|---|---|
| onload | Definisci la funzione da chiamare quando ricevi una richiesta (caricamento). |
| onreadystatechange | Definisci la funzione da chiamare quando l'attributo readyState cambia. |
| readyState |
Salva lo stato di XMLHttpRequest
|
| responseText | responseText |
| Restituisce i dati di risposta in formato stringa | responseXML |
| stato |
Restituisce il numero di stato della richiesta
Per la lista completa visitare Manuale di riferimento per i messaggi HTTP |
| statusText | Restituisce i dati di risposta in formato XML |
Restituisce il testo di stato (ad esempio "OK" o "Not Found")
Attributo onload
Definire una funzione di callback nel XMLHttpRequest oggetto onload La funzione è definita nell'attributo
Esempio
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Molti callback
Se ci sono più task AJAX nel sito, creare una funzione che esegue l'oggetto XMLHttpRequest e creare un callback per ogni task AJAX
La chiamata della funzione deve includere l'URL e la funzione da chiamare quando la risposta è pronta
Esempio
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// Ecco l'azione
}
function myFunction2(xhttp) {
// Ecco l'azione
}
Attributo onreadystatechange
readyState Proprietà che salvano lo stato di XMLHttpRequest
onreadystatechange Proprietà che definisce una funzione di callback eseguita quando cambia il readyState
stato Proprietà e statusText Proprietà che salvano lo stato dell'oggetto XMLHttpRequest
| Proprietà | Descrizione |
|---|---|
| onreadystatechange | Definisce la funzione da chiamare quando cambia l'attributo readyState |
| readyState |
Salva lo stato di XMLHttpRequest
|
| stato |
Restituisce il numero di stato della richiesta
Per la lista completa visitare Manuale di riferimento per i messaggi HTTP |
| statusText | statusText |
Restituisce il testo di stato (ad esempio "OK" o "Not Found").
La funzione onreadystatechange viene chiamata ogni volta che cambia il readyState. 4 e status è 200 Quando la risposta è pronta:
Esempio
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
L'evento onreadystatechange è stato attivato quattro volte (1-4), con una variazione del readyState ogni volta.
- Pagina precedente Introduzione a AJAX
- Pagina successiva Richiesta AJAX
