Ajax与xml数据格式// Ajax与json数据格式

2016-11-17 19:06:02来源:CSDN作者:sinat_36146776人点击

第七城市

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.onclick=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.onclick=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>























第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台