Flash & Ajax 操作 XML 實(shí)例:無刷新分頁
更新時(shí)間:2006年08月02日 00:00:00 作者:
其實(shí)標(biāo)題只是一個(gè)噱頭罷了,只是想談一下,Javascript 與 Actionscript 是如何操作XML的。
希望能幫助一些只用 Javascript 或 只懂 Actionscript 的朋友,了解兩者的相同與不同之處。
Flash 與 后臺連接有許多種,Actionscript 調(diào)用 XML() 算是比較簡單的一種了,
而Javascript 調(diào)用 xmlHttp ,便形成了現(xiàn)在很流行的Ajax了。
現(xiàn)在就用一個(gè)網(wǎng)上常出現(xiàn)的分頁效果來對 Flash 和 Ajax 做個(gè)入門學(xué)習(xí)。
效果預(yù)覽
源文件下截
source.rar
實(shí)際運(yùn)用中一般是通過后臺腳本生成XML文件,再對其產(chǎn)生的數(shù)據(jù)進(jìn)行操作
由于篇幅關(guān)系在本文中將用1.xml 2.xml 3.xml代替。后臺腳本不做說明
首先了解一個(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>
從簡單的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; //獲取當(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的對象有一點(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ù)名,注意的是不要加括號
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–) //要刪除原來有的行,不然表格會無限延伸
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;
}
}
希望能幫助一些只用 Javascript 或 只懂 Actionscript 的朋友,了解兩者的相同與不同之處。
Flash 與 后臺連接有許多種,Actionscript 調(diào)用 XML() 算是比較簡單的一種了,
而Javascript 調(diào)用 xmlHttp ,便形成了現(xiàn)在很流行的Ajax了。
現(xiàn)在就用一個(gè)網(wǎng)上常出現(xiàn)的分頁效果來對 Flash 和 Ajax 做個(gè)入門學(xué)習(xí)。
效果預(yù)覽
源文件下截

實(shí)際運(yùn)用中一般是通過后臺腳本生成XML文件,再對其產(chǎn)生的數(shù)據(jù)進(jìn)行操作
由于篇幅關(guān)系在本文中將用1.xml 2.xml 3.xml代替。后臺腳本不做說明
首先了解一個(gè)XML的結(jié)構(gòu):
復(fù)制代碼 代碼如下:
<data>
<movie id="1" type="愛情">幸福終點(diǎn)站</movie>
<movie id="2" type="恐怖">絕命終結(jié)站</movie>
<movie id="3" type="喜劇">恐怖電影</movie>
…
….
</data>
從簡單的Flash開始吧
復(fù)制代碼 代碼如下:
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; //獲取當(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ò)的文章
復(fù)制代碼 代碼如下:
var xmlHttp
/*
第一部分是有關(guān)xmlHttp的申明,因?yàn)镮E和其它一些瀏覽生成xmlHttp的對象有一點(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ù)名,注意的是不要加括號
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–) //要刪除原來有的行,不然表格會無限延伸
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無刷新分頁,支持id定位
- jquery 插件 web2.0分格的分頁腳本,可用于ajax無刷新分頁
- AspNetAjaxPager,Asp.Net通用無刷新Ajax分頁控件,支持多樣式多數(shù)據(jù)綁定
- JS+Ajax+Jquery實(shí)現(xiàn)頁面無刷新分頁以及分組 超強(qiáng)的實(shí)現(xiàn)
- ajax實(shí)現(xiàn)無刷新分頁(php)
- jQuery Pagination Ajax分頁插件(分頁切換時(shí)無刷新與延遲)中文翻譯版
- JQuery+Ajax無刷新分頁的實(shí)例代碼
- php+ajax實(shí)現(xiàn)無刷新分頁的方法
- asp.net使用AJAX實(shí)現(xiàn)無刷新分頁
- 實(shí)例代碼講解ajax實(shí)現(xiàn)的無刷新分頁
相關(guān)文章
ajax+springmvc實(shí)現(xiàn)C與View之間的數(shù)據(jù)交流方法
下面小編就為大家?guī)硪黄猘jax+springmvc實(shí)現(xiàn)C與View之間的數(shù)據(jù)交流方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03ajax請求后臺得到j(luò)son數(shù)據(jù)后動態(tài)生成樹形下拉框的方法
今天小編就為大家分享一篇ajax請求后臺得到j(luò)son數(shù)據(jù)后動態(tài)生成樹形下拉框的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08ajax JSONP請求處理回調(diào)函數(shù)jsonpCallback區(qū)分大小寫
使用ajax進(jìn)行 JSONP跨域請求,因?yàn)楸徽埱蟮膶Ψ降幕卣{(diào)函數(shù)名稱是無法修改,想到設(shè)置AJAX 的JSONP參數(shù)。但是發(fā)現(xiàn)根本不起作用。最后偶然發(fā)現(xiàn) jsonpcallback是區(qū)分大小寫的2013-09-09使用getJSON()異步請求服務(wù)器返回json格式數(shù)據(jù)的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄褂胓etJSON()異步請求服務(wù)器返回json格式數(shù)據(jù)的實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06利用AJAX實(shí)現(xiàn)無刷新數(shù)據(jù)分頁
這篇文章主要介紹了利用AJAX實(shí)現(xiàn)數(shù)據(jù)分頁的相關(guān)資料,如何利用AJAX無刷新直接從服務(wù)器獲取數(shù)據(jù)分頁,感興趣的小伙伴們可以參考一下2016-04-04AJax實(shí)現(xiàn)類似百度搜索欄的功能 (面試多見)
下面是ajax實(shí)現(xiàn)一個(gè)簡單的百度搜索欄的功能,當(dāng)用戶在上面的輸入框中鍵入字符時(shí),會執(zhí)行函數(shù) "showHint()" 。下文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2016-11-11關(guān)于Ajax技術(shù)原理的3點(diǎn)總結(jié)
這篇文章主要介紹了關(guān)于Ajax技術(shù)原理的3點(diǎn)總結(jié),需要的朋友可以參考下2014-12-12