Ajax-数据格式HTML&XML&JSON

最新推荐文章于 2023-07-17 15:01:55 发布

轻小說控

最新推荐文章于 2023-07-17 15:01:55 发布

阅读量176

点赞数

分类专栏： Ajax 文章标签： Ajax-数据格式HTML&XML&JSON

本文链接：https://blog.csdn.net/Aqours/article/details/100833308

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ajax

数据格式_HTML

实例

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Perple at Clearleft</title>
<style type="text/css">
@import url("clearleft.css");
</style>
<script type="text/javascript">
	window.onload=function(){
		var aNodes=document.getElementsByTagName("a");
		for(var i=0;i<aNodes.length;i++){
			aNodes[i].onclick=function(){
				var request=new XMLHttpRequest();
				var method="GET";
				var url=this.href;
				
				request.open(method,url);
				request.send(null);
				request.onreadystatechange=function(){
					if(request.readyState == 4){
						if(request.status == 200 || request.status ==304){
							document.getElementById("details").innerHTML=request.responseText;
						}
					}
				}
				return false;
			}
		}
	};
</script>
</head>
<body>
	<h1>People</h1>
	<ul>
		<li><a href="files/andy.html">Andy</a></li>
		<li><a href="files/richard.html">Richard</a></li>
		<li><a href="files/jeremy.html">Jeremy</a></li>
	</ul>
	<div id="details"></div>
</body>
</html>

效果

数据格式_XML

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Perple at Clearleft</title>
<style type="text/css">
@import url("clearleft.css");
</style>
<script type="text/javascript">
	window.onload=function(){
		var aNodes=document.getElementsByTagName("a");
		for(var i=0;i<aNodes.length;i++){
			aNodes[i].onclick=function(){
				var request=new XMLHttpRequest();
				var method="GET";
				var url=this.href;
				
				request.open(method,url);
				request.send(null);
				request.onreadystatechange=function(){
					if(request.readyState == 4){
						if(request.status == 200 || request.status ==304){
							//1.结果为XML格式，所以需要使用responseXML来获取
							var result=request.responseXML;
							//2.结果不能直接使用，必须先创建对应的节点，再把节点加入到 #details中
							//目标格式为:
								/*
								<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
								<a href="http://andybudd.com/">http://andybudd.com/</a>
								*/
							var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;
							var website=result.getElementsByTagName("website")[0].firstChild.nodeValue;
							var email=result.getElementsByTagName("email")[0].firstChild.nodeValue;
							
							//alert(name);
							//alert(website);
							//alert(email);
							
							var aNode=document.createElement("a");
							aNode.appendChild(document.createTextNode(name));
							aNode.href="mailto:"+email;
							
							var h2Node=document.createElement("h2");
							h2Node.appendChild(aNode);
							
							var aNode2=document.createElement("a");
							aNode2.appendChild(document.createTextNode(website));
							aNode2.href=website;
							
							var detailsNode=document.getElementById("details");
							detailsNode.innerHTML="";
							detailsNode.appendChild(h2Node);
							detailsNode.appendChild(aNode2);
						}
					}
				}
				return false;
			}
		}
	};
</script>
</head>
<body>
	<h1>People</h1>
	<ul>
		<li><a href="files/andy.xml">Andy</a></li>
		<li><a href="files/richard.xml">Richard</a></li>
		<li><a href="files/jeremy.xml">Jeremy</a></li>
	</ul>
	<div id="details"></div>
</body>
</html>

andy.xml

<?xml version="1.0" encoding="UTF-8"?>
<details>
	<name>Andy Budd</name>
	<website>http://andtbudd.com</website>
	<email>andy@clearleft.com</email>
</details>

效果

数据格式_JSON

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.onload=function(){
		var aNodes=document.getElementsByTagName("a");
		for(var i=0;i<aNodes.length;i++){
			aNodes[i].onclick=function(){
				var request=new XMLHttpRequest();
				var method="GET";
				var url=this.href;
				
				request.open(method,url);
				request.send(null);
				request.onreadystatechange=function(){
					if(request.readyState == 4){
						if(request.status == 200 || request.status ==304){
							
							var result=request.responseText;
							var object=eval("("+result+")");
							//2.结果不能直接使用，必须先创建对应的节点，再把节点加入到 #details中
							//目标格式为:
								/*
								<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
								<a href="http://andybudd.com/">http://andybudd.com/</a>
								*/
							var name=object.person.name;
							var website=object.person.website;
							var email=object.person.email;
							
							var aNode=document.createElement("a");
							aNode.appendChild(document.createTextNode(name));
							aNode.href="mailto:"+email;
							
							var h2Node=document.createElement("h2");
							h2Node.appendChild(aNode);
							
							var aNode2=document.createElement("a");
							aNode2.appendChild(document.createTextNode(website));
							aNode2.href=website;
							
							var detailsNode=document.getElementById("details");
							detailsNode.innerHTML="";
							detailsNode.appendChild(h2Node);
							detailsNode.appendChild(aNode2);
						}
					}
				}
				return false;
			}
		}
	};
</script>
</head>
<body>
	<h1>People</h1>
	<ul>
		<li><a href="files/andy.js">Andy</a></li>
		<li><a href="files/richard.js">Richard</a></li>
		<li><a href="files/jeremy.js">Jeremy</a></li>
	</ul>
	<div id="details"></div>
</body>
</html>

andy.js

{"person":{
	"name":"Andy Budd",
	"website":"http://andybudd.com",
	"email":"andy@clearleft.com"
	}
}

效果

总结

轻小說控

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录