【JavaWeb】用Ajax实现多级联动菜单

导读：Ajax可以在不刷新页面的情况下，对局部页面进行刷新，使得数据可以动态加载，可以应用在在线聊天系统、多级联动菜单。

---

Ajax入门

首先要判断是新浏览器还是老浏览器，然后创建一个ajax的请求，设置其请求的方法、请求的目标地址和是否异步。然后发送请求。

接下来，比较重要的是onreadystate这个事件：

                                                           

如果onreadystatechange==4，则表示响应的文本已经接受，那么就可以处理响应了。

<body>
    <input id="btnLoad" type="button" value="加载">
    <div id="divContent"></div>
    <script>
        document.getElementById("btnLoad").onclick=function () {
            //1.创建XMLHttpRequest对象
            var xmlhttp;
            //2.兼容新老浏览器
            if(window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }else
            {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //3.发送Ajax请求
            xmlhttp.open("GET","/ajax/content",true);
            xmlhttp.send();
            //4.处理服务器响应
            xmlhttp.onreadystatechange=function () {
                if(xmlhttp.readyState==4 && xmlhttp.status==200){
                    var t=xmlhttp.responseText;
                    document.getElementById("divContent").innerHTML=t;
                }
            }
        }
    </script>
</body>

在获取响应文本之前，还需要请求的状态为200。接下来就可以处理响应的文本了，在id="divContent"的div标签下，插入由Servlet返回过来的HTML代码。 

@W