Io fatto questo esempio:
Sul db di nome db2.mdb ho due tabelle:
tabella1
campoID (contatore)
campoNome (testo)
tabella2
campoID (contatore)
campoNome (testo)
parentID (numerico)
Queste le pagine:
pagina.asp
codice:
<%
Response.CacheControl = "no-cache"
Response.AddHeader "pragma", "no-cache"
Response.Expires = 0
session.LCID = 1040
%>
<!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" xml:lang="it" lang="it" dir="ltr">
<head>
<title>Esempio AJAX</title>
<script language="javascript" type="text/javascript" src="utility.js"></script>
<script language="javascript" type="text/javascript">
function caricaTesto(metodo, nomeFile, parametri, idTag) {
var ajax = assegnaXMLHttpRequest();
var elemento = prendiElementoDaId(idTag);
var usaLink = true;
if(ajax) {
usaLink = false;
ajax.open(metodo, nomeFile, true);
if(metodo == "post") {
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajax.send(parametri);
}
if(metodo == "get") {
ajax.setRequestHeader('connection', 'close');
}
ajax.onreadystatechange = function() {
if(ajax.readyState == readyState.COMPLETATO) {
if(statusText[ajax.status] == "OK")
elemento.innerHTML = ajax.responseText;
else {
elemento.innerHTML = "Impossibile effettuare l'operazione richiesta.
";
elemento.innerHTML += "Errore riscontrato: " + statusText[ajax.status];
}
}
// else
// elemento.innerHTML = "Caricamento in corso...";
}
if(metodo == "get") {
ajax.send(null);
}
}
return usaLink;
}
</script>
</head>
<body>
<div id="parents" style="float: left;">
<%
set conn = server.createObject("ADODB.Connection")
conn.open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & server.mapPath("\ajax\db\db2.mdb")
sql = "SELECT * FROM tabella1 ORDER BY campoNome"
set rs = conn.execute(sql)
if not rs.eof then
%>
<select name="parents" onchange="return caricaTesto('get','list2.asp?id='+this.options[this.selectedIndex].value,null,'childs');">
<option value="">Seleziona</option>
<%
do until rs.eof
%>
<option value="<%=rs("campoID")%>"><%=rs("campoNome")%></option>
<%
rs.moveNext
loop
%>
</select>
<%
end if
rs.close
set rs = nothing
conn.close
set conn = nothing
%>
</div>
<div id="childs"></div>
</body>
</html>
list2.asp
codice:
<%
Response.CacheControl = "no-cache"
Response.AddHeader "pragma", "no-cache"
Response.Expires = 0
session.LCID = 1040
id = request.queryString("id")
if len(id) > 0 and isNumeric(id) then
set conn = server.createObject("ADODB.Connection")
conn.open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & server.mapPath("\ajax\db\db2.mdb")
sql = "SELECT * FROM tabella2 WHERE parentID = " & id & " ORDER BY campoNome"
set rs = conn.execute(sql)
if not rs.eof then
%>
<select name="childs">
<option value="">Seleziona</option>
<%
do until rs.eof
%>
<option value="<%=rs("campoID")%>"><%=rs("campoNome")%></option>
<%
rs.moveNext
loop
%>
</select>
<%
end if
rs.close
set rs = nothing
conn.close
set conn = nothing
end if
%>
il file utility.js incluso nella pagina.asp
codice:
function prendiElementoDaId(id_elemento) {
var elemento;
if(document.getElementById)
elemento = document.getElementById(id_elemento);
else
elemento = document.all[id_elemento];
return elemento;
}
function assegnaXMLHttpRequest() {
var XHR = null,
browserUtente = navigator.userAgent.toUpperCase();
if(typeof(XMLHttpRequest) === "function" || typeof(XMLHttpRequest) === "object")
XHR = new XMLHttpRequest();
else if(window.ActiveXObject && browserUtente.indexOf("MSIE 4") < 0) {
if(browserUtente.indexOf("MSIE 5") < 0)
XHR = new ActiveXObject("Msxml2.XMLHTTP");
else
XHR = new ActiveXObject("Microsoft.XMLHTTP");
}
return XHR;
}
var readyState = {
INATTIVO: 0,
INIZIALIZZATO: 1,
RICHIESTA: 2,
RISPOSTA: 3,
COMPLETATO: 4
}
var statusText = new Array();
statusText[100] = "Continue";
statusText[101] = "Switching Protocols";
statusText[200] = "OK";
statusText[201] = "Created";
statusText[202] = "Accepted";
statusText[203] = "Non-Authoritative Information";
statusText[204] = "No Content";
statusText[205] = "Reset Content";
statusText[206] = "Partial Content";
statusText[300] = "Multiple Choices";
statusText[301] = "Moved Permanently";
statusText[302] = "Found";
statusText[303] = "See Other";
statusText[304] = "Not Modified";
statusText[305] = "Use Proxy";
statusText[306] = "(unused, but reserved)";
statusText[307] = "Temporary Redirect";
statusText[400] = "Bad Request";
statusText[401] = "Unauthorized";
statusText[402] = "Payment Required";
statusText[403] = "Forbidden";
statusText[404] = "Not Found";
statusText[405] = "Method Not Allowed";
statusText[406] = "Not Acceptable";
statusText[407] = "Proxy Authentication Required";
statusText[408] = "Request Timeout";
statusText[409] = "Conflict";
statusText[410] = "Gone";
statusText[411] = "Length Required";
statusText[412] = "Precondition Failed";
statusText[413] = "Request Entity Too Large";
statusText[414] = "Request-URI Too Long";
statusText[415] = "Unsupported Media Type";
statusText[416] = "Requested Range Not Satisfiable";
statusText[417] = "Expectation Failed";
statusText[500] = "Internal Server Error";
statusText[501] = "Not Implemented";
statusText[502] = "Bad Gateway";
statusText[503] = "Service Unavailable";
statusText[504] = "Gateway Timeout";
statusText[505] = "HTTP Version Not Supported";
statusText[509] = "Bandwidth Limit Exceeded";
Rispondi quotando
