Ajax解析數據

時間 2019-12-13

標籤 ajax 解析數據欄目 Ajax 简体版

原文原文鏈接

解析json數據

{"person":{
    "name":"QIANG",
    "website":"zqwang121@sina.com",
    "email":"zqwang121@sina.com"
}
}

[JavaScript]代碼

<script type="text/javascript">
    window.onload=function(){
        var aNodes=document.getElementsByTagName("a");
        for(var i=0;i<aNodes.length;i++){
            aNodes[i].onclick=function(){
            var request=new XMLHttpRequest();
            var method="GET";
            var url=this.href;
            request.open(method,url);
            request.send(null);
            request.onreadystatechange=function(){
                if(request.readyState==4){
                    if(request.status==200){
                        //1.結果爲json格式，因此須要使用responsexml來獲取
                        var result=request.responseText;
                        var object=eval("("+result+")");
                        //2.結果不能直接使用，必須先建立對應的節點，再把節點加入到details裏面
                        //目標格式爲
                        /*
                        <h2><a href="zqwang121@sina.com">zqwang121</a></h2>
                        <a href="http://zqwang.cc">http://http://zqwang.cc</a>
                        */
                        var name=object.person.name;
                        var website=object.person.website;
                        var email=object.person.email;
                        //alert(name);
                        //alert(website);
                        //alert(email);
                        var aNode=document.createElement("a");      
                        aNode.appendChild(document.createTextNode(name));               
                        aNode.href="mailto:"+email;
                         
                        var h2Node=document.createElement("h2");
                        h2Node.appendChild(aNode);
                         
                        var aNode2=document.createElement("a");
                        aNode2.appendChild(document.createTextNode(website));
                        aNode2.href=website;
                         
                        var detailsNode=document.getElementById("details");
                        detailsNode.innerHTML="";
                        detailsNode.appendChild(h2Node);
                        detailsNode.appendChild(aNode2);
                         
                    }
                }
            }
                return false;
            }
        }
    }
             
</script>

[HTML]代碼

<body>
  <h1>People</h1>
  <ul>
      <li><a href="1.html">1</a></li>
      <li><a href="2.html">2</a></li>
      <li><a href="3.html">3</a></li>
  </ul>
  <div id="zqwang121"></div>
</body>

解析xml數據

[XML]代碼

<?xml version="1.0" encoding="UTF-8"?>
<details>
    <name>QIANG</name>
    <website>zqwang121@sina.com</website>
    <email>zqwang121@sina.com</email>
</details>

[JavaScript]代碼

<script type="text/javascript">
window.onload=function(){
    var aNodes=document.getElementsByTagName("a");
    for(var i=0;i<aNodes.length;i++){
        aNodes[i].onclick=function(){
    var request=new XMLHttpRequest();
    var method="GET";
    var url=this.href;
    request.open(method,url);
    request.send(null);
    request.onreadystatechange=function(){
        if(request.readyState==4){
            if(request.status==200){
                //1.結果爲xml格式，因此須要使用responsexml來獲取
                var result=request.responseXML;
                //2.結果不能直接使用，必須先建立對應的節點，再把節點加入到zqwang121裏面
                //目標格式爲
                /*
                <h2><a href="zqwang121@sina.com">zqwang121</a></h2>
                <a href="http://zqwang.cc">http://zqwang.cc</a>
                */
                var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;
                var website=result.getElementsByTagName("website")[0].firstChild.nodeValue;
                var email=result.getElementsByTagName("email")[0].firstChild.nodeValue;
                //alert(name);
                //alert(website);
                //alert(email);
                var aNode=document.createElement("a");      
                aNode.appendChild(document.createTextNode(name));               
                aNode.href="mailto:"+email;
                 
                var h2Node=document.createElement("h2");
                h2Node.appendChild(aNode);
                 
                var aNode2=document.createElement("a");
                aNode2.appendChild(document.createTextNode(website));
                aNode2.href=website;
                 
                var zqwang121Node=document.getElementById("zqwang121");
                zqwang121Node.innerHTML="";
                zqwang121Node.appendChild(h2Node);
                zqwang121Node.appendChild(aNode2);
                 
            }
        }
    }
            return false;
        }
    }
}
         
</script>

[HTML]代碼

<body>
  <h1>People</h1>
  <ul>
      <li><a href="1.html">1</a></li>
      <li><a href="2.html">2</a></li>
      <li><a href="3.html">3</a></li>
  </ul>
  <div id="zqwang121"></div>
</body>

解析html數據

[JavaScript]代碼javascript

<script type="text/javascript">
    window.onload=function(){
        var aNodes=document.getElementsByTagName("a");
        for(var i=0;i<aNodes.length;i++){
            aNodes[i].onclick=function(){
            var request=new XMLHttpRequest();
            var method="GET";
            var url=this.href;
            request.open(method,url);
            request.send(null);
            request.onreadystatechange=function(){
                if(request.readyState==4){
                    if(request.status==200){
                        document.getElementById("zqwang121").innerHTML=request.responseText;
                    }
                }
            }
                return false;
            }
        }
    }
             
</script>

[代碼] html

<body>
  <h1>People</h1>
  <ul>
      <li><a href="1.html">1</a></li>
      <li><a href="2.html">2</a></li>
      <li><a href="3.html">3</a></li>
  </ul>
  <div id="zqwang121"></div>
</body>