首頁 > web前端 > js教程 > js ajax经典实例之解析xml

js ajax经典实例之解析xml

WBOY
發布: 2016-06-01 09:55:01
原創
1042 人瀏覽過

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>
登入後複製

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板