Nell'articolo precedente abbiamo visto come
creare l'oggetto xmlHttpRequest e leggere i dati provenienti da un file, questa volta invece vedremo come inviare dei dati ad un file, ovviamente tutto in modo asincrono.
<input type="text" id="text"/>
<input type="submit" name="Submit" value="Invia" onclick="submitData();"/>
<script type="text/javascript">
function getXMLHttpRequestObject() {
var xmlobj;
try {
//Native support: Gecko,Opera,IE7,Safari etc
xmlobj = new XMLHttpRequest();
} catch(e) {
try {
//ActiveX support: IE6
xmlobj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//ActiveX support: IE5.5,IE5
xmlobj = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
//Ajax not supported
xmlobj = null;
return false;
}
}
}
return xmlobj;
}
function submitData() {
var text = document.getElementById('text').value;
xmlHttpRequest.open("POST","file.php",true);
xmlHttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlHttpRequest.send('text='+text);
}
xmlHttpRequest = getXMLHttpRequestObject();
</script>
Con
AJAX (
Asynchronous JavaScript and XML) abbiamo la possibilità di acquisire o inviare dati ad un file, senza dover aggiornare la pagina (in modo asincrono appunto), permettendoci di ottenere degli effetti grafici molto piacevoli
La base per una connessione asincrona è l'oggetto XMLHttpRequest, il quale per mantenere una tradizione universale
(non ci piace il lavoro facile vero?), non viene supportato da tutti i browser (IE, come al solito).
Per sopperire alla mancanza, possiamo utilizzare gli oggetti Msxml2.XMLHTTP, Microsoft.XMLHTTP eccetera (non è importante ricordarseli tutti a memoria)
Creiamo una piccola funzione che ci permetta di automatizzare la creazione dell'oggetto
<script type="text/javascript">
function getXMLHttpRequestObject() {
var xmlobj;
try {
//Supporto Nativo: Gecko,Opera,IE7,Safari etc
xmlobj = new XMLHttpRequest();
} catch(e) {
try {
//Supporto ActiveX: IE6
xmlobj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//Supporto ActiveX: IE5.5,IE5
xmlobj = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
//Ajax non supportato
xmlobj = null;
return false;
}
}
}
return xmlobj;
}
</script>