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();
}
//===============================================================================================================
function LoadList()
{
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从0开始；如果未选中 返回-1
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="江苏省">
<detail>南京</detail>
<detail>苏州</detail>
<detail>无锡</detail>
<detail>常州</detail>
<detail>镇江</detail>
<detail>南通</detail>
<detail>扬州</detail>
<detail>徐州</detail>
</pro>
<pro name="浙江省">
<detail>杭州</detail>
<detail>宁波</detail>
<detail>温州</detail>
<detail>绍兴</detail>
<detail>嘉兴</detail>
<detail>湖州</detail>
</pro>
<pro name="福建省">
<detail>福州</detail>
<detail>厦门</detail>
</pro>
<pro name="广东省">
<detail>广州</detail>
<detail>深圳</detail>
<detail>东莞</detail>
<detail>珠海</detail>
</pro>
<pro name="山东省">
<detail>济南</detail>
<detail>青岛</detail>
<detail>威海</detail>
<detail>烟台</detail>
</pro>
</root>