AJAX应用实例——实现三级联动

Ajax是一个互动类应用的，增加了用户体验度的一个帮助。
        今天我们一起学习一个AJAX最基础的应用事例，那就是查询显示数据的应用，希望通过我今天的讲解您能完全了解AJAX入门的基础，帮助和我一样菜鸟的人。
        今天要做的就是三级联动的例子，很多网站都有例如：省-市-县其实很好实现的，现在我们就一起看下他们到底是如何实现的！三级联动。
    我今天采用实际演示的办法，帮助大家理解哦！因为发现光说不写代码大家不好理解的，只有这样才能更好的理解。一学就会，我门今天采用的连创建下拉列表我们也一起讲了！
                                                  原代码已经副，可以调试。
<script type="text/javascript">
/********
*定义创建XMLHttpRequest对象的方法
*
**************************************/
var xmlHttp;//声明变量
var requestType="";//声明初始类型为空
function createXMLHttpRequest()//定义创建一个跨浏览器函数的开头
{
        if(window.ActiveXObject)//ActiveXObject对象到找到的时候返回的是真，否则是假
        {
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//这个是使用IE的方法创建XmlHttp
        }
        else if(window.XMLHttpRequest)
        {
                xmlHttp=new XMLHttpRequest();//这个是使用非IE的方法创建XmlHttp
        }
}
//不创建这个可是不可以了的哦！我们下边要用的！
/***************
*判断服务器响应的事件，如果返回是4则说明交互完成，判断标示头，
*
*************************************************/
function handleStateChange(){//判断返回的一个函数，来确定执行那个的函数
        if(xmlHttp.readystate==4)
                {//4说明是执行交互完毕0 (未初始化)1 (正在装载)2 (装载完毕) 3 (交互中)4 (完成)
                if(xmlHttp.status==200)
                        {//http的一个报头说明成功找到
                        if(type=="city"){//判断查询的类型
                                                                showcity();//返回响应的显示
                                                        }
                        else if(type="area"){//判断响应的查询的类型
                                                                        showarea();//返回响应的显示
                                                                }
                        }
                }
}
/*************************
*城市的一个查询函数
*
*********************************************************/
function queryCity(citycode){//执行程序查询，查询城市的
        createXMLHttpRequest();//调用创建XmlHttp的函数
        type="city";//表示类型，查询城市处理显示的时候需要用到
        var url='data.php?provincecode='+citycode+'&n='+Math.random();//设定URL传值方法同时防止缓存
        xmlHttp.open("GET",url,true);//建立服务器连接，异步传输tree
        xmlHttp.onreadystatechange=handleStateChange;//处理这个响应所需要的函数
        xmlHttp.send(null);//执行程序函数这里的中间的参数是因为GET原因
}
/*********************
*县区的一个查询函数
***********************************************************/
function queryArea(citycode){//查询程序
        createXMLHttpRequest();//调用创建XmlHttp的函数
        type="area";//查询县的
        var url="data.php?citycode="+citycode+'&n='+Math.random();//设定URL传值方法同时防止缓存
        xmlHttp.open("GET",url,true);
        xmlHttp.onreadystatechange=handleStateChange;//处理响应的函数名
        xmlHttp.send(null);//执行程序函数这里的中间的参数是因为GET原因
}
/********************
*一个显示函数
**********************************************************/
function showcity(){//显示函数
        document.getElementById("city").innerHTML=xmlHttp.responseText;//捕获ID显示返回的数据
}
function showarea(){
        document.getElementById("area").innerHTML=xmlHttp.responseText;//捕获ID显示返回的数据
}
</script>
上边的分析应该有帮助把！讲解应该也很细致了！PHP代码我省略了，其实就是一个查询数据，主要分为两个也面一个JS，一个页面是显示数据第一个列表的，哪个列表用来生成以后的列表查询，主要技术会了，大家写一个应该没有什么技术难点了。

附原代码

不错,鼓励一下

我需要啊，可惜下不了啊

不错

谢谢楼主了

好东西

看看....

顶...................

好。。

下来看看