1.客戶端頁(yè)面：showPic.html
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">
<SCRIPT?LANGUAGE="JavaScript"?src="prototype-1.4.0.js"></SCRIPT>
<SCRIPT?LANGUAGE="JavaScript"?src="XmlReader.js"></SCRIPT>
<script?LANGUAGE="JavaScript">
cur_index=1;
function?searchSales()
{
var?url?=?'response1.asp';
var?pars?=?'cur_index='+cur_index;
var?myAjax2?=?new?Ajax.Request(
url,
{
method:?'get',
parameters:?pars,
onComplete:?showResponse
});
cur_index++;
if(cur_index>4)?cur_index=0;
}
function?showResponse(originalRequest)
{
????//put?returned?XML?in?the?textarea
????var?xmlStr?=?originalRequest.responseText;
????var?mytitle,myurl;
????
????//===========讀取并處理xml文件==============================
????var?xmlReader?=?new?XmlReader();
????var?xmlDoc?=?xmlReader.createXmlDoc();
????if(xmlDoc!=null)
????{
????????//讀取包含xml的字符串
????????xmlDoc.async="False";
????????xmlDoc.loadXML(xmlStr);
????????//讀取xml文件
????????//xmlDoc.async="False";
????????//xmlDoc.load(xmlFile);?
????????//讀取節(jié)點(diǎn)，返回包含節(jié)點(diǎn)的數(shù)組
????????
????????//通過(guò)獲取子節(jié)點(diǎn)獲取所有信息
????????nodes?=?xmlDoc.documentElement.childNodes;
????????//alert("nodes:"+nodes.length);
????????for(var?j=0;j<nodes.length;j++)
????????{
????????????mytitle?=?nodes.item(j).getElementsByTagName("title").item(0).text;
????????????myurl?=?nodes.item(j).getElementsByTagName("url").item(0).text;
????????}
????????
????????//通過(guò)xpath查詢獲取信息
????????/**//*
????????var?tabs?=?xmlDoc.selectNodes("images/image");??
????????alert("tabs:"+tabs.length);
????????for(var?i=0;?i<tabs.length;?i++)??
????????{??
??????????mytitle?=?tabs.item(i).getElementsByTagName("title").item(0).text;??
???????????myurl?=?tabs.item(i).getElementsByTagName("url").item(0).text;??
????????}
????????*/
????????xmlDoc=null;
????}
????xmlReader.close();
????//===========頁(yè)面效果和數(shù)據(jù)更新===============================
????document.all('title').innerText=mytitle;
????
????document.all('placeholder').style.backgroundImage='url('+pic.src+')';
????pic.style.visibility='hidden';
????//alert(originalRequest.responseText);
????pic.src='pic/'+myurl;
????pic.filters.revealTrans.Transition=6;
????pic.filters.item(0).apply();
????pic.style.visibility='visible';
????pic.filters.item(0).play();
}
</script>
</head>
<body>
<input?type=button?value=next?onclick="searchSales()">
<table?width="151">
<tr><td?width="151"?height="171">
<div?id="placeholder">
<img?src='pic/001.gif'?id='pic'?name='pic'?width="151"?height="171"?style='filter:revealtrans(duration=2.0,transition=0)'>
</div>
</td></tr><tr><td>
<div?id="title"></div>
</td></tr>
</table>
</body></html>
2.服務(wù)器端頁(yè)面getPicAction.asp
<%
img_list=Array("001.gif","002.gif","003.gif","004.gif","005.gif")
title_list=Array("image1","image2","image3","image4","image5")
cur_index=Request.QueryString("cur_index")
response.write?"<images><image><id>"&cur_index&"</id><title>"&title_list(cur_index)&"</title><url>"&img_list(cur_index)&"</url></image></images>"
%>3.xml文件解析器XmlReader.js
/**//**
/*操作示例
????//===========讀取并處理xml文件==============================
????var?mytitle,myurl;
????var?xmlReader?=?new?XmlReader();
????var?xmlDoc?=?xmlReader.createXmlDoc();
????if(xmlDoc!=null)
????{
????????//讀取包含xml的字符串
????????xmlDoc.async="False";
????????xmlDoc.loadXML(xmlStr);
????????//讀取xml文件
????????//xmlDoc.async="False";
????????//xmlDoc.load(xmlFile);?
????????//讀取節(jié)點(diǎn)，返回包含節(jié)點(diǎn)的數(shù)組
????????
????????//通過(guò)獲取子節(jié)點(diǎn)遍歷XML節(jié)點(diǎn)樹(方法一)
????????nodes?=?xmlDoc.documentElement.childNodes;
????????//alert("nodes:"+nodes.length);
????????for(var?j=0;j<nodes.length;j++)
????????{
????????????mytitle?=?nodes.item(j).getElementsByTagName("title").item(0).text;
????????????myurl?=?nodes.item(j).getElementsByTagName("url").item(0).text;
????????}
????????
????????//通過(guò)xpath查詢遍歷XML節(jié)點(diǎn)樹(方法二)
????????
????????var?tabs?=?xmlDoc.selectNodes("images/image");??
????????alert("tabs:"+tabs.length);
????????for(var?i=0;?i<tabs.length;?i++)??
????????{??
??????????mytitle?=?tabs.item(i).getElementsByTagName("title").item(0).text;??
???????????myurl?=?tabs.item(i).getElementsByTagName("url").item(0).text;??
????????}
????????
????????xmlDoc=null;
????}
????xmlReader.close();
**/
function?XmlReader()
{
????this.xmlDoc=null;
????this.createXmlDoc=getXmlDoc;
????this.close=closeXmlDoc;
}
function?getXmlDoc()
{
????if?(window.ActiveXObject)
?????{
??????????//document.write("Microsoft.XMLDOM");
??????this.xmlDoc?=?new?ActiveXObject("Microsoft.XMLDOM");
?????}
?????else?if?(document.implementation?&&?document.implementation.createDocument)
?????{
??????//document.write("document.implementation.createDocument");
??????this.xmlDoc=?document.implementation.createDocument("","doc",null);
?????}
?????if?(typeof?this.xmlDoc!="undefined")
?????{
?????????return?this.xmlDoc;
?????}else{
?????????return?null;
?????}
}
function?closeXmlDoc()
{
????this.xmlDoc=null
}