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–) //要刪除原來有的行，不然表格會無限延伸
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;
}
}
