ajax如何处理返回的数据格式是xml的情况

<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
<meta charset="utf-8">
<script language="javascript" type="text/javascript" >
    //创建ajax引擎
    function getXmlHttpObject(){
    
        var xmlHttpRequest;
        //不同浏览器获取xmlHttpRequest对象方法不一样
        if(window.ActiveXObject){
            //window.alert("ie");
            xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
        }else{
            //window.alert("no ie");
            xmlHttpRequest=new XMLHttpRequest();
        }
        return xmlHttpRequest;
    }
    
    
    var myXmlHttpRequest="";
    //验证用户名是否存在
    function checkName(){
        
        myXmlHttpRequest=getXmlHttpObject();
        //怎么判断创建ok
        if(myXmlHttpRequest){
            //window.alert("创建成功");
            //通过myXmlHttpRequest对象发送请求到服务器的某个页面
            //第一个参数表示请求的方式,"get"/"post"
            //第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)
            //第三个参数表示true 表示使用异步机制,如果false表示不使用异步
            //var url="/registerProcess.php?username="+new Date()+$("username").value;
            /*var url="/registerProcess.php?mytime="+new Date()+"&username="+$("username").value;*/
            var url="/registerProcess.php";
            //这个是要发送的数据
            var data="username="+$("username").value;
            //打开请求,准备发送,,true表示同步处理
            myXmlHttpRequest.open("post", url, true);
            //还有一句话,这句话必须
            //在编程过程中,建议用Post,post会更好一些
            myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //指定回调函数.chuli是函数名
            myXmlHttpRequest.onreadystatechange=chuli;
            
            //真的发送请求,如果是get请求则填入 null即可
            //如果是post请求,则填入实际的数据
            myXmlHttpRequest.send(data);
            //状态改变的触发器
            //myXmlHttpRequest.open("get");
        }else{
            //window.alert("创建失败");
        }
        
    }
    
    //回调函数
    function chuli(){
        //window.alert("处理函数被调回"+myXmlHttpRequest.readyState);
        //我要取出从regiseterPro.php页面返回的数据
        if(myXmlHttpRequest.readyState==4){
            //取出值,根据返回信息的格式定.text
            //window.alert("服务器返回"+myXmlHttpRequest.responseText);
            //$("myres").value=myXmlHttpRequest.responseText;
            //看看如何取出xml格式数据
            //window.alert(myXmlHttpRequest.responseXML);
            //获取mes节点
            var mes=myXmlHttpRequest.responseXML.getElementsByTagName("mes");
            //取出mes节点值
            //window.alert(mes.length);
            //mes[0]->表示取出第一个mes节点
            //mes[0].childNodes[0]->表示第一个mes节点的第一个子节点
            var mes_val=mes[0].childNodes[0].nodeValue;
            //window.alert(mes_val);
            $("myres").value=mes_val;
        }
    }
    
    function $(id){
        return document.getElementById(id);
    }
    
</script>
</head>
<body>
<form >

用户名字<input type="text" name="username1" id="username" /><input type="button" value="验证用户名" onclick="checkName()"/>
<input type="text" style="border-width:0;color:red" id="myres"/>
<br/>
用户密码<input type="password" name="password" id="password"/><br/>
电子邮件<input type="text" name="email" id="email"/><br/>
<input type="submit" value="用户注册"/><br/><br/>



用户名字<input type="text" name="username1" />
<input type="text" style="border-width:0;color:red"/>
<br/>
用户密码<input type="password" name="password"/><br/>
电子邮件<input type="text" name="email"/><br/>
<input type="button" value="用户注册"/>

</form>
</body>

</html>

 

服务器端代码

<?php 

    //这里两句话很重要,第一句话告诉浏览器返回的数据是xml格式
    header("Content-type: text/xml; charset=utf-8");
    //如果这里写成Content-type: text/html,会报错,得不到数据
    //告诉浏览器不要缓存数据
    header("Cache-Control:no-cache");
    //接收数据(这里要和请求方式对应 _POST 还是 _GET
    $username=$_POST['username'];

    $info="";
    if($username=="shunping"){
        $info.="<res><mes>用户名不可以用,对不起</mes></res>";//注意,这里数据是返回给请求的页面
    }else if($username!=""){
        $info.="<res><mes>用户名可以用,恭喜</mes></res>";
    }
    echo $info;

    
?>

 

posted @ 2018-10-19 14:50  寒潭渡鹤影  阅读(1915)  评论(0编辑  收藏  举报