Home >Web Front-end >JS Tutorial >js ajax经典实例之解析xml

js ajax经典实例之解析xml

WBOY
WBOYOriginal
2016-06-01 09:55:011024browse

test.php文件代码如下:
 

<code>


<title>js ajax经典实例之解析xml</title>
<script type="text/javascript">
//使用工厂的方法来创建xmlHttpRequest对象
function createXmlHttpRequest(){
    var xmlHttpRequest=null;
    if(window.ActiveXObject){
        //以下代码是IE中创建xmlHttpRequest对象的方法
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        //以下代码是其他浏览器中创建xmlHttpRequest对象的方法
        xmlHttpRequest = new XMLHttpRequest();
    }
    return xmlHttpRequest;
}

function getData(){
    //如果xmlHttpRequest对象创建成功,就开始请求服务器
    var xmlHttpRequest=createXmlHttpRequest();
    if(xmlHttpRequest){
        //打开请求,第一个参数表示请求的类型(get或post),第二个参数表示请求的服务器地址,第三个参数表示是否异步(异步指的可以同时执行,同步则表示执行完步骤一,然后才能执行步骤二)
        xmlHttpRequest.open("get","xml.php",true);
        //设置xmlHttpRequest对象的onreadystatechange事件,onreadystatechange存储函数(或函数名),每当xmlHttpRequest对象的readyState 属性改变时,就会调用该函数。readyState存有 xmlHttpRequest的状态。从 0 到 4 发生变化,0表示请求未初始化,1表示服务器连接已建立,2表示请求已接收 3表示请求处理中 4表示请求已完成,且响应已就绪,
        xmlHttpRequest.onreadystatechange=function(){
            if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){//当请求完成且状态为ok的时候,下面会解析ajax返回的xml.
                var xml=xmlHttpRequest.responseXML;//接受服务器返回的xml对象,并存储在xml变量中
                //下面解析xml;
                var persons=xml.getElementsByTagName("person");
                var str="";
                for(var i=0;i<persons.length;i++){
                    var fc= persons[i];
                    var name=fc.getElementsByTagName("name")[0].innerHTML;
                    var age=fc.getElementsByTagName("age")[0].innerHTML;
                    var weight=fc.getElementsByTagName("weight")[0].innerHTML;
                    var height=fc.getElementsByTagName("height")[0].innerHTML; str+="name:"+name+"  age:"+age+"  weight:"+weight+"  height:"+height+"<br/>"                }
                document.getElementById("data").innerHTML=str;
            }
        }
            xmlHttpRequest.send();        
    }
}
</script>


<input type="button" value="获取数据" onclick="getData();">
<div id="data"></div>

</code>

 


xml.php文件代码如下:  

 

<code><?php header("Content-type:text/xml");
$arr=array(
    array("name"=>"张三","age"=>"16","weight"=>"50","height"=>"160"),
    array("name"=>"李四","age"=>"17","weight"=>"51","height"=>"165"),
    array("name"=>"王二","age"=>"18","weight"=>"55","height"=>"170"),
    array("name"=>"javior","age"=>"20","weight"=>"68","height"=>"179")
);
$xml="<?xml version='1.0' encoding='gb2312'?>";
$xml.="<persons>";
foreach($arr as $k=>$v){
    $xml.="<person>";
    $xml.="<name>".$v["name"]."</name>";
    $xml.="<age>".$v["age"]."</age>";
    $xml.="<weight>".$v["weight"]."</weight>";
    $xml.="<height>".$v["height"]."</height>";
    $xml.="</person>";
}
$xml.="</persons>";
echo $xml;
?> </code>

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn