Original example: Ajax shows three major changes in provinces and cities

my first Ajax

<SCRIPT>
VaR XMLHTTP;
VaR proid;
VaR cityid;
VaR pronode;
VaR citynode;
Function createxmlhttprequest ()
{

If (window. activexobject)
{
XMLHTTP = new window. activexobject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHttpRequest)
{
XMLHTTP = new window. XMLHttpRequest ();
}

}

Function proload ()
{

Createxmlhttprequest ();
XMLHTTP. onreadystatechange = handlestatechange;
XMLHTTP. Open ("get", "area. xml", true );
XMLHTTP. Send (null );

}

Function cityload ()
{
Proid = Document. Ajax. proselect. value;
// Alert (proid );
If (! XMLHTTP)
{
XMLHTTP. Abort ();
}
Createxmlhttprequest ();
XMLHTTP. onreadystatechange = handlestatechange2;
XMLHTTP. Open ("get", "area. xml", true );
XMLHTTP. Send (null );

}

function areaload ()
{< br> cityid = document. ajax. cityselect. value;
// alert (cityid);
If (! XMLHTTP)
{< br> XMLHTTP. abort ();
}< br> createxmlhttprequest ();
XMLHTTP. onreadystatechange = handlestatechange3;
XMLHTTP. open ("get", "area. XML ", true);
XMLHTTP. send (null);

}< br>

Function handlestatechange ()
{
If (XMLHTTP. readystate = 4)
{
If (XMLHTTP. Status = 200)
{
Try
{
Pro ();
}
Catch (exception)
{
Alert ("error ");
}

}
}

}

Function handlestatechange2 ()
{
If (XMLHTTP. readystate = 4)
{
If (XMLHTTP. Status = 200)
{
Try
{
Prochagnge ();
}
Catch (exception)
{
Alert ("error ");
}

}
}

}

Function handlestatechange3 ()
{
If (XMLHTTP. readystate = 4)
{
If (XMLHTTP. Status = 200)
{
Try
{

Citychagnge ();
// Alert (cityid );
}
Catch (exception)
{
Alert ("error ");
}

}
}

}

Function Pro ()
{

VaR select = Document. getelementbyid ("proselect ");
While (select. length> 0)
{
Select. Remove (0 );
}
Document. Ajax. proselect. Add (document. createelement ("option "));
Document. Ajax. proselect. Options [0]. Text = "select Province ";
Document. Ajax. proselect. Options [0]. value = "select Province ";
VaR xmldoc = XMLHTTP. responsexml;
VaR pronode = xmldoc. getelementsbytagname ("Province ");
For (I = 0; I <pronode. length; I ++)
{
// Alert (pronode [I]. getattribute ("name "))
Document. Ajax. proselect. Add (document. createelement ("option "));
Document. Ajax. proselect. Options [I + 1]. Text = pronode [I]. getattribute ("name ");
Document. Ajax. proselect. Options [I + 1]. value = pronode [I]. getattribute ("ID ");
}

}

function prochagnge ()
{< br> var select = document. getelementbyid ("cityselect");
while (select. length> 0)
{< br> select. remove (0);
}< br> document. ajax. cityselect. add (document. createelement ("option");
document. ajax. cityselect. options [0]. TEXT = "select a city";
document. ajax. cityselect. options [0]. value = "no";

VaR select = Document. getelementbyid ("areaselect ");
While (select. length> 0)
{
Select. Remove (0 );
}
Document. Ajax. areaselect. Add (document. createelement ("option "));
Document. Ajax. areaselect. Options [0]. Text = "Please select ";
Document. Ajax. areaselect. Options [0]. value = "no ";

VaR xmldoc = XMLHTTP. responsexml;
VaR pronode = xmldoc. getelementsbytagname ("Province ");

For (I = 0; I <pronode. length; I ++)
{
If (pronode [I]. getattribute ("ID") = proid)
{
VaR pronode2 = xmldoc. getelementsbytagname ("Province") [I];
Break;
}
}
Citynode = pronode2.getelementsbytagname ("city ");

For (I = 0; I <citynode. length; I ++)
{

// Alert (pronode [I]. getattribute ("name "))
If (citynode [I]. getattribute ("ID ")! = "")
{
Document. Ajax. cityselect. Add (document. createelement ("option "));
Document. Ajax. cityselect. Options [I + 1]. Text = citynode [I]. getattribute ("name ");
Document. Ajax. cityselect. Options [I + 1]. value = citynode [I]. getattribute ("ID ");
}
}

}

Function citychagnge ()
{

VaR select = Document. getelementbyid ("areaselect ");
While (select. length> 0)
{
Select. Remove (0 );
}
If (document. Ajax. cityselect. value! = "No ")
{
For (I = 0; I <citynode. length; I ++)
{
If (citynode [I]. getattribute ("ID") = cityid)
{
// Alert (I );
VaR citynode2 = citynode [I];
Break;
}
}

 

var areanode = citynode2.getelementsbytagname ("area");
for (I = 0; I {< br> If (areanode [I]. getattribute ("ID ")! = "")
{< br> document. ajax. areaselect. add (document. createelement ("option");
document. ajax. areaselect. options [I]. TEXT = areanode [I]. childnodes [0]. nodevalue;
document. ajax. areaselect. options [I]. value = areanode [I]. getattribute ("ID");
}< BR >}< br>
}< br> else
{< br> document. ajax. areaselect. add (document. createelement ("option");
document. ajax. areaselect. options [0]. TEXT = "Please select";
document. ajax. areaselect. options [0]. value = "no";
}< BR >}

</SCRIPT>
<Body onload = "proload ()">
<Form action = # name = "ajax">
<Select name = "proselect" onchange = "cityload ()">
<Option> select a province </option>
</SELECT>

<Select name = "cityselect" onchange = "areaload ()">
<Option> select a city </option>
</SELECT>
<Select name = "areaselect">
<Option> select a region </option>
</SELECT>
</Form>
</Body>
</Html>