捕风之巢

统计

留言簿(3)

java友情链接

阅读排行榜

评论排行榜

Ajax应用详解－－图像网站的xml动态更新

1.客户端页面：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); 
        //读取节点，返回包含节点的数组
        
        //通过获取子节点获取所有信息
        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;
        }
        
        //通过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();
    //===========页面效果和数据更新===============================
    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.服务器端页面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); 
        //读取节点，返回包含节点的数组
        
        //通过获取子节点遍历XML节点树(方法一)
        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;
        }
        
        //通过xpath查询遍历XML节点树(方法二)
        
        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
}

posted on 2006-11-03 11:31 捕风 阅读(499) 评论(1)  编辑  收藏 所属分类: web 页面开发

评论

# re: Ajax应用详解－－图像网站的xml动态更新 2007-03-08 18:11 123

123  回复  更多评论   


只有注册用户登录后才能发表评论。
网站导航: