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

所属分类: 网络编程 / AJAX相关 阅读数: 1913
收藏 0 赞 0 分享
其实标题只是一个噱头罢了,只是想谈一下,Javascript 与 Actionscript 是如何操作XML的。
希望能帮助一些只用 Javascript  或 只懂 Actionscript 的朋友,了解两者的相同与不同之处。
Flash 与 后台连接有许多种,Actionscript 调用 XML() 算是比较简单的一种了,
而Javascript 调用 xmlHttp ,便形成了现在很流行的Ajax了。
现在就用一个网上常出现的分页效果来对 Flash 和 Ajax 做个入门学习。
 效果预览
源文件下截
source.rar
实际运用中一般是通过后台脚本生成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–)                 //要删除原来有的行,不然表格会无限延伸  
      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;  
  }  
}
更多精彩内容其他人还在看

PHP+AJAX无刷新实现返回天气预报数据

天气数据是通过采集中国气象网站的。本来中国天气网站也给出了数据的API接口,接下来为大家介绍下用php来写一个天气预报的模块,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

jQuery的ajax传参巧用JSON使用示例(附Json插件)

jQuery的ajax调用很方便,传参的时候喜欢用Json的数据格式,使用示例代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

ajax jquery 异步表单验证示例代码

异步表单验证想必大家早已如雷贯耳,本文为大家详细讲述下ajax jquery实现异步表单验证,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

AJAX如何接收JSON数据示例介绍

如何使用AJAX返回JSON数据,就是dataType,当你设置json后返回的json字符串传递到客户端就是JSON对象了,示例如下,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

ajax局部刷新一个div下jsp内容的方法

局部刷新某个div下的jsp可以通过setInterval或者是setTimeout来轻松实现,具体如下,有此需求的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

ajax交互Struts2的action(客户端/服务器端)

本文为大家探讨下ajax交互Struts2的action并有客户端及服务器端代码,感兴趣的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

Ajax工作原理深入理解

ajax是异步的意思,它有别于传统web开发中采用的同步的方式。异步传输是面向字符的传输,它的单位是字符;而同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的
收藏 0 赞 0 分享

Ajax方式删除表格一行数据示例代码

Ajax方式删除信息在某些情况下还是蛮实用的,下面为大家具体介绍下Ajax方式如何删除表格一行数据,感兴趣的朋友可以了解下
收藏 0 赞 0 分享

Ajax叠加(Ajax返回数据用Ajax发出)示例代码

把参数用Ajax发送到数据库进行查询然后用Ajax将数据发送到数据库签到表,于是有了下面的代码,感兴趣的朋友可以了解下,希望对大家学习ajax有所帮助
收藏 0 赞 0 分享

Ajax长连接项目案例

所谓的长连接,就是不断去发送请求,把请求阻塞在服务器端,每次超过请求时间就去重新发送请求,下面以一个实例为大家详细介绍下,感兴趣的朋友可不要错过了哈
收藏 0 赞 0 分享
查看更多