ajax对xml和json语言的解析

来源：互联网发布：面向对象编程步骤编辑：程序博客网时间：2024/06/05 17:47

xml数据格式解析(Demo=data.xml)

<?xml version="1.0" encoding="utf-8"?><bookstore>   <book>      <name>三国演义</name>      <category>文学</category>      <desc>描述</desc>   </book>       <book>      <name>红楼梦</name>      <category>文学</category>      <desc>宝哥哥与林妹妹的爱情史</desc>   </book>    </bookstore>

ajax数据解析(Demo =xml.html)

<script type="text/javascript">   window.onload = function(){//文档加载      var btn = document.getElementById('btn');      btn.onclick = function(){         showBookInfo();      }      function showBookInfo(){         document.getElementById('bookInfo').innerHTML = '';         var xhr = null;         if(window.XMLHttpRequest){            xhr = new XMLHttpRequest();//创建xml对象         }else{            xhr = new ActiveXObject('Microsoft.XMLHTTP');//常见IE5,6自己的ActiveXObject对象         }         console.log('第一步'+xhr.readyState);         xhr.open('get','./data.xml');         console.log('第二步'+xhr.readyState);         xhr.send(null);         xhr.onreadystatechange = function(){            if(xhr.readyState == 4 && xhr.status == 200){               var data = xhr.responseXML;                      var bs = data.getElementsByTagName('bookstore')[0];               console.log(bs);               var books = bs.getElementsByTagName('book');               var tag = '';               for(var i=0;i<books.length;i++){                  var book = books[i];                  var name = book.getElementsByTagName('name')[0];                  var category = book.getElementsByTagName('category')[0];                  var desc = book.getElementsByTagName('desc')[0];                  tag += '<tr><td>'+getNodeText(name)+'</td><td>'+getNodeText(category)+'</td><td>'+getNodeText(desc)+'</td></tr>';               }               var tbody = document.createElement('tbody');               tbody.innerHTML = tag;               document.getElementById('bookInfo').appendChild(tbody);            }         }      }   }    //获取文本节点内容    function getNodeText(node){       if(window.ActiveXObject){//IE          return node.text;       }else{//标准浏览器          if(node.nodeType == 1){             return node.textContent;          }       }    }</script></head><body>   <input type="button" value="点击" id="btn">   <div>      <table id="bookInfo">      </table>   </div></body>

json数据格式解析(Demo=data.json)

{   "total":"4",   "data":[      {         "name":"三国演义",         "category":"文学",         "desc":"一个军阀混战的年代"      },{         "name":"红楼梦",         "category":"文学",         "desc":"一个封建王朝的缩影"      }   ],   "obj":{"adf":"adf"}}

ajax数据解析(Demo =json.html)

<script type="text/javascript">   window.onload = function(){      var btn = document.getElementById('btn');      btn.onclick = function(){         showBookInfo();      }      function showBookInfo(){         var xhr = null;         if(window.XMLHttpRequest){            xhr = new XMLHttpRequest();         }else{            xhr = new ActiveXObject('Microsoft.XMLHTTP');         }         xhr.open('get','./data.json');         xhr.onreadystatechange = function(){            if(xhr.readyState == 4 && xhr.status == 200){               var data = JSON.parse(xhr.responseText);               console.log(data);               var total = data.total;               var list = data.data;               var tag = '';               for(var i=0;i<total;i++){                  var book = list[i];                  tag += '<tr><td>'+book.name+'</td><td>'+book.category+'</td><td>'+book.desc+'</td></tr>';               }               var tbody = document.createElement('tbody');               tbody.innerHTML = tag;               document.getElementById('bookInfo').appendChild(tbody);            }         }         xhr.send(null);      }   }</script></head><body>   <input type="button" value="点击" id="btn">   <div>      <table id="bookInfo">      </table>   </div></body>

0 0