原生AJAX获取用户数据

野性酷女 2022-12-14 06:20 132阅读 0赞

var xmlHttp;
    //创建用来和服务器交互的xmlHttp对象
    function createXMLHttpRequest(){ 
                if(window.ActiveXObject){ //基于IE5.0系列
                            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }else if(window.XMLHttpRequest){ //基于firefox,mozila,...等
                            xmlHttp = new XMLHttpRequest();
                }
    }
    //发送获取用户信息的请求
    function getUserInfo(){ 
                //创建消息发送者
                createXMLHttpRequest();
                //指定服务器地址
                //var url = "userservlet?method=getUserInfo&time="+new Date().getTime();
                var username = document.getElementById("username").value;
                var url = "userservlet?method=getUserInfoByName&username="+username+"&time="+new Date().getTime();
                //设置xmlHttp，让其知道怎么和服务器交互
                xmlHttp.open("GET",url,true);
                //对发送状态做监听，以便知道什么时候交互完成，然后可以
                //取结果值
                xmlHttp.onreadystatechange = userInfoCallback;
                //真正执行操作
                xmlHttp.send(null);//参数已经附带在url里边了，因此这里写null
    }
    //得到用户信息
    function userInfoCallback(){ 
                //只有当和服务器的交互成功之后，才有获取返回值的可能
                if(xmlHttp.readyState == 4){ //ajax成功发送信息到服务器
                            if(xmlHttp.status == 200){ //服务器处理成功
                                        var doc = xmlHttp.responseXML;//取出xml格式的信息
                                        viewUserInfo(doc);//把结果交给viewUserInfo显示
                            }
                }
    }
    //处理得到的用户信息
    function viewUserInfo(doc){ 
                //得到user相对应的节点
                var user = doc.getElementsByTagName("user").item(0);
                if(user == null){ 
                            document.getElementById("usermsg").innerHTML = "<b>用户不存在！</b>";
                            return;
                }
                //取出user底下的所有子节点
                var userChildren = user.childNodes;
                
                var innerHTML = "<table><tr><td>姓名</td><td>性别</td><td>年龄</td><td>爱好</td></tr><tr>";
                for(var i = 0; i < userChildren.length; i++){ 
                            //从数组里边取出每个子节点
                            var userChild = userChildren.item(i);
                            innerHTML += "<td>"+userChild.firstChild.nodeValue+"</td>";
                }
                innerHTML += "</tr></table>";
                //把组装好的信息显示到页面
                document.getElementById("usermsg").innerHTML = innerHTML;
    }