Ajax与xml数据格式// Ajax与json数据格式_用js中ajax的xml数据格式输出四大名著以及作者-CSDN博客

本文链接：https://blog.csdn.net/sinat_36146776/article/details/53198561

xml兼容性很好，任何浏览器都可以调用其中的数据

1、Ajax与xml数据格式

data.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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>xml</title>
</head>
<body>
	<input type="button" id="btn" value="点击我显示"></input>
	<div>
		<table id="bookInfo"></table>
	</div>
</body>
</html>

<script type="text/javascript">
	var btn=document.getElementById('btn');
	btn.οnclick=function(){
		showBookInfo();
	}
	function showBookInfo(){
		var xhr=null;
		if(window.XMLHttpRequest){
			xhr=new XMLHttpRequest();
		}else{
			xhr=new ActiveObject('Microsoft.XMLHTTP');
		}
		var url='./data.xml';
		xhr.open('get',url,true);
		xhr.send(null);
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4 && xhr.status==200){
				var data=xhr.responseXML;
				// console.log(data);
				var bookstore=data.getElementsByTagName('bookstore')[0];
				// console.log(bookstore);
				var books=bookstore.getElementsByTagName('book');

				var bookInfo=document.getElementById('bookInfo');
				var newT='';

				for(var i=0;i<books.length;i++){
					var name=books[i].getElementsByTagName('name')[0];
					var category=books[i].getElementsByTagName('category')[0];
					var desc=books[i].getElementsByTagName('desc')[0];
					// console.log(getNodeText(name));
					// console.log(getNodeText(category));
					// console.log(getNodeText(desc));
					newT+="<tr style='color:#000;'><td style='border:1px solid #ddd;'>"+getNodeText(name)+"</td><td>"+getNodeText(category)+"</td><td>"+getNodeText(desc)+"</tr>";
				}
				var tbody=document.createElement("tbody");
				tbody.innerHTML=newT;
				bookInfo.appendChild(tbody);
			}
		}
	}
	function getNodeText(node){
		if(window.ActiveXObject){
			return node.text;
		}else{
			if(node.nodeType==1){
				return node.textContent;
			}
		}
	}
</script>

2、Ajax与json数据格式
data.json

{
	"total":"4",
	"data":[
		{
			"name":"三国演义",
			"category":"文学",
			"desc":"一个军阀混战的年代"
		},{
			"name":"水浒传",
			"category":"文学",
			"desc":"草寇or英雄好汉"
		},{
			"name":"西游记",
			"category":"文学",
			"desc":"妖魔鬼怪牛鬼蛇神什么都有"
		},{
			"name":"红楼梦",
			"category":"文学",
			"desc":"一个封建王朝的缩影"
		}
	],
	"obj":{"adf":"adf"}
}

json.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>xml</title>
</head>
<body>
	<input type="button" id="btn" value="点击我显示"></input>
	<div>
		<table id="bookInfo"></table>
	</div>
</body>
</html>

<script type="text/javascript">
	var btn=document.getElementById('btn');
	btn.οnclick=function(){
		showBookInfo();
	}
	function showBookInfo(){
		var xhr=null;
		if(window.XMLHttpRequest){
			xhr=new XMLHttpRequest();
		}else{
			xhr=new ActiveObject('Microsoft.XMLHTTP');
		}
		var url='./data.json';
		xhr.open('get',url,true);
		xhr.send(null);
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4 && xhr.status==200){
				var data=xhr.responseText;//获得的是字符串
				console.log(typeof data);//string
				//转换成json对象
				var data=JSON.parse(data);
				console.log(data);
				var data=data.data;
				var total=data.total;
				console.log(total);
				console.log(data.length);//4
				console.log(data[0]);
				console.log(data[0].name);//name

				var tbody=document.createElement('tbody');
				var newT='';//表示字符串
				for(var i=0;i<data.length;i++){
					newT+='<tr><td>'+data[i].name+'</td><td>'+data[i].category+'</td><td>'+data[i].desc+'</td></tr>';
				}
				console.log(typeof newT);
				console.log(newT);
				tbody.innerHTML=newT;
				// tbody.appendChild(newT);//适用于添加节点;newT只是一个字符串，所以在此处不适合
				var bookInfo=document.getElementById('bookInfo');
				bookInfo.appendChild(tbody);
			}
		}
	}
</script>