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

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

其实标题只是一个噱头罢了，只是想谈一下，Javascript 与 Actionscript 是如何操作XML的。
希望能帮助一些只用 Javascript   或 只懂 Actionscript 的朋友，了解两者的相同与不同之处。
Flash 与 后台连接有许多种，Actionscript 调用 XML() 算是比较简单的一种了，
而Javascript 调用 xmlHttp ，便形成了现在很流行的Ajax了。
现在就用一个网上常出现的分页效果来对 Flash 和 Ajax 做个入门学习。  
实际运用中一般是通过后台脚本生成XML文件，再对其产生的数据进行操作
由于篇幅关系在本文中将用1.xml 2.xml 3.xml代替。后台脚本不做说明
首先了解一个XML的结构：
CODE:
<data>
   <movie id="1" type="爱情">幸福终点站</movie>
   <movie id="2" type="恐怖">绝命终结站</movie>
   <movie id="3" type="喜剧">恐怖电影</movie>
   …
   ….
</data>
从简单的Flash开始吧
CODE:
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了

CODE:

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;
   }
}