AJAX指南----操作XML

80酷酷网    80kuku.com

  ajax|xml通过上一章的学习,我们已经对AJAX的工作原理有了一个基本的了解,但是上一章的例子中并没有用到AJAX中很重要的一个组件XML,所以上一章的例子最多只能称为AJAH(HTML)或者干脆就是AJAT(TEXT),因此这一章我们就来学习如何使用AJAX操作XML。

同上一章一样,首先我们需要创建一个XMLHttp对象:

var http = getHTTPObject();

假设我们有一个XML文件mailbox.xml,它的内容如下:

<?xml version="1.0" encoding="GB2312"?>
<mailbox>
<mail>
<to>老李</to>
<from>老张</from>
<heading>好久不见!</heading>
<body>好久不见,最近好吗?</body>
</mail>
<mail>
<to>小李</to>
<from>小王</from>
<heading>周末有空么?</heading>
<body>周末有空么?一起看场电影吧!</body>
</mail>
</mailbox>

可以看到,里面存储了两封邮件,现在我们的目标就是把这两封邮件以HTML的方式展现出来,首先我们需要创建一个简单的HTML的界面:

<p><button >查看书架</button></p>
<div id="ajax-sample"></div>

ajax-sample块用于展示邮件,但查看信箱按钮被按下时,loadXMLDoc函数将被调用:

function loadXMLDoc(name, parseFunc)
{
http.open("GET", name, true);
http.onreadystatechange = parseFunc;
http.send(null);
}

可以看到,这个函数只是简单的向服务器发送一个GET请求,真正对XML文档进行处理的是parseFunc,也就是我们传入的parseMailBox函数:

function parseMailBox()
{
//4表示请求已完成
if (http.readyState == 4) {
//responseXML是一个HTML DOM Document对象,
//我们将使用它来解析XML文档
var mailBoxXML = http.responseXML;
//获取所有信件
var mails = mailBoxXML.getElementsByTagName('mail');
var mailStr = "";

for (var i = 0; i < mails.length; i++) {
var mail = mails;

//解析信件
var to = getElementText(mail, "to");
var from = getElementText(mail, "from");
var heading = getElementText(mail, "heading");
var body = getElementText(mail, "body");

//为信件添加附属信息
mailStr += "收信人:" + to + "
";
mailStr += "发信人:" + from + "
";
mailStr += "标题:" + heading + "
";
mailStr += "正文:
" + body + "

";
}
//将信件展示到页面上
document.getElementById("ajax-sample").innerHTML = mailStr;
}
}

getElemenText函数相当简单,它的作用就是获取一个元素的文本:

function getElementText(parentElem, name)
{
var result = parentElem.getElementsByTagName(name)[0];
return result.firstChild.nodevalue;
}

这样一个XML文档就解析完毕了,是不是相当的简单。


分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: