Oggetto XMLHttpRequest
- Pagina precedente Clonazione del nodo DOM
- Pagina successiva Indice del manuale DOM
L'oggetto XMLHttpRequest fornisce metodi per comunicare con il server dopo che la pagina è stata caricata.
Cos'è l'oggetto XMLHttpRequest?
L'oggetto XMLHttpRequest èIl sogno dei developer, perché puoi:
- Aggiornare la pagina senza ricaricare la pagina
- Richiedere dati dal server dopo che la pagina è stata caricata
- Ricevere dati dal server dopo che la pagina è stata caricata
- Inviare dati al server in background
Tutti i browser moderni supportano l'oggetto XMLHttpRequest.
Esempio:Effettuare comunicazione XML HTTP con il server quando si inserisce del testo.
Creazione dell'oggetto XMLHttpRequest
Con una singola riga di codice JavaScript possiamo creare l'oggetto XMLHttpRequest.
In tutti i browser moderni (compreso IE 7):
xmlhttp=new XMLHttpRequest()
In Internet Explorer 5 e 6:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
Esempio
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// codice per tutti i nuovi browser}
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// codice per IE5 e IE6}
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Il tuo browser non supporta XMLHTTP.");
}
}
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "caricato"}
if (xmlhttp.status==200)
{// 200 = OK}
// ...nostro codice qui...
}
else
{
alert("Problema nel recupero dei dati XML");
}
}
}
</script>
Commento:onreadystatechange è un gestore di eventi. Il suo valore (state_Change) è il nome di una funzione che viene chiamata quando lo stato dell'oggetto XMLHttpRequest cambia. Lo stato varia da 0 (inizializzato) a 4 (completato). Eseguiamo il codice solo quando lo stato è 4.
Perché usare Async=true ?
Il nostro esempio ha utilizzato "true" come terzo parametro di open().
Questo parametro determina se la richiesta deve essere elaborata in modo asincrono.
True indica che lo script continuerà ad eseguire dopo il metodo send(), senza aspettare una risposta dal server.
L'evento onreadystatechange complicava il codice. Ma è il metodo più sicuro per prevenire che il codice si fermi senza ottenere una risposta dal server.
Impostando questo parametro su "false", puoi evitare ulteriori codice onreadystatechange. Se non è importante eseguire il resto del codice in caso di fallimento della richiesta, puoi utilizzare questo parametro.
Più esempi
Carica un file textfile in un elemento div tramite XML HTTP
Esegui una richiesta HEAD tramite XML HTTP
XML / ASP
Puoi anche aprire e inviare il documento XML al pagina ASP sul server, analizzare questa richiesta e quindi restituire i risultati.
<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
//{ codice per IE7, Firefox, Opera, ecc.
xmlHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
//{ codice per IE6, IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp!=null)
{
xmlHttp.open("GET", "note.xml", false);
xmlHttp.send(null);
xmlDoc=xmlHttp.responseText;
xmlHttp.open("POST", "demo_dom_http.asp", false);
xmlHttp.send(xmlDoc);
document.write(xmlHttp.responseText);
}
else
{
alert("Il tuo browser non supporta XMLHTTP.");
}
</script>
</body>
</html>
Pagina ASP, scritta in VBScript:
<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
for each x in xmldoc.documentElement.childNodes
if x.NodeName = "to" then name=x.text
next
response.write(name)
%>
Tramite l'uso dell'attributo response.write, i risultati vengono restituiti al client.
È l'oggetto XMLHttpRequest uno standard W3C?
Nessuna specifica W3C raccomanda l'oggetto XMLHttpRequest.
Tuttavia, la specifica "Load and Save" del livello 3 del W3C DOM contiene alcune funzionalità simili, ma nessun browser le ha implementate.
- Pagina precedente Clonazione del nodo DOM
- Pagina successiva Indice del manuale DOM
