源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-12-22 21:35 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Flash & Ajax 操作 XML 实例:无刷新分页
其实标题只是一个噱头罢了,只是想谈一下,Javascript 与 Actionscript 是如何操作XML的。 希望能帮助一些只用 Javascript  或 只懂 Actionscript 的朋友,了解两者的相同与不同之处。 Flash 与 后台连接有许多种,Actionscript 调用 XML() 算是比较简单的一种了, 而Javascript 调用 xmlHttp ,便形成了现在很流行的Ajax了。 现在就用一个网上常出现的分页效果来对 Flash 和 Ajax 做个入门学习。 [url=http://www.flaspx.com/weblog/tutorial/ajaxflashxml/] 效果预览[/url] 源文件下截 [img]http://www2.flash8.net/x/webx/Images/file/rar.gif[/img] [url=http://www2.flash8.net/UploadTeach/2006/03/20/2006320113521134.rar]source.rar[/url] 实际运用中一般是通过后台脚本生成XML文件,再对其产生的数据进行操作 由于篇幅关系在本文中将用1.xml 2.xml 3.xml代替。后台脚本不做说明 首先了解一个XML的结构:
[u]复制代码[/u] 代码如下:
<data>     <movie id="1" type="爱情">幸福终点站</movie>     <movie id="2" type="恐怖">绝命终结站</movie>     <movie id="3" type="喜剧">恐怖电影</movie>     …     ….   </data>
从简单的Flash开始吧
[u]复制代码[/u] 代码如下:
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<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 入门学习可以有翻一下我以前的日志,我推荐过两篇不错的文章
[u]复制代码[/u] 代码如下:
var xmlHttp   /*   第一部分是有关xmlHttp的申明,因为IE和其它一些浏览生成xmlHttp的对象有一点两样,所以申明时比较麻烦   其它主要功能相当于Flash方式中的 "new XML()" 当然还包函其它功能    */   function GetXmlHttpObject(handler)   {      var objXmlHttp=null;      if (navigator.userAgent.indexOf("MSIE")>=0)     {        var strName="Msxml2.XMLHTTP";       if (navigator.appVersion.indexOf("MSIE 5.5")>=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 >= 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 = ‘<span class="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;         var changpage = "<a href='javascript:showpage("+ prepage +")'>上一页</a> ";       }       else       {         changpage = "上一页 ";       }       if (page <3)       {         nextpage = page*1+1;         changpage += "<a href='javascript:showpage("+ nextpage +")'>下一页</a> ";       }       else{         changpage += "下一页 ";       }       document.getElementById("changpage").innerHTML = changpage;     }   }
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部