手机
当前位置:查字典教程网 >编程开发 >AJAX相关 >Flash & Ajax 操作 XML 实例:无刷新分页
Flash & Ajax 操作 XML 实例:无刷新分页
摘要:其实标题只是一个噱头罢了,只是想谈一下,Javascript与Actionscript是如何操作XML的。希望能帮助一些只用Javascri...

其实标题只是一个噱头罢了,只是想谈一下,Javascript与Actionscript是如何操作XML的。

希望能帮助一些只用Javascript或只懂Actionscript的朋友,了解两者的相同与不同之处。

Flash与后台连接有许多种,Actionscript调用XML()算是比较简单的一种了,

而Javascript调用xmlHttp,便形成了现在很流行的Ajax了。

现在就用一个网上常出现的分页效果来对Flash和Ajax做个入门学习。

效果预览

源文件下截

source.rar

实际运用中一般是通过后台脚本生成XML文件,再对其产生的数据进行操作

由于篇幅关系在本文中将用1.xml2.xml3.xml代替。后台脚本不做说明

首先了解一个XML的结构:

复制代码 代码如下:

<data>

<movieid="1"type="爱情">幸福终点站</movie>

<movieid="2"type="恐怖">绝命终结站</movie>

<movieid="3"type="喜剧">恐怖电影</movie>

….

</data>

从简单的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<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了

关于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<xmlroot.length;i++)

{

//简单的DOM,生成表格。

tr=table.insertRow(-1);

td=tr.insertCell(-1);

td.align="center";

td.innerHTML=‘<spanclass="warntxt">'+xmlroot[i].getAttribute('id')+'</span>';

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="<ahref='javascript:showpage("+prepage+")'>上一页</a>";

}

else

{

changpage="上一页";

}

if(page<3)

{

nextpage=page*1+1;

changpage+="<ahref='javascript:showpage("+nextpage+")'>下一页</a>";

}

else{

changpage+="下一页";

}

document.getElementById("changpage").innerHTML=changpage;

}

}

【Flash & Ajax 操作 XML 实例:无刷新分页】相关文章:

基于ajax实现无刷新分页的方法

浅谈Ajax技术实现页面无刷新

用AJAX实现的无刷新的分页实现代码(asp.net)

asp.net jquery+ajax异步刷新实现示例

Ajax+smarty技术实现无刷新分页

ASP+Ajax实现无刷新评论简单例子

分页技术原理与实现之无刷新的Ajax分页技术(三)

Ajax无刷新Url提交页面

pushState实现Ajax无刷新页面切换

Ajax核心XMLHTTP组件资料第1/2页

精品推荐
分类导航