欢迎来到福编程网,本站提供各种互联网专业知识!

Flash & Ajax 操作 XML 实例:无刷新分页

发布时间:2006-08-02 作者: 来源:转载
其实标题只是一个噱头罢了,只是想谈一下,Javascript与Actionscript是如何操作XML的。希望能帮助一些只用Javascript或只懂Actionscript的朋友,了解两者的相同与不同之处。Flash与后台连接有许多种,Actionscript调用XML()算是比较简单的一种了,而Javascrip
其实标题只是一个噱头罢了,只是想谈一下,Javascript与Actionscript是如何操作XML的。
希望能帮助一些只用Javascript或只懂Actionscript的朋友,了解两者的相同与不同之处。
Flash与后台连接有许多种,Actionscript调用XML()算是比较简单的一种了,
而Javascript调用xmlHttp,便形成了现在很流行的Ajax了。
现在就用一个网上常出现的分页效果来对Flash和Ajax做个入门学习。
效果预览
源文件下截
source.rar
实际运用中一般是通过后台脚本生成XML文件,再对其产生的数据进行操作
由于篇幅关系在本文中将用1.xml2.xml3.xml代替。后台脚本不做说明
首先了解一个XML的结构:
复制代码 代码如下:

幸福终点站
绝命终结站
恐怖电影

….


从简单的Flash开始吧
复制代码 代码如下:
functionsetxml(page){
pageXml=newXML();//申明XML对象
pageXml.ignoreWhite=true;//允许空白
pageXml.load(page+".xml?rid="+Math.random());//读取XML文件
pageXml.onLoad=function(success)
{
if(success)
{
parseXml(pageXml);//如果读取成功,分析XML文件
}
}
}
functionparseXml(pageXml){
xmlroot=ageXml.firstChild;//定义XML根目录
for(i=0;i{
attachMovie("tr","tr_"+i,i);//生成行
this["tr_"+i]._x=13;
this["tr_"+i]._y=25*i+33;
this["tr_"+i].no=xmlroot.childNodes[i].attributes.id;//取得一条记录的ID
this["tr_"+i].name=xmlroot.childNodes[i].firstChild;//片名
this["tr_"+i].type=xmlroot.childNodes[i].attributes.type;//类型
page=pageXml.firstChild.attributes.page;//获取当前页
}
}
if(!page)//初始页码为第一页page=1;
setxml(page);//初始第一页内容
presetxmlbtn.onRelease=function()
{
setxml(page*1-1);//向前翻页,读取内容
}
nextbtn.onRelease=function()
{
setxml(page*1+1);//向后翻页,读取内容
}

接下来是Ajax了
关于Ajax入门学习可以有翻一下我以前的日志,我推荐过两篇不错的文章
复制代码 代码如下:
varxmlHttp
/*
第一部分是有关xmlHttp的申明,因为IE和其它一些浏览生成xmlHttp的对象有一点两样,所以申明时比较麻烦
其它主要功能相当于Flash方式中的"newXML()"当然还包函其它功能
*/
functionGetXmlHttpObject(handler)
{
varobjXmlHttp=null;
if(navigator.userAgent.indexOf("MSIE")>=0)
{
varstrName="Msxml2.XMLHTTP";
if(navigator.appVersion.indexOf("MSIE5.5")>=0)//既使是IE都有两种申明方式
{
strName="Microsoft.XMLHTTP";
}
try
{
objXmlHttp=newActiveXObject(strName);
objXmlHttp.onreadystatechange=handler;
returnobjXmlHttp;
}
catch(e)
{
alert("Error.ScriptingforActiveXmightbedisabled");
return;
}
}
else
{
objXmlHttp=newXMLHttpRequest();//Firefox、Opera等都是用这种
objXmlHttp.onload=handler;
objXmlHttp.onerror=handler;
returnobjXmlHttp;
}
}
//首先要被调用的函数,可看作上面Flash中的setxml()函数,
functionshowpage(no)
{
document.getElementById("loadstatus").innerHTML="Lading…";
varurl=no+".xml?rid="+Math.random();
//stateChanged_showplist是下面的函数名,注意的是不要加括号
xmlHttp=GetXmlHttpObject(stateChanged_showplist);
//传递方式是GET,也可以选择POST方式,有时传递变量是中文要记得设置文件头
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
//分析XML函数
functionstateChanged_showplist()
{
if(xmlHttp.readyState==4||xmlHttp.readyState=="complete")//xmlHttp.readyState==44表示读取结束
{
document.getElementById("loadstatus").innerHTML="";
table=document.getElementById("pagebody");//生成TALBEElement
for(i=table.rows.length-1;i>=0;i–)//要删除原来有的行,不然表格会无限延伸
table.deleteRow(i);
xmlroot=xmlHttp.responseXML.getElementsByTagName("movie");//取得XML所需要的根

for(i=0;i{
//简单的DOM,生成表格。
tr=table.insertRow(-1);
td=tr.insertCell(-1);
td.align="center";
td.innerHTML=‘'+xmlroot[i].getAttribute('id')+'';
td=tr.insertCell(-1);
td.innerHTML=xmlroot[i].firstChild.data;
td=tr.insertCell(-1);
td.innerHTML=xmlroot[i].getAttribute('type');
}
//定义翻页链接
page=xmlHttp.responseXML.getElementsByTagName("data")[0].getAttribute('page')
if(page>1)
{
prepage=page*1-1;
varchangpage="上一页";
}
else
{
changpage="上一页";
}
if(page<3)
{
nextpage=page*1+1;
changpage+="下一页";
}
else{
changpage+="下一页";
}
document.getElementById("changpage").innerHTML=changpage;
}
}

相关推荐