html,xml,json入门Ajax例子

最新推荐文章于 2025-05-29 15:42:52 发布

原创最新推荐文章于 2025-05-29 15:42:52 发布 · 469 阅读

0 ·

CC 4.0 BY-SA版权

三种形式中HTML简单易懂，但拆分的难操作。xml和json jsp中的内容基本相似，就只有调用文件的格式不同组装也都是通过dom

HTML

showhtml.jsp

a.jsp:

<body>
小a<br/>
email：23431@qq.com
</body>

类似写b.jsp,c,jsp

XML

showxml.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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 url=this.href;
var method="GET";
request.open(method,url);
request.send(null);
request.onreadystatechange=function()
{
if(request.readyState==4)
{
if(request.status==200||request.status==304)
{/*
目标：<h2>Andy</h2>
<h2>sfaf</h2>
*/
var result=request.responseXML;
var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;
var email=result.getElementsByTagName("email")[0].firstChild.nodeValue;
// alert(name);
// alert(email);
/* var result=request.responseText;
var object=eval("("+result+")");
var name=object.person.name; */

var aNode=document.createElement("h2");
aNode.appendChild(document.createTextNode(name));
var detailNode=document.getElementById("details");
detailNode.innerHTML="";
detailNode.appendChild(aNode);

}
}
}
return false;
}

}

}
</script>
</head>
<body><center>
<h4>用户信息</h4>
<ul>
<li><a href="a.xml">小A</a></li>
<li><a href="b.xml">小B</a></li>
<li><a href="c.xml">小C</a></li>
</ul>

<div id="details"></div>
</center>

</body>
</html>

a.xml（其中的标签自己任意取名）类似的写b.xml,c.xml

<?xml version="1.0" encoding="UTF-8"?>
<det>
<name>小A</name>
<email>3141@qq.com</email>
</det>

json

json1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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="post";
var url=this.href;
request.open(method,url);
request.send("name='aaa'");
request.onreadystatechange=function()
{
if(request.readyState==4)
{
if(request.status==200||request.status==304)
{

var result=request.responseText;
var object=eval("("+result+")");
var name=object.person.name;
var website=object.person.website;
var email=object.person.email;

var aNode=document.createElement("h2");
aNode.appendChild(document.createTextNode(name));
aNode.appendChild(document.createTextNode(website));
aNode.appendChild(document.createTextNode(email));
var detailNode=document.getElementById("identity");
detailNode.innerHTML="";
detailNode.appendChild(aNode);

}
}
}
return false;
}
}
}
</script>
</head>
<body>
<center>
<a href="a.js">显示信息1</a>
<a href="b.js">显示信息2</a>
</center>
<div id="identity"></div>

</body>
</html>