Ajax实现二级关联菜单

今天在写程序是遇到了这样一个问题，有两个客户端的下拉列表框（<select></select>)要求在第一个菜单的选择相变化后，第二个下拉列表框相应的发生变化。如果是两个都是服务器端控件这倒也没什么难度，可它偏偏是客户端控件。仔细想想，其实用ajax添加第二个下拉列表框不就能够实现了。下面是我的ajax代码。

//创建xmlHttpRequest对象

var xmlHttp=false;
try
{
xmlHttp = new XMLHttpRequest();
}
catch (trymicrosoft)
{
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (othermicrosoft)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (failed)
{
xmlHttp = false;
}
}
}

if(!xmlHttp)
{
alert("不能创建对象XMLHttpRequest");
}

//在第一个下拉列表框的onchange事件里调用此函数
function AddNewsTitle()
{
var 参数名称=document.getElementById("第一个下拉列表框名称").value;
var url="http:处理页面地址?参数名称="+ 参数名称+"";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=UpdateTitle;
xmlHttp.send(null);
}
function UpdateTitle()
{
if(xmlHttp.readystate==4)
{
if(xmlHttp.status==200)
{
document.getElementById("第二个下拉列表框名称").options.length=0;//先清空第二个框
var NewsTitles=xmlHttp.responseText.split("|");//读取处理页面动态的得到的值并拆分到数组里(在处理页面已经用"|"做了连接)
var OpTitle;//为第二个框创建<option>,并将其添加
OpTitle=document.createElement("option");
OpTitle.text="-请选择-";
OpTitle.value="";
document.getElementById("第二个下拉列表框名称").options.add(OpTitle);
for(var i=0;i<NewsTitles.length;i++)
{
OpTitle=document.createElement("option");
OpTitle.text=NewsTitles[i];
OpTitle.value=i;
document.getElementById("Title").options.add(OpTitle);
}
}
}
}

这段代码看上去没有难度，可是我还是费了很大的劲才孤岛出来。不知道你是否遇到过这样的情况：就是responseTest得到的值不是自己想要的而是一些Html代码，经过一翻的调试，google，终于给搞定啦。

其实出现这样的原因主要有这么几点：

1.Get的url地址不对，虽然也没有404的错误，看一下传参数时的格式是否正确。

2.在指定url页面就没能得到自己想要的值

3.在指定的url页面response.write（）；后没有及时加response.end();所以把整个页面的html代码读过来了