每次进行的简单Ajax请求并没有什么不同，重要的是从服务器返回的数据能帮助我们完成任务。
1. 基于XML的RSS Feed
从服务器返回的数据格式中最普遍的是XML格式，所有现代的浏览器都对XML文档有直接的支持，能即时将它们转换为DOM形式，只要像遍历其它DOM一样的遍历它就可以了。通常无法使用getElementById函数遍历服务器返回的XML文档，这是因为浏览器对非HTML的XML文档没有创建唯一的id属性。下面展示一个例子，从基于XML的远程RSS Feed来加载文章的标题
<html>
<head>
<title>Dynamic RSS Feed Widget</title>
<!—基于通用的Ajax函数 -->
<script src="ajax.js"></script>
<script>
// 等待文档加载完毕
window.onload = function(){
// 使用Ajax载入RSS feed
ajax({
// RSS feed的URL
url: "rss.xml",
// xml文档类型
type: "xml",
// 请求成功后执行
onSuccess: function( rss ) {
// 把所有RSS feed的标题都插入到id为'feed'的<ol>中
var feed = document.getElementById("feed");
// RSS XML文档中所有的标题
var titles = rss.getElementsByTagName("title");
// 遍历标题
for ( var i = 0; i < titles.length; i++ ) {
// 创建一个<li>元素来存放标题
var li = document.createElement("li");
// 将它的内容设置为项目标题
li.innerHTML = titles[i].firstChild.nodeValue;
// 添加到<ol>元素中
feed.appendChild( li );
}
}
});
};
</script>
</head>
<body>
<h1>Dynamic RSS Feed Widget</h1>
<p>Check out my RSS feed:</p>
<!—在这里插入RSS feed -->
<ol id="feed"></ol>
</body>
</html>
从上面的例子可以看出，一旦把Ajax请求/响应过程的复杂性解决了，剩下的处理其实并不复杂。XML是一种从服务器端快速传输数据到客户端的方法。
2. 注入HTML
可以用Ajax实现的另一个有用的技巧是，动态地将HTML片段注入到文档里。这个技巧和遍历XML的方法区别在于，不必解析和遍历从服务器返回的数据，就可以把它们插入到文档中。
从远程文件加载一段HTML代码，并将它注入到当前的网页中：
<html>
<head>
<title>HTML Sports Scores Loaded via AJAX</title>
<!—Load in our generic AJAX function -->
<script src="ajax.js"></script>
<script>
// 等待文档加载完毕
window.onload = function(){
// 使用Ajax载入RSS feed
ajax({
// HTML文档的url
url: "scores.html",
// HTML文档类型
type: "html",
// 请求成功后执行
onSuccess: function( html ) {
// 将数据插入到id为'scores'的div中
var scores = document.getElementById("scores");
// 将新的HTML文档注入文档
scores.innerHTML = html;
}
});
};
</script>
</head>
<body>
<h1> HTML Sports Scores Loaded via AJAX </h1>
<!—注入HTML文档的位置 -->
<div id="scores"></div>
</body>
</html>
3. JSON与JavaScript
JSON数据可以作为XML文档的一种轻量级的替代品。此外，从服务器提供纯JavaScript代码则是一个构建动态多用户Web应用程序的好方法。
动态载入并执行一个远程JavaScript文件：
<html>
<head>
<!—载入通用的Ajax函数 -->
<script src="ajax.js"></script>
<script>
// 加载远程的JavaScript文件
ajax({
// JavaScript文件的url
url: "myscript.js",
// script文档类型
type: "script"
});
</script>
</head>
<body></body>
</html>
转载请注明：陈童的博客 » Ajax — 返回数据的用途
