ajax中xml格式数据解析及json格式数据解析

最新推荐文章于 2024-05-04 18:45:22 发布

wei_ke_zhi

最新推荐文章于 2024-05-04 18:45:22 发布

阅读量1k

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/wei_ke_zhi/article/details/81585022

版权

ajax 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

xml的数据内容是：

<?xml version="1.0" encoding="utf-8"?>
<bookstore>
	<book>
		<name>三国演义</name>
		<category>文学</category>
		<desc>描述</desc>
	</book>	
	<book>
		<name>水浒传</name>
		<category>文学</category>
		<desc>草寇or英雄豪杰</desc>
	</book>	
	<book>
		<name>西游记</name>
		<category>文学</category>
		<desc>妖魔鬼怪牛鬼蛇神什么都有</desc>
	</book>	
	<book>
		<name>红楼梦</name>
		<category>文学</category>
		<desc>宝哥哥与林妹妹的爱情史</desc>
	</book>	
</bookstore>

要实现的功能是，在页面点击按钮点击过后，xml的内容渲染到页面中，渲染格式如图：

html代码为：

<body>
	<input type="button" value="点击" id="btn">
	<div>
		<table id="bookInfo">

		</table>
	</div>
</body>

js代码为：

xml的解析解析就像用js处理html文本一样。

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];
//下面三个获得的都是包含标签和文本内容的，而我们需要的文本内容
// 所以需要用下面封装的getNodeText函数去获得文本内容
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);

json数据解析方式为：

注意：

xhr.responseText是字符串的形式，而我们想要用它的话，就必须将它转换为json数据对象的形式。因为只有对象才可以用点语法及[“属性”]的方式调用。

所以JSON.parse是将字符创转化为json数据对象，eval()函数也可以做到，使用方式：eval（“（”+ string +“）”）；

但是使用eval函数有风险：eval("alert(123);")会执行，也就是说在eval中写符合规范的代码时，eval会帮你解析并执行它。所以会存在安全性上面的问题，如果后台传过来json对象中包含账户密码什么的，就容易被泄露。而且如果用eval传过来一个非法的js代码来获取你的账户信息什么的，这是不允许的。

JSON.stringify()函数是将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);
  }
}

<script type="text/javascript">
	window.onload = function(){
		var btn = document.getElementById('btn');
		btn.onclick = function(){
			showBookInfo();
		}
	}
	//获取文本节点内容，存在兼容性
    function getNodeText(node){
    	if(window.ActiveXObject){//IE
    		return node.text;
    	}else{//标准浏览器
    		if(node.nodeType == 1){
    			return node.textContent;
    		}
    	}
    }
	function showBookInfo(){
		document.getElementById('bookInfo').innerHTML = '';
		var xhr = null;
		if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		}else{
			xhr = new ActiveXObject('Microsoft.XMLHTTP');
		}
		console.log('第一步'+xhr.readyState);
		xhr.open('get','./testDate.xml');
		console.log('第二步'+xhr.readyState);
		xhr.send(null);
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200){
				// console.log(data); 
				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];
						//下面三个获得的都是包含标签和文本内容的，而我们需要的文本内容
						// 所以需要用下面封装的getNodeText函数去获得文本内容
						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);		
			}
		}
	}
</script>

wei_ke_zhi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax中xml格式数据解析及json格式数据解析

xml的数据内容是：&lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;bookstore&gt; &lt;book&gt; &lt;name&gt;三国演义&lt;/name&gt; &lt;category&gt;文学&lt;/category&gt; &lt;desc&g
复制链接

扫一扫