html,xml,json入门Ajax例子
来源:互联网 发布:js遍历json对象数组 编辑:程序博客网 时间:2024/04/18 06:23
三种形式中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.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)
{
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.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>
a.js(json语法)
{
"person":{
"name":"Andy",
"website":"http://andy.com",
"email":"andy@clear.com"
}
}
- html,xml,json入门Ajax例子
- The AJAX response: XML, HTML, or JSON?
- The AJAX response: XML, HTML, or JSON?
- ajax处理数据(html,xml,json)
- Ajax加载HTML、XML、JSON对比分析
- samrty+Ajax 请求生成json,xml,html响应
- Ajax解析html、xml、json、js原生方式、jquery方式
- 使用原生Ajax处理HTML,XML,JSON数据
- 使用JQuery的Ajax操作html,xml,json数据
- Ajax技术--服务器返回数据格式(HTML,XML,JSON)
- jquery - ajax - json 例子
- json ajax简单例子
- json 入门--例子
- JSON入门小例子
- JSON入门小例子
- Ajax入门例子
- ajax入门例子
- ajax入门例子一个
- Unity中Update和FixedUpdate的区别
- Floyd判圈算法
- linux下的几种进程间通信方式的特点
- 关于集成Bmob遇到的坑
- 7. NodeMCU上使用RTOS固件读取bh1750传感器数据的实践
- html,xml,json入门Ajax例子
- Establishing SSL connection without server's identity verification is not recommended
- 设计模式之代理模式
- <s:property>
- angularjs指令-控制器
- 大数据流式分析系统框架(日志处理系统)
- 安卓数据存储方式之SQLite
- 解决CentOS遇到Qt编译(error: cannot find -lGL)
- 一、工单流程JBPM-------JPDL流程定义语言