怎么用Flash和Ajax實(shí)現(xiàn)無刷新分頁功能

這篇文章主要講解了“怎么用Flash和Ajax實(shí)現(xiàn)無刷新分頁功能”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用Flash和Ajax實(shí)現(xiàn)無刷新分頁功能”吧！

實(shí)際運(yùn)用中一般是通過后臺(tái)腳本生成XML文件，再對(duì)其產(chǎn)生的數(shù)據(jù)進(jìn)行操作
由于篇幅關(guān)系在本文中將用1.xml 2.xml 3.xml代替。后臺(tái)腳本不做說明
首先了解一個(gè)XML的結(jié)構(gòu)：

代碼如下:

<data>  
  <movie id="1" type="愛情">幸福終點(diǎn)站</movie>  
  <movie id="2" type="恐怖">絕命終結(jié)站</movie>  
  <movie id="3" type="喜劇">恐怖電影</movie>  
  …  
  ….  
</data>

從簡(jiǎn)單的Flash開始吧

代碼如下:

function setxml(page){  
  pageXml = new XML();                                         //申明XML對(duì)象  
  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;                      //獲取當(dāng)前頁  
  }  
}  
if (!page)                                                         //初始頁碼為第一頁 page=1;  
  setxml(page);                                                    //初始第一頁內(nèi)容  
presetxmlbtn.onRelease = function()  
{  
  setxml(page*1-1);                                                //向前翻頁,讀取內(nèi)容  
}            
nextbtn.onRelease = function()  
{  
  setxml(page*1+1);                                                //向后翻頁,讀取內(nèi)容  
} 

接下來是Ajax了
關(guān)于Ajax 入門學(xué)習(xí)可以有翻一下我以前的日志，我推薦過兩篇不錯(cuò)的文章

代碼如下:

var xmlHttp  
/*  
第一部分是有關(guān)xmlHttp的申明,因?yàn)镮E和其它一些瀏覽生成xmlHttp的對(duì)象有一點(diǎn)兩樣,所以申明時(shí)比較麻煩  
其它主要功能相當(dāng)于Flash方式中的 "new XML()" 當(dāng)然還包函其它功能   
*/  
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;  
  }  
}  
//首先要被調(diào)用的函數(shù)，可看作上面Flash中的 setxml()函數(shù)，  
function showpage(no)  
{  
  document.getElementById("loadstatus").innerHTML = "Lading…";  
  var url = no+".xml?rid="+Math.random();  
  //stateChanged_showplist是下面的函數(shù)名，注意的是不要加括號(hào)  
  xmlHttp=GetXmlHttpObject(stateChanged_showplist);  
  //傳遞方式是GET，也可以選擇POST方式，有時(shí)傳遞變量是中文要記得設(shè)置文件頭                     
  xmlHttp.open("GET", url , true);  
  xmlHttp.send(null);  
}  
//分析XML函數(shù)  
function stateChanged_showplist()  
{  
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") //xmlHttp.readyState==4  4表示讀取結(jié)束  
  {  
    document.getElementById("loadstatus").innerHTML = " ";  
    table = document.getElementById("pagebody");               //生成TALBE Element  
    for (i = table.rows.length-1; i >= 0; i–)                 //要?jiǎng)h除原來有的行，不然表格會(huì)無限延伸  
      table.deleteRow(i);  
    xmlroot = xmlHttp.responseXML.getElementsByTagName("movie");  //取得XML所需要的根  

    for (i=0;i<xmlroot.length;i++)  
    {  
      //簡(jiǎn)單的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;  
  }  
}

感謝各位的閱讀，以上就是“怎么用Flash和Ajax實(shí)現(xiàn)無刷新分頁功能”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么用Flash和Ajax實(shí)現(xiàn)無刷新分頁功能這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！