三种形式中HTML简单易懂,但拆分的难操作。xml和json jsp中的内容基本相似,就只有调用文件的格式不同组装也都是通过dom
HTML
showhtml.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.οnlοad=function(){
var aNodes=document.getElementsByTagName("a");
for(var i=0;i<aNodes.length;i++)
{
aNodes[i].οnclick=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)
{
document.getElementById("details").innerHTML=request.responseText;
}
}
}
return false;
}
}
}
</script>
</head>
<body><center>
<h4>用户信息</h4>
<ul>
<li><a href="a.jsp">小a</a></li>
<li><a href="b.jsp">小B</a></li>
<li><a href="c.jsp">小c</a></li>
</ul>
<div id="details"></div>
</center>
</body>
</html>
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.οnlοad=function(){
var aNodes=document.getElementsByTagName("a");
for(var i=0;i<aNodes.length;i++)
{
aNodes[i].οnclick=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.οnlοad=function(){
var aNodes=document.getElementsByTagName("a");
for(var i=0;i<aNodes.length;i++)
{
aNodes[i].οnclick=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>
a.js(json语法)
{
"person":{
"name":"Andy",
"website":"http://andy.com",
"email":"andy@clear.com"
}
}