js ajax经典实例之解析xml-js教程-PHP中文网

js ajax经典实例之解析xml

php中文网

发布： 2016-06-01 09:55:01

原创

1096人浏览过

test.php文件代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='zh-CN' xml:lang='zh-CN' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<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>
</head>
<body>
<input type="button" value="获取数据" onclick="getData();"/>
<div id="data"></div>
</body>
</html>

登录后复制

xml.php文件代码如下：

<?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;
?>

登录后复制