本文介绍了Ajax允许的三种数据格式：HTML、XML和JSON。阐述了每种格式的数据获取、解析方式，分析了它们的优缺点，并给出了相关代码示例。最后对比得出，不共享数据用HTML，数据重用选JSON，远程应用未知时选XML。
允许的三种格式 HTML、XML、Json
HTML数据
HTML由一些普通的文本组成，如果服务器通过 XMLHttpRequest 发送 HTML，文本将存储在 responseText 属性中。
不必从 responseText 属性中读取数据，它已经是希望的格式，可以直接将它插入到页面中，通过简单的某个元素的 innerHTML 属性。
优点：
– 从服务器端发送的HTML代码在浏览器端不需要使用 JavaScript 进行解析。
– HTML 的可读性好
– HTML 代码块和 innerHTML 属性搭配，效率高。
缺点：
– 若需要通过 Ajax 更新一篇文档的多个部分，HTML不合适。
代码：
<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;
//alert(url);
request.open(method, url);
request.send(null);
request.onreadystatechange = function(){
if (request.readyState == 4){
//alert(request.status);
if (request.status == 200 || request.status == 304){
var divNode = document.getElementById("details");
divNode.innerHTML = request.responseText;
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<h1>City</h1>
<ul>
<li><a href="beijing.html">北京</a></li>
<li><a href="shanghai.html">上海</a></li>
<li><a href="nanjing.html">南京</a></li>
</ul>
<div id="details"></div>
</body>
beijing.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1px">
<tr>
<th>中文名称</th>
<th>外文名称</th>
<th>别 名</th>
<th>行政区类别</th>
<th>所属地区</th>
<th>下辖地区</th>
<th>政府驻地</th>
<th>电话区号</th>
<th>邮政区码</th>
<th>地理位置</th>
<th>面 积</th>
<th>人 口</th>
</tr>
<tr>
<td>北京 </td>
<td>beijing</td>
<td>燕、蓟、涿郡、幽州、北平 </td>
<td>首都、直辖市 </td>
<td>中国华北地区</td>
<td>16个市辖区 </td>
<td> 运河东大街57号 </td>
<td>010</td>
<td>100000</td>
<td>华北 </td>
<td>16410.54平方千米</td>
<td>2170.7万人（2017年） </td>
</tr>
</table>
</body>
</html>
XML数据
（1）获取：request.responseXML
（2）解析
（3）创建节点
（4）添加
优点：
– XML 是一种通用的数据格式
– 不必把数据强加到已经定义好的格式中，而是要为数据自定义合适的标记
– 利用 DOM 可以完全掌握文档
缺点：
– 如果文档来自于服务器，就必须保证文档中含有正确的首部信息，若文档类型不确定，那么 responseXML 的值将是空的
– 当浏览器接收到长的 XML 文件后，DOM解析可能会很复杂
代码：
<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;
//alert(url);
request.open(method, url);
request.send(null);
request.onreadystatechange = function(){
if (request.readyState == 4){
//alert(request.status);
if (request.status == 200 || request.status == 304){
// 获取xml 文件
var result = request.responseXML;
// 进行解析，可以将返回的文件当作 document 文件
/*
目标格式
<table><th>名称</th><th>电话区号</th><th>邮政区码</th>
<th>地理位置</th><td>北京</td><td>010</td><td>100000</td>
<td>运河东大街57号 </td></table>
*/
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var tel = result.getElementsByTagName("tel")[0].firstChild.nodeValue;
var mail = result.getElementsByTagName("mail")[0].firstChild.nodeValue;
var address = result.getElementsByTagName("address")[0].firstChild.nodeValue;
//alert(name + " " + tel + " " + mail + " " + address);
var tr1 = document.createElement("tr");
var th1 = document.createElement("th");
th1.appendChild(document.createTextNode("名称"));
var th2 = document.createElement("th");
th2.appendChild(document.createTextNode("电话区号"));
var th3 = document.createElement("th");
th3.appendChild(document.createTextNode("邮政编号"));
var th4 = document.createElement("th");
th4.appendChild(document.createTextNode("地理位置"));
//alert(123);
var tr2 = document.createElement("tr");
var td1 = document.createElement("td");
td1.appendChild(document.createTextNode(name));
var td2 = document.createElement("td");
td2.appendChild(document.createTextNode(tel));
var td3 = document.createElement("td");
td3.appendChild(document.createTextNode(mail));
var td4 = document.createElement("td");
td4.appendChild(document.createTextNode(address));
//alert(456);
tr1.appendChild(th1);
tr1.appendChild(th2);
tr1.appendChild(th3);
tr1.appendChild(th4);
//alert(123);
tr2.appendChild(td1);
tr2.appendChild(td2);
tr2.appendChild(td3);
tr2.appendChild(td4);
//alert(456);
var tableNode = document.createElement("table");
tableNode.border = "1px";
tableNode.appendChild(tr1);
tableNode.appendChild(tr2);
//先去除之前的内容，再添加新的内容
document.getElementById("details").innerHTML = "";
document.getElementById("details").appendChild(tableNode);
}
}
}
return false;
}
}
}
</scripy>
</head>
<body>
<h1>People</h1>
<ul>
<li><a href="beijing.xml">北京</a></li>
<li><a href="shanghai.xml">上海</a></li>
<li><a href="nanjing.xml">南京</a></li>
</ul>
<div id="details"></div>
</body>
beijing.xml
<?xml version="1.0" encoding="utf-8" ?>
<details>
<name>北京</name>
<tel>010</tel>
<mail>100000</mail>
<address>运河东大街57号 </address>
</details>
JSON数据
JSON（JavaScript Object Notation）一种简单的数据格式，比 xml 更轻巧。JSON 是 JavaScript 原生格式，这意味着在JavaScript中处理 JSON 数据不需要任何特殊的 API 或工具包。
JSON 的规格很简单：对象是一个无序的“名称/值”对的集合，一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“ : ”（冒号）；各个“名称/值”对之间用“,”（逗号）分隔。数据一定要用双引号，用单引号有的时候会无法解析。
var jsonObject = {
"name" : "qiqihaer",
"age" : 12,
"address" : { "city" : "beijing", "school ： qiqihaer"} ,
"teach" : function() {
alert("JavaEE, JavaScript");
} };
alert(jsonObject.name);
alert(jsonObject.address.city);
jsonObject.teach();
对象描述中存储的数据可以是字符串，数字或者布尔值。对象描述也可存储函数，那就是对象的方法。调用的时候要加上 一对小括号。
eval() : 将字符串转换成本地的 JavaScript 代码执行
var testStr = “alert(‘hello eval’)”;
eval(testStr);
//在转换 json 字符串的时候，需要用一对 ( ) 将 json 字符串括起来，然后再使用 eval
var jsonStr = “{‘name’:‘qiqihaer’}”;
var testObject = eval("(" + jsonStr + “)”);
alert(testObject.name);
优点：
– 作为一种数据传输格式，JSON 和 XML 很相似，但是它更加的灵巧。
– JSON 不需要从服务器端发送含有特定内容类型的首部信息。
缺点：
– 过于严谨，代码不易度
– eval 函数存在危险
JSON提供了 json.js 包，下载 http://www.json.org/json.js 后，使用 parseJSON() 方法价格字符串解析成 JS 对象。
代码：
<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){
var result = request.responseText;
var object= eval("(" + result + ")");
var name = object.city.name;
var tel = object.city.tel;
var mail = object.city.mail;
var address = object.city.address;
//alert(name + " " + tel + " " + email + " " + address);
var tr1 = document.createElement("tr");
var th1 = document.createElement("th");
th1.appendChild(document.createTextNode("名称"));
var th2 = document.createElement("th");
th2.appendChild(document.createTextNode("电话区号"));
var th3 = document.createElement("th");
th3.appendChild(document.createTextNode("邮政编号"));
var th4 = document.createElement("th");
th4.appendChild(document.createTextNode("地理位置"));
//alert(123);
var tr2 = document.createElement("tr");
var td1 = document.createElement("td");
td1.appendChild(document.createTextNode(name));
var td2 = document.createElement("td");
td2.appendChild(document.createTextNode(tel));
var td3 = document.createElement("td");
td3.appendChild(document.createTextNode(mail));
var td4 = document.createElement("td");
td4.appendChild(document.createTextNode(address));
//alert(456);
tr1.appendChild(th1);
tr1.appendChild(th2);
tr1.appendChild(th3);
tr1.appendChild(th4);
//alert(123);
tr2.appendChild(td1);
tr2.appendChild(td2);
tr2.appendChild(td3);
tr2.appendChild(td4);
//alert(456);
var tableNode = document.createElement("table");
tableNode.border = "1px";
tableNode.appendChild(tr1);
tableNode.appendChild(tr2);
document.getElementById("details").innerHTML = "";
document.getElementById("details").appendChild(tableNode);
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li><a href="beijing.js">北京</a></li>
<li><a href="shanghai.js">上海</a></li>
<li><a href="nanjing.js">南京</a></li>
</ul>
<div id="details"></div>
</body>
beijing.js //json内容
{"city":{
"name":"北京",
"tel":"010",
"mail":"10000",
"address":"运河东大街57号"
}
}
对比：
若应用程序不需要与其他应用程序共享数据时候，使用 HTML 片段来返回数据是最简单。
如果数据需要重用， JSON 文件是个不错的选择，其性能和文件大小方面有优势。
当远程应用程序未知时，XML 文档是首选，因为 XML 是 web 服务领域的 “世界语言”。
扫一扫
645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
