Asynchronus JavaScript Database Driven Drop Down Lists

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<title>Asynchronus JavaScript Database Driven Drop Down Lists</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005, 2006 Roderick Divilbiss">
<script type="text/javascript">
<!--
    var styleId='';
    var sizeId='';

function getAvailableSizes(pStyle) {
    styleId=pStyle;
    var gURL = 'shoeOrderFormGetAvailableSizes.asp?style='+styleId;
    //create the Cross-browser XMLHttpRequest object
    if (window.XMLHttpRequest) { // code for Mozilla, Safari, etc 
        xmlhttp=new XMLHttpRequest();
        xmlhttp.onreadystatechange=loadSizes;
        xmlhttp.open("GET", gURL, false);
        xmlhttp.send(null);
    } else if (window.ActiveXObject) { //IE 
        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); 
        if (xmlhttp) {
            xmlhttp.onreadystatechange=loadSizes;
            xmlhttp.open('GET', gURL, false);
            xmlhttp.send();
        }
    }
    // order is not ready if we just changed item style
    document.getElementById('buttons').style.display='none';
    if (sizeId!='') {
        // we could have changed the shoe style after selecting a size - reset the colors
        getAvailableColors('');
    }
}

// function to handle asynchronus call
function loadSizes() {
    if (xmlhttp.readyState==4) { 
        if (xmlhttp.status==200) { 
            document.getElementById('sizes').innerHTML=xmlhttp.responseText;
            if (xmlhttp.responseText.indexOf('disabled')<=0) {
                document.getElementById('size').focus();
            } 
        }
    }
}

function getAvailableColors(pSize) {
    sizeId=pSize;
    if (pSize=='') {
        var gURL = 'shoeOrderFormGetAvailableColors.asp';
    }else{
        var gURL = 'shoeOrderFormGetAvailableColors.asp?style='+styleId+'&size='+sizeId;
    } 
    //create the Cross-browser XMLHttpRequest object
    if (window.XMLHttpRequest) { // code for Mozilla, Safari, etc 
        xmlhttp=new XMLHttpRequest();
        if (xmlhttp.overrideMimeType) {
            xmlhttp.overrideMimeType('text/xml');
        } 
        xmlhttp.onreadystatechange=loadColors;
        xmlhttp.open("GET", gURL, true);
        xmlhttp.send(null);
    } else if (window.ActiveXObject) { //IE 
        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); 
        if (xmlhttp) {
            xmlhttp.onreadystatechange=loadColors;
            xmlhttp.open('GET', gURL, false);
            xmlhttp.send();
        }
    }
    // order is not ready if we just changed size...
    document.getElementById('buttons').style.display='none';
}

// function to handle asynchronus call
function loadColors() {
    if (xmlhttp.readyState==4) { 
        if (xmlhttp.status==200) { 
            document.getElementById('colors').innerHTML=xmlhttp.responseText;
            if (xmlhttp.responseText.indexOf('disabled')<=0) {
                document.getElementById('color').focus();
            }
        }
    }
}

function selectedColor(pColor) {
    document.getElementById('buttons').style.display='inline';
}
//-->
</script>
<style type="text/css">
<!--
#buttons {
    display: none;
}
-->
</style>
</head>

<body>
<noscript>
  <p>This page requires JavaScript to function.</p>
</noscript>
  <p>Select the shoe style, your size, and then the shoe color:</p>
  <form method="get" action="shoeOrderForm.asp">
    <p><!--#include file="shoeOrderFormGetStyles.asp"-->&nbsp;
       <span id="sizes"><!--#include file="shoeOrderFormGetAvailableSizes.asp"--></span>&nbsp;
       <span id="colors"><!--#include file="shoeOrderFormGetAvailableColors.asp"--></span>&nbsp;
       <span id="buttons"><input type="submit" value="Add To Cart"></span>
  </form>
</body>

</html>

<%
Dim styleID, color, conn, rs, query, out

styleID = request.querystring("style")
if styleID & "x"="x" then
    styleID=-1
end if

query = "SELECT id, style FROM shoeStyles ORDER BY style;"
Set conn = Server.CreateObject("ADODB.Connection")
on error resume next
    conn.Open Application("articles")
if err then
    response.write err.number & " " & err.description & " " & err.source & "<br>" & vbLF
    response.end
end if
Set rs = conn.Execute(query)
if err then
    response.write err.number & " " & err.description & " " & err.source & "<br>" & vbLF & query
    response.end
end if

out = "<select name=""style"" id=""style"" size=""1"" onchange=""getAvailableSizes(this[this.selectedIndex].value);"">"
out = out & "<option value="""">Select style...</option>"
while not rs.eof
    if CInt(rs("id"))=CInt(styleID) then
        out = out & "<option selected value="""& rs("id") &""">"& rs("style") &"</option>"
    else 
        out = out & "<option value="""& rs("id") &""">"& rs("style") &"</option>"
    end if 
    rs.movenext
wend
out = out & "</select>"
rs.close
conn.close
Set conn = nothing
response.write out
%>

<%
Dim gas_styleId, gas_size, gas_conn, gas_rs, gas_query, gas_out
gas_styleId = request.querystring("style")
gas_size = request.querystring("size")
if (gas_styleId & "x" <> "x") then
    gas_query = "SELECT [size] FROM shoeInventory WHERE (id="& gas_styleId &") AND ([quantity]>0) GROUP BY [size] ORDER BY CDbl([size]);"
    Set gas_conn = Server.CreateObject("ADODB.Connection")
    on error resume next
    gas_conn.Open Application("articles")
    if err then
        response.write err.number & " " & err.description & " " & err.source & "<br>" & vbLF
        response.end
    end if
    Set gas_rs = gas_conn.Execute(gas_query)
    if err then
        response.write err.number & " " & err.description & " " & err.source & "<br>" & vbLF & gas_query
        response.end
    end if
    ' if we have a response, build a select otherwise indicate out of stock
    if NOT (gas_rs.bof AND gas_rs.eof) then
        gas_out = "<select name=""size"" id=""size"" size=""1"" onchange=""getAvailableColors(this[this.selectedIndex].value);"">"
        if gas_size & "x" = "x" then
            gas_out = gas_out & "<option selected value="""">Select size...</option>"
        end if
        while not gas_rs.eof
            if gas_rs("size") = gas_size then
                gas_out = gas_out & "<option selected value="""& gas_rs("size") &""">"& gas_rs("size") &"</option>"
            else
                gas_out = gas_out & "<option value="""& gas_rs("size") &""">"& gas_rs("size") &"</option>"
            end if
            gas_rs.movenext
        wend
        gas_out = gas_out & "</select>"
    else
        gas_out = "<input id=""size"" type=""text"" size=""10"" value=""Out of Stock"" disabled>"
    end if
    gas_rs.close
    gas_conn.close
    Set gas_conn = nothing
else
    gas_out = "<select name=""size"" id=""size"" size=""1"" disabled><option>Choose Style</option></select>"
end if
response.write gas_out
%>

<%
Dim gac_styleId, gac_size, gac_color, gac_conn, gac_rs, gac_query, gac_out
gac_styleId = request.querystring("style")
gac_size = request.querystring("size")
gac_color = request.querystring("color")
if (gac_styleId & "x" <> "x") AND (gac_size & "x" <> "x")then
    gac_query = "SELECT color FROM shoeInventory WHERE ([size]="""& gac_size &""") AND (id="& gac_styleId &") AND (quantity>0) ORDER BY color;"
    Set gac_conn = Server.CreateObject("ADODB.Connection")
    on error resume next
    gac_conn.Open Application("articles")
    if err then
        response.write err.number & " " & err.description & " " & err.source & "<br>" & vbLF
        response.end
    end if
    Set gac_rs = gac_conn.Execute(gac_query)
    if err then
        response.write err.number & " " & err.description & " " & err.source & "<br>" & vbLF & gac_query
        response.end
    end if
    if NOT(gac_rs.bof AND gac_rs.eof) then
        gac_out = "<select name=""color"" id=""color"" size=""1"" onchange=""selectedColor(this[this.selectedIndex].value);"">"
        if gac_color&"x"="x" then
            gac_out = gac_out & "<option value="""">Select color...</option>"
        end if
        while not gac_rs.eof
            if gac_rs("color")=gac_color then
                gac_out = gac_out & "<option selected value="""& gac_rs("color") &""">"& gac_rs("color") &"</option>"
            else
                gac_out = gac_out & "<option value="""& gac_rs("color") &""">"& gac_rs("color") &"</option>"
            end if
            gac_rs.movenext
        wend
        gac_out = gac_out & "</select>"
    else
        gac_out = "<input id=""color"" type=""text"" value=""Out of Stock"" readonly>"
    end if
    gac_rs.close
    gac_conn.close
    Set gac_conn = nothing
else
    gac_out = "<select name=""color"" id=""color"" size=""1"" disabled><option>Choose size</option></select>"
end if
response.write gac_out
%>

How can you populate related drop down lists from the database without making a round trip to the server to refresh the page?