原文: http://www.flaspx.com/weblog/blog.php?bid=6
效果预览: http://www.flaspx.com/weblog/tutorial/ajaxflashxml/
其实标题只是一个噱头罢了,只是想谈一下,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.onsubmit = function(success)
  {
    if (success)
      {
      parseXml(pageXml);  //如果读取成功,分析XML文件
    }
  }
}
function parseXml(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 入门学习可以有翻一下我以前的日志,我推荐过两篇不错的文章
代码: [ 复制到剪贴板 ]
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)
    {
      about:(/"Error. scripting for ActiveX might be disabled/");
      return;
    }
  }
  else
  {
    objXmlHttp=new XMLHttpRequest();  //Firefox、Opera等都是用这种
    objXmlHttp.οnsubmit=handler;
    objXmlHttp.οnerrοr=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    {
      //简单的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;
  }
}