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>