ajax技术怎么应用程序,如何使用Ajax技术开发Web应用程序(2)

在上一篇文章中，我们讨论了如何通过javascript从一个远程XML文件中取得数据。在这篇文章中，我们将学会怎样对数据作更复杂的处理。作为一个示例，我们会准备一组XML数据，将数据分割成独立的片断并以不同的方式展示这些片断(取决于它们是如何被标识的)。

这篇文章是建立在上一篇文章中构造的示例代码的基础之上，所以如果你不能理解我们现在的代码，你可以回过头去读第一篇文章(sheneyan注：就在上面)。

开始～

让我们开始我们的第一步：构造XML。我们准备写一个XML文档，它组织了一系列准备让javascript处理的数据，所以我们将一起组织一些节点和子节点(或者，元素和子元素)。在这个例子里，我们将使用一些家庭宠物的名字：

猫

狗

鱼

在上面，我们有这个XML声明(标明这个文档是一个XML 1.0 文档，使用UTF-8编码)，一个根元素()将下面所有的元素组合在一起，一个元素组织了所有的宠物，然后一个节点对应一只宠物。为了指定每一只宠物是什么类型的动物，我们在元素中设置了文本节点：猫，狗，鱼。

/p>

"http://www.w3.org/TR/html4/strict.dtd">

使用Ajax开发Web应用程序 - 示例

function ajaxRead(file){

var xmlObj = null;

if(window.XMLHttpRequest){

xmlObj = new XMLHttpRequest();

} else if(window.ActiveXObject){

xmlObj = new ActiveXObject("Microsoft.XMLHTTP");

} else {

return;

}

xmlObj.onreadystatechange = function(){

if(xmlObj.readyState == 4){

processXML(xmlObj.responseXML);

}

}

xmlObj.open ('GET', file, true);

xmlObj.send ('');

}

function processXML(obj){

var dataArray = obj.getElementsByTagName('pet');

var dataArrayLen = dataArray.length;

var insertData = '

' + 'Pets

for (var i=0; i

insertData += '

' + dataArray[i].firstChild.data + '';

}

insertData += '

';

document.getElementById ('dataArea').innerHTML = insertData;

}

//-->

使用Ajax开发web应用程序

这个页面演示了AJAX技术如何通过动态读取一个远程文件来更新一个网页的内容－－不需要任何网页的重新加载。注意：这个例子对于禁止js的用户来说没有效果。

这个页面将演示如从取回并处理成组的XML数据。被取回的数据将会以表格形式输出到底下。

查看演示.

(Sheneyan注：完整代码示例见 example_2.html ，XML文件见：data_2.xml)