快精灵印艺坊 您身边的文印专家
广州名片 深圳名片 会员卡 贵宾卡 印刷 设计教程
产品展示 在线订购 会员中心 产品模板 设计指南 在线编辑
 首页 名片设计   CorelDRAW   Illustrator   AuotoCAD   Painter   其他软件   Photoshop   Fireworks   Flash  

 » 彩色名片
 » PVC卡
 » 彩色磁性卡
 » 彩页/画册
 » 个性印务
 » 彩色不干胶
 » 明信片
   » 明信片
   » 彩色书签
   » 门挂
 » 其他产品与服务
   » 创业锦囊
   » 办公用品
     » 信封、信纸
     » 便签纸、斜面纸砖
     » 无碳复印纸
   » 海报
   » 大篇幅印刷
     » KT板
     » 海报
     » 横幅

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<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 入门学习可以有翻一下我以前的日志,我推荐过两篇不错的文章
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?C)                 //要删除原来有的行,不然表格会无限延伸 
      table.deleteRow(i); 
    xmlroot = xmlHttp.responseXML.getElementsByTagName("movie");  //取得XML所需要的根 
     
    for (i=0;i<xmlroot.length;i++) 
    { 
      //简朴的DOM,生成表格。 
      tr = table.insertRow(-1);  
      td = tr.in

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



返回类别: Flash教程
上一教程: 在Flash中实现Winamp均衡器频谱效果
下一教程: Flash制作卫星围绕地球旋转的运动效果

您可以阅读与"Flash & Ajax 操作 XML 实例:无刷新分页"相关的教程:
· Flash MX 2004实例制作视频教程:太空战记游戏(4)
· Flash MX 2004实例制作视频教程:机器猫动画片头6
· Flash MX 2004实例制作视频教程:五彩苹果(下)
· FlashMX 视频教程(27)-实例6制作叶子
· Flash MX 2004实例制作视频教程:手机浮动广告3
    微笑服务 优质保证 索取样品