ti mando una pagina scritta in modo prolisso, per uso didattico.
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagina senza titolo</title>
<link href="../../stili/Styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function ListBox_regioni_onchange_get(v)
{
/*-----------------------------------------------------------------------
Qui faccio alcune operazioni prima di richiamare ajax.
Per esempio, disabilito la lista regioni, o rendo visibile una immagine
per indicare ajax al lavoro
------------------------------------------------------------------------*/
//disabilito la lista regioni
v.disabled = true;
//creo l'oggetto che fa la richiesta http
var objHTTP = null;
if(window.XMLHttpRequest)
{
// Gecko (Firefox, Moz), KHTML (Konqueror, Safari), Opera, Internet Explorer 7
objHTTP = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
try
{
// Internet Explorer 6
objHTTP = new ActiveXObject("MSXML2.XMLHTTP");
}
catch(e)
{
// Internet Explorer 4,5
objHTTP = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else
{
alert("Non è possibile creare l'oggetto che fa la richiesta http");
return;
}
//lista parametri da mandare via post nel formato
//variabile1=valore1&variabile2=valore2...
var parametri = "codice_istat_regione=" + escape(v.value);
/*-------------------------------------------------------------------------
La risorsa da richiedere è la pagina server che svolge i compiti richiesti.
Se è la medesima, si può usare ?.
Può naturalmente essere seguita da parametri.
In questo caso spedisco il parametro ajax_comando per dire alla pagina
cosa fare
--------------------------------------------------------------------------*/
var url = "ajax_in_action/regioni_provincie.aspx?ajax_comando=provincie";
//apertura connessione HTTP
//1° parametro, GET, POST, HEAD
//2° parametro, risorsa da richiedere: ? per richiamare la pagina medesima
//3° parametro, asincrona=true, sincrona=false
objHTTP.open("POST", url, true);
objHTTP.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
objHTTP.setRequestHeader('Content-length',parametri.length);
objHTTP.setRequestHeader('Connection', 'close');
/*--------------------------------------------------------------------------------
//impostazione della funzione di callback: in questo caso, la funzione è in linea.
//ma è possibile indicare il NOME della funzione. Per esempio:
//objHTTP.onreadystatechange = mia_funzione; //nota: senza parentesi finali
// e altrove, per esempio più sotto, definire la funzione:
//function mia_funzione(){...}
---------------------------------------------------------------------------------*/
objHTTP.onreadystatechange = function()
{
if (objHTTP.readyState == 4)
{
if (objHTTP.status != 200)
{
/*--------------------------------------------------------------------
Qui sono in errore, e faccio le opportune operazioni, per esempio,
riabilito i pulsanti disabilitati, messaggio di errore, etc...
---------------------------------------------------------------------*/
v.disabled = false;
alert("ERRORE NELLA TRASMISSIONE DATI!"
+ "\n\nreadyState:"
+ objHTTP.readyState
+ "\nstatus: "
+ objHTTP.status
+ "\nstatusText: "
+ objHTTP.statusText
+ "\n\nheaders:\n"
+ objHTTP.getAllResponseHeaders()
);
return;
}
/*--------------------------------------------------------------------
Qui ho ottenuto i dati dal server
o sotto forma di testo o html, con objHTTP.responseText
o sotto forma di xml, con objHTTP.responseXML
---------------------------------------------------------------------*/
var t = objHTTP.responseText;
//var tx = objHTTP.responseXML;
//creo la lista provincie
document.getElementById("div2").innerHTML = "Scegli la provincia:
" + t;
//riabilito la lista regioni
v.disabled = false;
}
};
//invio della richiesta, per GET e HEAD è null
objHTTP.send(parametri);
}
</script>
</head>
<body>
<form id="form1" action="?">
<div id="div1" style="float: left">
Scegli la regione:
<select name="regioni" id="regioni" onchange="ListBox_regioni_onchange_get(this);" style="height: 333px; width: 208px;" multiple="multiple">
<option value="13">ABRUZZO</option>
<option value="17">BASILICATA</option>
<option value="18">CALABRIA</option>
<option value="15">CAMPANIA</option>
<option value="08">EMILIA-ROMAGNA</option>
<option value="06">FRIULI-VENEZIA GIULIA</option>
<option value="12">LAZIO</option>
<option value="07">LIGURIA</option>
<option value="03">LOMBARDIA</option>
<option value="11">MARCHE</option>
<option value="14">MOLISE</option>
<option value="01">PIEMONTE</option>
<option value="16">PUGLIA</option>
<option value="20">SARDEGNA</option>
<option value="19">SICILIA</option>
<option value="09">TOSCANA</option>
<option value="04">TRENTINO-ALTO ADIGE</option>
<option value="10">UMBRIA</option>
<option value="02">VALLE D'AOSTA</option>
<option value="05">VENETO</option>
</select>
</div>
<div id="div2">
Scegli la provincia:
</div>
</form>
</body>
</html>
Rispondi quotando
