Tutti i browser moderni hanno un oggetto built-in XMLHttpRequest per richiedere dati da un server.
Tutti i browser principali hanno un parser XML integrato per accedere e manipolare XML.
L'oggetto XMLHttpRequest
L'oggetto XMLHttpRequest può essere utilizzato per richiedere dati da un server web.
L'oggetto XMLHttpRequest è a developers dream , perché è possibile:
- Aggiornare una pagina web senza ricaricare la pagina
- Richiesta di dati da un server - dopo che la pagina è stata caricata
- Ricevere dati da un server - dopo che la pagina è stata caricata
- Invia i dati ad un server - in background
XMLHttpRequest Esempio
Quando si digita un carattere nel campo di inserimento in basso, un XMLHttpRequest viene inviato al server, e alcuni suggerimenti di nomi vengono restituiti (from the server) :
Esempio
Start typing a name in the input field below:
Suggestions:
L'invio di un XMLHttpRequest
Tutti i browser moderni hanno un oggetto XMLHttpRequest built-in.
Una sintassi comune JavaScript per il suo utilizzo sembra molto simile a questo:
Esempio
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", " filename ", true);
xhttp.send(); Prova tu stesso " Creazione di un oggetto XMLHttpRequest
La prima riga nell'esempio precedente crea un objet XMLHttpRequest:
var xhttp = new XMLHttpRequest();
L'evento onreadystatechange
La proprietà readyState detiene lo stato del XMLHttpRequest.
L'evento onreadystatechange viene attivato ogni volta che cambia readyState.
Durante una richiesta al server, la readyState cambia da 0 a 4:
0: Non richiesta inizializzato
1: connessione al server stabilita
2: Richiesta ricevuti
3: elaborazione della richiesta
4: richiesta finito e la risposta è pronta
Nella proprietà onreadystatechange, specificare una funzione da eseguire quando il readyState cambia:
xhttp.onreadystatechange = function()
Quando readyState è 4 e lo stato è di 200, la risposta è pronta:
if (xhttp.readyState == 4 && xhttp.status == 200)
Proprietà e metodi XMLHttpRequest
| metodo | Descrizione |
|---|---|
| new XMLHttpRequest() | Crea un nuovo oggetto XMLHttpRequest |
| open( method, url, async ) | Specifica il tipo di richiesta method : il tipo di richiesta: GET o POST url : la posizione del file async : true (asynchronous) o false (synchronous) |
| send() | Invia una richiesta al server (used for GET) |
| send( string ) | Invia una stringa di richiesta al server (used for POST) |
| onreadystatechange | Una funzione da chiamare quando cambia la proprietà readyState |
| readyState | Lo stato del XMLHttpRequest 0: Non richiesta inizializzato 1: connessione al server stabilita 2: Richiesta ricevuti 3: elaborazione della richiesta 4: richiesta finito e la risposta è pronta |
| status | 200: OK 404 pagina non trovata |
| responseText | I dati di risposta sotto forma di stringa |
| responseXML | I dati di risposta come dati XML |
A livello di dominio
Per motivi di sicurezza, i browser moderni non permettono l'accesso tra domini.
Ciò significa che sia la pagina web e il file XML si cerca di caricare, devono trovarsi sullo stesso server.
Gli esempi su w3ii tutti i file XML aperti situati sul dominio w3ii.
Se si desidera utilizzare l'esempio precedente in una delle tue pagine web, i file XML si carica devono trovarsi sul proprio server.
Il responseText Proprietà
La proprietà responseText restituisce la risposta sotto forma di stringa.
Se si desidera utilizzare la risposta come una stringa di testo, utilizzare la proprietà responseText:
Il responseXML Proprietà
La proprietà responseXML restituisce la risposta come oggetto DOM XML.
Se si desidera utilizzare la risposta come oggetto DOM XML, utilizzare la proprietà responseXML:
Esempio
Richiedere il file cd_catalog.xml e utilizzare la risposta come oggetto DOM XML:
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt; Prova tu stesso " GET o POST?
GET è più semplice e veloce di POST, e può essere utilizzato in molti casi.
Tuttavia, usare sempre le richieste POST quando:
- Un file memorizzato nella cache non è un'opzione (update a file or database on the server)
- Invio di una grande quantità di dati al server (POST non ha limitazioni di dimensione)
- L'invio di input da parte dell'utente (which can contain unknown characters) , POST è più robusto e sicuro di GET
L'URL - Un file su un server
Il parametro URL del open() il metodo, è un indirizzo di un file su un server:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Il file può essere qualsiasi tipo di file, come txt e xml, o file di script del server come asp e php (che può eseguire azioni sul server prima di inviare la risposta indietro).
Asincrono - Vero o falso?
Per inviare la richiesta in modo asincrono, il parametro asincrona della open() il metodo deve essere impostata su true:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
L'invio di richieste in modo asincrono è un enorme miglioramento per gli sviluppatori web. Molte delle attività eseguite sul server sono molto in termini di tempo.
Con l'invio in modo asincrono, il codice JavaScript non deve aspettare la risposta del server, ma invece ci riesce:
- eseguire altri script in attesa di risposta del server
- gestire la risposta quando la risposta è pronta
Async = true
Quando si utilizza async = true, specificare una funzione da eseguire quando la risposta è pronta in caso onreadystatechange:
Esempio
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("demo").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send(); Prova tu stesso " Async = false
Per utilizzare async = false, modificare il terzo parametro in open() metodo su false:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
Utilizzando async = false non è consigliato, ma per un paio di piccole richieste questo può essere ok.
Ricorda che il codice JavaScript non continuerà ad eseguire, fino a quando la risposta del server è pronto. Se il server è occupato o lento, l'applicazione si blocca o si ferma.
Note: Quando si utilizza async = false, non scrivere una funzione onreadystatechange - basta inserire il codice dopo il send() dichiarazione:
Esempio
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText; Prova tu stesso " XML Parser
Tutti i browser moderni hanno un parser XML integrato.
Il Document Object Model XML (the XML DOM) contiene un sacco di metodi per accedere e modificare XML.
Tuttavia, prima che un documento XML può essere letta, deve essere caricato in un oggetto DOM XML.
Un parser XML in grado di leggere testo e convertirlo in un oggetto DOM XML.
Analisi una stringa di testo
In questo esempio viene analizzata una stringa di testo in un oggetto DOM XML, ed estrae le informazioni da esso con JavaScript:
Esempio
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Prova tu stesso " Vecchi browser (IE5 and IE6)
Le vecchie versioni di Internet Explorer (IE5 and IE6) non supportano l'oggetto XMLHttpRequest.
Per gestire IE5 e IE6, verificare se il browser supporta l'oggetto XMLHttpRequest, oppure creare un ActiveXObject:
Esempio
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} Prova tu stesso " Le vecchie versioni di Internet Explorer (IE5 and IE6) non supportano l'oggetto DOMParser.
Per gestire IE5 e IE6, verificare se il browser supporta l'oggetto DOMParser, oppure creare un ActiveXObject:
Esempio
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
Prova tu stesso " 
Altri esempi
Recuperare le informazioni di intestazione con getAllResponseHeaders()
Recuperare le informazioni di intestazione di una risorsa (file) .
Recuperare specifiche informazioni di intestazione con getResponseHeader()
Recuperare le informazioni di intestazione specifiche di una risorsa (file) .
Recuperare il contenuto di un file ASP
Come una pagina web in grado di comunicare con un server web, mentre un tipo di utente caratteri in un campo di input.
Recuperare il contenuto di un database
Come una pagina web può recuperare informazioni da un database con l'oggetto XMLHttpRequest.
Recuperare il contenuto di un file XML
Crea un XMLHttpRequest per recuperare dati da un file XML e visualizzare i dati in una tabella HTML.