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>