学习了HTML、XML、JSON发现它们有同有异，它们分别于Ajax交互时分别有什么样的表现呢？
首先，无论服务器返回的是HTML、XML还是JSON，创建Ajax请求以及检查文件是否可用的过程是一样的，唯一的不同是如何处理返回的数据。
当服务器响应任何请求时，他会返回一条状态信息来指示是否完成了请求：
Ajax加载HTML
使用Ajax向页面添加数据时，HTML是最简单的数据类型，浏览器会向渲染其他HTML一样渲染它。页面其余部分的CSS规则同样适用于新内容。
DEMO
<span style="font-size:18px;"><strong>//xhr的变量中存储了一个XMLHttpRequest对象 var xhr = new XMLHttpRequest(); //该对象的onload事件会在服务器响应时触发匿名函数 xhr.onload = function () { //检查服务器是否成功响应 if (xhr.status === 200) { document.getElementById('content').innerHTML = xhr.responseText; } }; /* 其open方法用来准备请求，它有三个参数 1、get或post来指示如何发送请求 2、将要处理请求的页面路径 3、请求是否异步 */ xhr.open('GET','data/data.html',true); /* 联系服务器请求新的html，send方法需要一个参数， 如没有数据需要发送，可以使用null */ xhr.send(null);</strong></span>
Ajax加载XML
请求XML数据和请求HTML非常相似，然而处理返回的数据却复杂很多，XML必须被转换成HTML才能显示在页面上。
DEMO
<span style="font-size:18px;"><strong>//xhr的变量中存储了一个XMLHttpRequest对象 var xhr = new XMLHttpRequest(); //该对象的onload事件会在服务器响应时触发匿名函数 xhr.onload = function () { //检查服务器是否成功响应 if (xhr.status === 200) { //将返回的XML存储到response变量中 var response = xhr.responseXML; /* 声明events的新变量，来保存XML中的所有 <event>对象 */ var events = response.getElementsbyTagName('event'); /* 用for循环遍历所有的<event>元素，收集存储在其子元素的数据 并将它们添加到新的html元素中 */ for (var i = 0; i < events.length; i++) { var container,image,location,city,newline; container = document.createElement('div'); container.className = 'event'; image = document.createElement('img'); image.setAttribute('src',getNodeValue(events[i],'map')); image.appendChild(document.createTextNode(getNodeValue(events[i],'map'))); container.appendChild(image); location = document.createElement('p'); city = document.createElement('b'); newline = document.createElement('br'); city.appendChild(document.createTextNode(getNodeValue(events[i],'location'))); location.appendChild(newline); location.insertBefore(city,newline); location.appendChild(document.createTextNode(getNodeValue(events[i],'date'))); container.appendChild(location); document.getElementById('content').appendChild(container); } } /* 获取每个XML元素的内容，它有两个参数： 1、obj是一个XML的片段 2、tag是想要进行信息采集的标签名称 */ function getNodeValue(obj,tag) { return obj.getElementsbyTagName(tag)[0].firstChild.nodeValue; } }; xhr.open('GET','data/data.xml',true); xhr.send(null); </strong></span>
Ajax加载JSON
请求JSON数据时会使用和请求HTML与XML数据时相同的语法，当服务器响应时，JSON会被转换成HTML
DEMO
<span style="font-size:18px;"><strong>{
"events":[
{ "location": "San Francisco,CA","date": "May 1","map": "img/map-ca.png"},{"location": "Austin,TX","date": "May 15","map": "img/map-tx.png"},{"location": "New York,NY","date": "May 30","map": "img/map-ny.png"}
]
}
var xhr = new XMLHttpRequest();
xhr.onload=function() {
if (xhr.status===200) {
/*
利用JSON对象的parse（）方法将字符串装换为js对象，
来自服务器的JSON数据被存储到变量中，它由XMLHttpRequest对象
的responseText属性转换而来。
*/
responSEObject = Json.parse(xhr.responseText);
//创建变量来存放HTML数据
var newContent = '';
/*
利用循环将对象的内容整理成相应的HTML标记，然后添加到newContent变量中
*/
for (var i = 0; i < responSEObject.events.length; i++) {
newContent += '<div class="event">';
newContent += '<img src = "' +responSEObject.events[i].map + '"';
newContent += 'alt="' +responSEObject.events[i].location+ '"/>';
newContent += '<p><b>' + responSEObject.events[i].location + '</b><br>';
newContent += responSEObject.events[i].date + '</p>';
newContent += '</div>';
}
//使用innerHTML属性来将新的HTML添加到页面中
document.getElementById('content').innerHTML = newContent;
}
};
xhr.open('GET','data/data,json',true);
xhr.send(null);
</strong></span>
