首页 > 代码库 > Ajax学习笔记-Ajax数据格式
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="http://www.mamicode.com/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="http://www.mamicode.com/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>umgsai@126.com</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="http://www.mamicode.com/andy.json">andy</a></li>
</ul>
<div id="details"></div>
</body>
</html>andy.json
{"person":{
"name":"umgsai",
"website":"http://www.baidu.com",
"email":"umgsai@126.com"
}
}优点
-作为一种数据传输格式，json与xml很相似，但是json更加灵巧。
-json不需要从服务器端发送含有特定内容类型的首部信息
缺点
-语法过于严谨
-代码不易读
-eval函数存在风险
小结
-若应用程序不需要与其他应用程序共享数据的时候，使用HTML片段来返回数据是最简单的。
-如果数据需要重用，JSON文件是个不错的选择，其在性能和大小方面有优势。
-当远程应用程序未知时，XML文档是首选，因为XML是web服务领域的“世界语”
本文出自 “阿凡达” 博客，请务必保留此出处http://shamrock.blog.51cto.com/2079212/1561511
Ajax学习笔记-Ajax数据格式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。