捕風之巢

隨筆分類

文章分類

收藏夾

java(3) (rss)

隨筆檔案

2007年3月 (7)

文章檔案

相冊

統計

隨筆 - 7
文章 - 82
評論 - 14
引用 - 0

留言簿(3)

java友情鏈接

閱讀排行榜

評論排行榜

Ajax應用詳解－－圖像網站的xml動態更新

1.客戶端頁面：showPic.html

<html>

<head>

<SCRIPT?LANGUAGE="JavaScript"?src="prototype-1.4.0.js"></SCRIPT>

<SCRIPT?LANGUAGE="JavaScript"?src="XmlReader.js"></SCRIPT>

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">

<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 捕風閱讀(511) 評論(1) 編輯收藏所屬分類: web 頁面開發


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 禁止IE緩存的方法 javascript中子類調用父類方法解決方案 Ajax應用詳解－－圖像網站的xml動態更新 javascript讀取xml工具XmlReader.js源代碼最近用javascript制作rss2.0閱讀器的心得用javascript讀取RSS數據實現圖片和flash的混合切換 CSS 濾鏡應用集錦 -- 巧用CSS的 BlendTrans 濾鏡 CSS 濾鏡應用集錦 -- 巧用CSS的 RevealTrans 濾鏡

捕風之巢

導航

隨筆分類

文章分類

收藏夾

隨筆檔案

文章檔案

相冊

統計

留言簿(3)

java友情鏈接

閱讀排行榜

評論排行榜

Ajax應用詳解－－圖像網站的xml動態更新

評論

# re: Ajax應用詳解－－圖像網站的xml動態更新 2007-03-08 18:11 123