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

其实标题只是一个噱头罢了,只是想谈一下,javascript 与 actionscript 是如何操作xml的。
希望能帮助一些只用 javascript 或 只懂 actionscript 的朋友,了解两者的相同与不同之处。

flash 与 后台连接有许多种,actionscript 调用 xml() 算是比较简单的一种了,
而javascript 调用 xmlhttp ,便形成了现在很流行的ajax了。

现在就用一个网上常出现的分页效果来对 flash 和 ajax 做个入门学习。 ( 效果预览 ) ( 源文件下载 )

 

 

 

实际运用中一般是通过后台脚本生成xml文件,再对其产生的数据进行操作
由于篇幅关系在本文中将用1.xml 2.xml 3.xml代替。后台脚本不做说明

首先了解一个xml的结构:

<data>
<movie id=”1″ type=”爱情”>幸福终点站</movie>
<movie id=”2″ type=”恐怖”>绝命终结站</movie>
<movie id=”3″ type=”喜剧”>恐怖电影</movie>


</data>
从简单的flash开始吧


function setxml(page){
pagexml = new xml(); //申明xml对象
pagexml.ignorewhite = true; //允许空白
pagexml.load(page+".xml?rid="+math.random()); //读取xml文件
pagexml.onload = function(success)
{
if (success)
{
parsexml(pagexml); //如果读取成功,分析xml文件
}
}
}
function parsexml(pagexml){
xmlroot = agexml.firstchild; //定义xml根目录
for (i=0;i&lt;xmlroot.childnodes.length;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了

<strong>
var xmlhttp

/*
第一部分是有关xmlhttp的申明,因为ie和其它一些浏览生成xmlhttp的对象有一点两样,所以申明时比较麻烦
其它主要功能相当于flash方式中的 "new xml()" 当然还包函其它功能
*/
function getxmlhttpobject(handler)
{
var objxmlhttp=null;
if (navigator.useragent.indexof("msie")&gt;=0)
{
var strname="msxml2.xmlhttp";
if (navigator.appversion.indexof("msie 5.5")&gt;=0) //既使是ie都有两种申明方式
{
strname="microsoft.xmlhttp";
}
try
{
objxmlhttp=new activexobject(strname);
objxmlhttp.onreadystatechange=handler;
return objxmlhttp;
}
catch(e)
{
alert("error. scripting for activex might be disabled");
return;
}
}
else
{
objxmlhttp=new xmlhttprequest(); //firefox、opera等都是用这种
objxmlhttp.onload=handler;
objxmlhttp.onerror=handler;
return objxmlhttp;
}
}

//首先要被调用的函数,可看作上面flash中的 setxml()函数,
function showpage(no)
{
document.getelementbyid("loadstatus").innerhtml = "lading…";
var url = no+".xml?rid="+math.random();
//statechanged_showplist是下面的函数名,注意的是不要加括号
xmlhttp=getxmlhttpobject(statechanged_showplist);
//传递方式是get,也可以选择post方式,有时传递变量是中文要记得设置文件头
xmlhttp.open("get", url , true);
xmlhttp.send(null);
}

//分析xml函数
function statechanged_showplist()
{
if (xmlhttp.readystate==4 || xmlhttp.readystate=="complete") //xmlhttp.readystate==4 4表示读取结束
{
document.getelementbyid("loadstatus").innerhtml = " ";
table = document.getelementbyid("pagebody"); //生成talbe element
for (i = table.rows.length-1; i &gt;= 0; i╟) //要删除原来有的行,不然表格会无限延伸
table.deleterow(i);
xmlroot = xmlhttp.responsexml.getelementsbytagname("movie"); //取得xml所需要的根

for (i=0;i&lt;xmlroot.length;i++)
{
//简单的dom,生成表格。
tr = table.insertrow(-1);
td = tr.insertcell(-1);
td.align = "center";
td.innerhtml = ‘&lt;span&gt;’+xmlroot[i].getattribute(’id’)+’&lt;/span&gt;’;
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 &gt;1)
{
prepage = page*1-1;
var changpage = "&lt;a href=’javascript:showpage("+ prepage +")’&gt;上一页&lt;/a&gt; ";
}
else
{
changpage = "上一页 ";
}
if (page &lt;3)
{
nextpage = page*1+1;
changpage += "&lt;a href=’javascript:showpage("+ nextpage +")’&gt;下一页&lt;/a&gt; ";
}
else{
changpage += "下一页 ";
}
document.getelementbyid("changpage").innerhtml = changpage;
}
}

关于ajax 入门学习可以有翻一下我以前的日志,我推荐过两篇不错的文章

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>