ajax数据处理

原创 2017年01月04日 00:11:06

HTML

andy.html

<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
<a href="http://andybudd.com/">http://andybudd.com/</a>

<h2><a href="mailto:jeremy@clearleft.com">Jeremy Keith</a></h2>
<a href="http://adactio.com/">http://adactio.com/</a>

<h2><a href="mailto:richard@clearleft.com">Richard Rutter</a></h2>
<a href="http://clagnut.com/">http://clagnut.com/</a>
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>People at Clearleft</title>
<style type="text/css">
@import url("clearleft.css");
</style>
<script type="text/javascript"></script>
<script>
	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

andy.xml

<?xml version="1.0" encoding="utf-8"?>
<details>
  <name>Andy Budd</name>
  <website>http://andybudd.com/</website>
  <email>andy@clearleft.com</email>
</details>
<?xml version="1.0" encoding="utf-8"?>
<details>
  <name>Jeremy Keith</name>
  <website>http://adactio.com/</website>
  <email>jeremy@clearleft.com</email>
</details>

<?xml version="1.0" encoding="utf-8"?>
<details>
  <name>Richard Rutter</name>
  <website>http://clagnut.com/</website>
  <email>richard@clearleft.com</email>
</details>
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>People 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) {
							//结果为xml格式,所以需要使用responseXML来获取
							var result=request.responseXML;
							//结果不能直接使用,必须先创建对应的节点,再把节点加入到#details中
							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);
							/*
							<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
							<a href="http://andybudd.com/">http://andybudd.com/</a>
							*/
							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>

JSON

andy.js

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

{"person": {
	"name":"Jeremy Keith",
	"website":"http://adactio.com/",
	"email":"jeremy@clearleft.com"
	}
}

{"person": {
  "name":"Richard Rutter",
  "website":"http://clagnut.com/",
  "email":"richard@clearleft.com"
  }
}
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>People 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) {
							//结果为json格式
							var result=request.responseText;
							var jsonObj=eval("("+result+")")
							//结果不能直接使用,必须先创建对应的节点,再把节点加入到#details中
							var name=jsonObj.person.name;
							var website=jsonObj.person.website;
							var email=jsonObj.person.email;
							
							//alert(name);
							//alert(website);
							//alert(email);
							/*
							<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
							<a href="http://andybudd.com/">http://andybudd.com/</a>
							*/
							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>



clearleft.css

body {
  background: #fff url("logo.png") fixed no-repeat top left;
  color: #321;
  font-family: Myriad,"Lucida Grande","Trebuchet MS",Verdana,Helvetica,Arial,sans-serif;
  line-height: 1.6;
  margin: 1em 20%;
}
a {
  color: #674;
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  color: #896;
  text-decoration: underline;
}


版权声明:本文为博主原创文章,转载请加转载地址http://blog.csdn.net/williamfan21c|Copyright ©2011-2017,Supernatural, All Rights Reserved.

ajax的异步提交以及返回数据的处理,重点json

在工作中,因为种种原因我需要用到了ajax,本身是一个java工程师,但是做java的并不是一辈子写后台,特别是如今的b/s架构,所以通过自身学习了ajax,废话不多扯,看下面。 1.首先我们需要...
  • u012745028
  • u012745028
  • 2015年05月12日 20:57
  • 1484

jquery的ajax请求处理以及处理后台java传的json数据

一、$.ajax的一般格式 $.ajax({      type: 'POST',      url: url ,     data: data ,     success: success...
  • lixhongwu
  • lixhongwu
  • 2013年07月02日 23:13
  • 6302

EasyUI+Ajax+Json+一般处理程序实现数据的前台与后台的交互

最近在进行组织部的项目,需要实现界面传值到后台,通过参数进行查询,并且将查询结果通过json数据传过来,最后显示到界面上。实现这样的功能需要EasyUI+Ajax+Json+一般处理程序之间的相互配合...
  • u013046597
  • u013046597
  • 2015年12月27日 19:41
  • 8125

Servlet+AJAX实现数据处理显示

实现功能:在输入框中输入字符,用AJAX传到后台Servlet处理后加上随机数,并返回到前台显示。 一、写前台jsp页面index.jsp My JSP 'i...
  • GreatNeyo
  • GreatNeyo
  • 2017年06月05日 10:24
  • 352

ajax学习之xml数据处理实例(网页注册用户名无刷新检测)

用户注册     用户名字:             用户密码:     电子邮件:                        ...
  • u013303425
  • u013303425
  • 2014年05月08日 23:31
  • 720

Spark大数据处理:技术、应用与性能优化

  • 2018年01月11日 14:11
  • 6.87MB
  • 下载

MongoDB大数据处理权威指南 第2版

  • 2017年12月26日 13:30
  • 56.85MB
  • 下载

Python数据处理 英文版

  • 2017年12月24日 17:29
  • 8.72MB
  • 下载

Spark大数据处理 技术、应用与性能优化

  • 2017年12月21日 15:05
  • 51.03MB
  • 下载

Hadoop-Spark大数据处理技巧.pdf

  • 2017年12月06日 10:59
  • 36.22MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ajax数据处理
举报原因:
原因补充:

(最多只允许输入30个字)