在上一篇文章中,我们讨论了如何通过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数据。被取回的数据将会以表格形式输出到底下。
查看演示.
织梦好,好织梦
你会注重到我们和上次一样以同样的方式(通过一个超链接)调用了这个函数,而且我们将数据放入一个DIV(这次这个东东叫做“dataArea”)。这个ajaxRead()函数和上次很接近,除了一点不同:onreadystatechange函数。让我们先看一下这个函数: