ajax对xml和json语言的解析
2016-08-29 19:22
330 查看
xml数据格式解析(Demo=data.xml)
ajax数据解析(Demo =xml.html)
json数据格式解析(Demo=data.json)
ajax数据解析(Demo =json.html)
<?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>
相关文章推荐
- S2SH+ajax+json-----jQuery中$.ajax解析xml、json格式数据
- javascript解析ajax返回的xml和json格式数据实例详解
- javascript 解析ajax返回的xml和json格式的数据
- Ajax请求Servlet返回文本 json html和XML数据并解析xml及responseText和responseXML的区别
- AJAX 原生js以及Jquery解析html,xml,txt,json格式文本
- Ajax解析html、xml、json、js原生方式、jquery方式
- jQuery中$.ajax解析xml、json格式数据
- javascript 解析ajax返回的xml和json格式的数据
- ajax对 XML 和 Json 数据的解析
- ajax的xml和json解析(原始)
- Ajax请求Servlet返回文本 json html和XML数据并解析xml及responseText和responseXML的区别
- ajax传输的数据格式(XML,json)怎么获取解析
- ajax解析xml数据转换为json
- javascript 解析ajax返回的xml和json格式的数据
- AJAX vs FLEX:执行,传送,解析JSON,HTML,XML,AFM格式效率比较.
- Ajax生成xml和生成解析json
- Ajax:拥抱JSON,让XML走开
- Ajax中XML和JSON格式的优劣比较
- AJAX解析XML
- [转]Ajax:拥抱JSON,让XML走开