您的位置：首页 > 其它

AJAX示例

2006-06-04 13:06 190 查看

原文： http://www.flaspx.com/weblog/blog.php?bid=6
效果预览： http://www.flaspx.com/weblog/tutorial/ajaxflashxml/
其实标题只是一个噱头罢了，只是想谈一下，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.onsubmit = function(success)
{
if (success)
{
parseXml(pageXml); //如果读取成功,分析XML文件
}
}
}
function parseXml(pageXml){
xmlroot = ageXml.firstChild; //定义XML根目录
for (i=0;i

接下来是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)
{
about:(\"Error. scripting for ActiveX might be disabled\");
return;
}
}
else
{
objXmlHttp=new XMLHttpRequest(); //Firefox、Opera等都是用这种
objXmlHttp.onsubmit=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;ispan 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;
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航