Myfirstajax.htm:
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Head>
<Title> my first Ajax </title>
<Script language = "JavaScript">
// ================================================ ========================================================== ======================================
VaR XMLHTTP;
Function createxmlhttprequest ()
{
If (window. activexobject)
XMLHTTP = new window. activexobject ("Microsoft. XMLHTTP ");
Else if (window. XMLHttpRequest)
XMLHTTP = new window. XMLHttpRequest ();
}
// ==================================== ========================================================== =====================================================< BR> function loadlist ()
{< br> createxmlhttprequest ();
XMLHTTP. onreadystatechange = handlestatechange_1;
XMLHTTP. open ("get", "data. XML ", true);
XMLHTTP. send (null);
}
Function handlestatechange_1 ()
{
If (XMLHTTP. readystate = 4)
{
If (XMLHTTP. Status = 200)
{
Try
{
Filllist ();
}
Catch (exception)
{
Alert ("error ");
}
}
}
}
Function addoption (list, text, value)
{
VaR Index = List. Options. length;
List. Options [Index] = New Option (text, value );
// List. selectedindex = index;
}
Function filllist ()
{
VaR xmldoc = XMLHTTP. responsexml;
VaR nodes = xmldoc. getelementsbytagname ("pro ");
For (I = 0; I <nodes. length; I ++)
{
VaR nodevalue = nodes [I]. getattribute ("name ");
Addoption (document. Ajax. Province, nodevalue, nodevalue );
}
}
// ================================================ ========================================================== ======================================
Function startrequest ()
{
Createxmlhttprequest ();
XMLHTTP. onreadystatechange = handlestatechange;
XMLHTTP. Open ("get", "data. xml", true );
XMLHTTP. Send (null );
}
Function handlestatechange ()
{
If (XMLHTTP. readystate = 4)
{
If (XMLHTTP. Status = 200)
{
Try
{
Simple (document. Ajax. province. selectedindex );
}
Catch (exception)
{
Alert ("error ");
}
}
}
}
Function simple (INDEX)
{
// Alert (document. Ajax. province. selectedindex); // selectedindex starts from 0. If not selected,-1 is returned.
If (Index =-1)
{
Document. Ajax. province. selectedindex = 0;
Index = 0;
}
VaR STR = "";
VaR pro = Document. Ajax. Name. value;
VaR xmldoc = XMLHTTP. responsexml;
VaR jiangnode = xmldoc. getelementsbytagname ("pro") [Index];
// Alert (jiangnode. getattribute ("name "));
STR = jiangnode. getattribute ("name") + ":"
VaR detailnode = jiangnode. getelementsbytagname ("detail ");
For (I = 0; I <detailnode. length; I ++)
{
If (I = 0)
{
STR = STR + detailnode [I]. childnodes [0]. nodevalue;
}
Else
{
STR = STR + "," + detailnode [I]. childnodes [0]. nodevalue;
}
}
Document. Ajax. Name. value = STR;
}
// ================================================ ========================================================== ======================================
Function re_size ()
{
// Alert (event. srcelement. Name );
If (event. srcelement. Name = "add ")
{
Document. Ajax. province. size = Document. Ajax. province. Size + 1;
}
Else if (event. srcelement. Name = "sub ")
{
If (document. Ajax. province. size> = 2)
Document. Ajax. province. size = Document. Ajax. province. Size-1;
}
}
</SCRIPT>
</Head>
<Body onload = "loadlist ()">
<Form action = # name = "ajax">
<Input type = button name = "add" value = "+" onclick = "re_size ()">
<Input type = button name = "sub" value = "-" onclick = "re_size ()">
<Br>
<Select name = "Province" size = 5>
</SELECT>
<Br>
<Input type = text name = "name" size = 50> </input>
<Input type = button value = "get" onclick = "startrequest ()"> </input>
</Form>
</Body>
</Html>
Data. xml:
<? XML version = "1.0" encoding = "gb2312"?>
<Root>
<Pro name = "Jiangsu Province">
<Detail> Nanjing </detail>
<Detail> Suzhou </detail>
<Detail> Wuxi </detail>
<Detail> Changzhou </detail>
<Detail> Zhenjiang </detail>
<Detail> Nantong </detail>
<Detail> Yangzhou </detail>
<Detail> Xuzhou </detail>
</Pro>
<Pro name = "Zhejiang Province">
<Detail> Hangzhou </detail>
<Detail> Ningbo </detail>
<Detail> Wenzhou </detail>
<Detail> Shaoxing </detail>
<Detail> Jiaxing </detail>
<Detail> Huzhou </detail>
</Pro>
<Pro name = "Fujian Province">
<Detail> Fuzhou </detail>
<Detail> Xiamen </detail>
</Pro>
<Pro name = "Guangdong Province">
<Detail> Guangzhou </detail>
<Detail> Shenzhen </detail>
<Detail> Dongguan </detail>
<Detail> Zhuhai </detail>
</Pro>
<Pro name = "Shandong Province">
<Detail> Jinan </detail>
<Detail> Qingdao </detail>
<Detail> Weihai </detail>
<Detail> Yantai </detail>
</Pro>
</Root>