Ajax学习笔记-Ajax数据格式

HTML

HTML由一些普通文本组成。如果服务器通过XMLHttpRequest发送HTML，文本将存储在responseText属性中。不必从responseText属性中读取数据，它已经是期望的格式，可以直接将其插入到页面中。插入HTML代码最简单的方法是更新这个元素的innerTHML属性。

<!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) {
							document.getElementById("details").innerHTML = request.responseText;
						}
					}
				}
				return false;
			}
		}
	}
</script>
</head>
<body>
	<ul>
		<li><a href="a.html">百度</a></li>
	</ul>
	<div id="details"></div>
</body>
</html>

a.html

<a href="http://www.baidu.com">http://www.baidu.com</a>

优点

-从服务器端发送的HTML代码在浏览器端不需要用Javascript进行解析。

-HTML的可读性好

-HTML代码块与innerHTML属性搭配，效率高。

缺点

-若需要通过Ajax更新一篇文档的多个部分，HTML不合适

-innerHTML不是DOM标准


XML

<!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) {
							//结果为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;

							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(name));
							aNode2.href = website;

							var detailsNode = document.getElementById("details");
							detailsNode.innerHTML = "";
							detailsNode.appendChild(h2Node);
							detailsNode.appendChild(aNode2);
						}
					}
				}
				return false;
			}
		}
	}
</script>
</head>
<body>
	<ul>
		<li><a href="andy.xml">andy</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://www.baidu.com</website>
	<email>[email protected]</email>
</details>

优点

-XML是一种通用的数据格式

-不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记

-利用DOM可以完全掌控文档

缺点

-如果文档来自服务器，就必须保证文档含有正确的首部信息。若文档类型不正确，那么responseXML的值将是空的

-当浏览器接收到长的XML文件后，DOM解析可能会很复杂



JSON

JSON（JavaScript Object Notation）是一种简单的数据格式，比XML更轻巧，是JavaScript原生格式，这意味着在JavaScript中处理JSON不需要任何特殊的API或工具包。

<script type="text/javascript">
	var object = {
		"name" : "umgsai",
		"age" : 12,
		"address" : {
			"city" : "beijing",
			"school" : "ctgu"
		},
		"teaching" : function() {
			alert("这是一个方法");
		}
	};
	alert(object.name);
	alert(object.age);
	alert(object.address.city);
	object.teaching();
	/*将字符串当做语句来执行
	var testStr = "alert(‘hello‘)";
	eval(testStr);
	*/
	/*
	var jsonStr = "{‘name‘:‘umgsai‘}";
	var testObject = eval("("+jsonStr+")");//字符串转成json对象
	alert(testObject.name);
	*/

</script>
<!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) {
							//使用json
							var result = request.responseText;
							var object = eval("("+result+")");
							//结果不能直接用，必须先创建对应的结点，再把结点放入到details中
							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(name));
							aNode2.href = website;

							var detailsNode = document.getElementById("details");
							detailsNode.innerHTML = "";
							detailsNode.appendChild(h2Node);
							detailsNode.appendChild(aNode2);
						}
					}
				}
				return false;
			}
		}
	}
</script>
</head>
<body>
	<ul>
		<li><a href="andy.json">andy</a></li>
	</ul>
	<div id="details"></div>
</body>
</html>

andy.json

{"person":{
"name":"umgsai",
"website":"http://www.baidu.com",
"email":"[email protected]"
}
}

优点

-作为一种数据传输格式，json与xml很相似，但是json更加灵巧。

-json不需要从服务器端发送含有特定内容类型的首部信息

缺点

-语法过于严谨

-代码不易读

-eval函数存在风险


小结

-若应用程序不需要与其他应用程序共享数据的时候，使用HTML片段来返回数据是最简单的。

-如果数据需要重用，JSON文件是个不错的选择，其在性能和大小方面有优势。

-当远程应用程序未知时，XML文档是首选，因为XML是web服务领域的“世界语”

时间： 2024-10-29 19:09:55

Ajax学习笔记-Ajax数据格式的相关文章

[ajax 学习笔记] json数据格式

之前写过ajax传送数据可以用普通文本和XML两种格式.这里记一下json数据格式. json:javascript object notation. 之前分析过,用文本和XML传送数据各有优劣.而json可以轻松地将javascript对象转换成可以随时发送的数据. 一个json数据例子: var people = { "programmers": [ { "firstName": "Brett", "lastName":&

[ajax 学习笔记] ajax 的服务器响应

在上一篇[ajax 学习笔记] ajax初试中,简单了解了一下ajax. 我是参考AJAX详解.chm学习的,资源已上传.参考链接:Ajax 专题 今天又学习了ajax中关于服务器响应的一些知识. ajax中服务器的响应是通过响应函数将服务器返回的数据呈现到页面的.服务器的响应体现在服务器响应回调函数中. 在上一篇的例子中,响应函数为: function updatePage(){ if(xmlHttp.readyState == 4){ //http就绪状态 if(xmlHttp.status

[ajax 学习笔记] ajax初试

ajax全称是:asynchronous javasctipt and xml. 1.为什么须要ajax? 一般web程序与server的交互是:页面发送请求等待server处理,server处理数据,用户页面刷新整个页面.从而完毕了一次交互. 假设用这样的同步方式进行多次这样的页面与server的交互,用户将会须要非常多时间去等待server处理. ajax异步处理的思想是:当页面发送请求后,交给server处理.server处理的同一时候,页面无须等待能够进行其它的操作,当server处理完

Ajax学习笔记(二)

二.prototype库详解 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" src="prototype.js"></script> //在自己的js中直接使用Prototype对象 <script type="text/javascript"> document.writeln("Prototype库的版本

Ajax学习笔记(三)

三.jQuery库详解 1.使用jQuery之后,javascript操作的不再是HTML元素对应的DOM对象,而是包装DOM对象的jQuery对象.js通过调用jQuery对象的方法来改变它所包装的DOM对象的属性,从而实现动态更新HTML页面. 由此可见,使用jQuery动态更新HTML页面只需以下两个步骤: (1)获取jQuery对象.jQuery对象通常是DOM对象的包装 (2)调用jQuery对象的方法来改变自身.当jQuery对象被改变时,jQuery包装的DOM对象随之改变,HTM

ajax学习笔记1

ajax是什么? ajax即“Asynchronous Javascript + XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.能够快速的从服务器获得所需数据和内容,实现局部刷新让用户能够更好的浏览网站.在没有ajax的时候,网页提交表单必须进行等待和刷新,这时用户必须等待服务器的响应,用户在当前页面不能做其他事情.自从有了ajax,用户在提交表单的时候不需要等待,可以浏览该页的其它东西,表单提交之后服务器能很快的返回所需的数据和网页,网页无需刷新. a

AJax 学习笔记二(onreadystatechange的作用)

AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能.这类似于回调函数的做法.onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果,如: 复制代码 代码如下: ajaxObj=createAjaxObject(); var url="/MyTod

Ajax学习笔记(一)

XMLHttpRequest对象详解 1.Ajax应用中我们使用XMLHttpRequest对象异步发送请求,这种请求既可以是GET,也可以是POST,都可以带请求参数. 请求发送出去之后,服务器响应会在合适的时候返回,但是客户端不会自动加载这种异步响应,程序必须先调用XMLHttpRequest对象的responseText或responseXML来获取    服务器响应,再通过DOM操作将服务器响应动态加载到当前页面中. XMLHttpRequest的用处是:提供与服务器异步通信的能力 2.

jvascript学习笔记---Json数据格式

JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包. JSON的规则很简单:对象是一个无序的“‘名称/值’对”集合.一个对象以“{”开始,“}”结束.每个“名称”后跟一个“:”(冒号):“‘名称/值’对”之间使用“,”(逗号)分隔. 简单的例子: var user = { "username":"andy&quo