📄 ajax 和 xml 将 ajax 用于多媒体.htm
字号:
alt=del.icio.us
src="Ajax 和 XML 将 Ajax 用于多媒体.files/delicious.small.gif"
width=10 border=0> </A></TD>
<TD><A
onclick="window.open('http://del.icio.us/post?v=4&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=700,height=400'); return false;"
href="http://del.icio.us/post">发布到 del.icio.us</A>
</TD></TR>
<TR>
<TD colSpan=2><IMG height=5 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif" width=1
border=0> </TD></TR>
<TR vAlign=top align=left>
<TD width=21><A
href="javascript:location.href='http://slashdot.org/bookmark.pl?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)"><IMG
height=16 alt=Slashdot
src="Ajax 和 XML 将 Ajax 用于多媒体.files/slashdot-favicon.gif"
width=16 border=0> </A></TD>
<TD><A
href="javascript:location.href='http://slashdot.org/bookmark.pl?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)">提交到
Slashdot！</A> </TD></TR>
<TR>
<TD colSpan=2><IMG height=5 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif" width=1
border=0>
</TD></TR></TBODY></TABLE></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<P>上述代码需要用到 Prototype.js JavaScript 库。利用 <CODE>Ajax.Request</CODE>
对象获得要显示的图片列表。然后解析返回的 XML 代码，获得图片的 URL、宽、高和标题。然后调用
<CODE>showSlide()</CODE> 函数得到幻灯片显示效果。设置的计时器每五秒切换到下一张幻灯片。 </P>
<P>幻灯片放映通过包含当前图片的 <CODE><image></CODE> 标签和标题
<CODE><div></CODE>
标签实现。所谓放映只不过是隐藏当前的图片和标题，将图片来源和标题文本设置为新幻灯片的内容并显示。如果需要某种淡入淡出效果，建议使用
Scriptaculous 库中的 <CODE>Effects</CODE> 类，它是构建在 Prototype.js 上的。 </P>
<P><A
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/index.html#list6">清单
6</A> 显示了数据图像文件。</P><BR><A name=list6><B>清单 6.
images.xml</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<images>
<image src="images/megan1_875_700.jpg" title="Megan" width="875" height="700" />
<image src="images/oso1_875_700.jpg" title="Oso 1" width="875" height="700" />
<image src="images/oso2_873_700.jpg" title="Oso 2" width="873" height="700" />
</images>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>这里虽然使用了硬编码，但使用 PHP 脚本很容易生成 XML 代码。幻灯片放映如 <A
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/index.html#fig4">图
4</A> 所示。 </P><BR><A name=fig4><B>图 4. 简单的幻灯片放映</B></A><BR><IMG
height=320 alt=简单的幻灯片放映
src="Ajax 和 XML 将 Ajax 用于多媒体.files/slideshow_400_333.jpg" width=388>
<BR>
<P><B>注意：</B>我以前介绍过一个更加精细的幻灯片放映版本（要获得相关链接，参见<A
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/index.html#resources">参考资料</A>）。现在这个版本的区别在于使用了
Prototype.js 库，各幻灯片之间的切换更简单。 </P><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG height=1 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/blue_rule.gif"
width="100%"><BR><IMG height=6 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif" width=8
border=0></TD></TR></TBODY></TABLE>
<TABLE class=no-print cellSpacing=0 cellPadding=0 align=right>
<TBODY>
<TR align=right>
<TD><IMG height=4 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif" width="100%"><BR>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=center><IMG height=16 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/u_bold.gif" width=16
border=0><BR></TD>
<TD vAlign=top align=right><A class=fbox
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/index.html#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
<P><A name=N10314><SPAN class=atitle>结束语</SPAN></A></P>
<P>像 Flikr 和 YouTube 之类的网站仅仅显示了 Web
上的多媒体应用的巨大潜能的冰山一角。本文介绍了一些非常简便的视频和图片浏览的实现，可用于您自己的项目。如果有效，请参加
developerWorks Ajax 论坛（参见 <A
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/index.html#resources">参考资料</A>）告诉我您取得的成功。
</P><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG height=1 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/blue_rule.gif"
width="100%"><BR><IMG height=6 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif" width=8
border=0></TD></TR></TBODY></TABLE>
<TABLE class=no-print cellSpacing=0 cellPadding=0 align=right>
<TBODY>
<TR align=right>
<TD><IMG height=4 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif" width="100%"><BR>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=center><IMG height=16 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/u_bold.gif" width=16
border=0><BR></TD>
<TD vAlign=top align=right><A class=fbox
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/index.html#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
<P><SPAN class=atitle><A name=download>下载</A></SPAN></P>
<TABLE class=data-table-1 cellSpacing=0 cellPadding=0 width="100%"
border=0>
<TBODY>
<TR>
<TH scope=col>描述</TH>
<TH scope=col>名字</TH>
<TH scope=col>大小</TH>
<TH scope=col>下载方法</TH></TR>
<TR>
<TH class=tb-row scope=row>Sample code</TH>
<TD noWrap>x-ajaxxml7-media.zip</TD>
<TD noWrap>1090KB</TD>
<TD noWrap><A class=fbox
href="http://download.boulder.ibm.com/ibmdl/pub/software/dw/xml/x-ajaxxml7-media.zip"><B>HTTP</B></A></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR vAlign=top>
<TD colSpan=5><IMG height=12 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif" width=12
border=0></TD></TR>
<TR>
<TD><IMG height=16 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/fw.gif" width=16></TD>
<TD><A class=fbox
href="http://www.ibm.com/developerworks/cn/whichmethod.html">关于下载方法的信息</A></TD>
<TD><IMG height=1 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif"
width=50></TD></TR></TBODY></TABLE><BR><BR>
<P><A name=resources><SPAN class=atitle>参考资料
</SPAN></A></P><B>学习</B><BR>
<UL>
<LI>您可以参阅本文在 developerWorks 全球网站上的 <A
onmouseover=linkQueryAppend(this)
href="http://www.ibm.com/developerworks/library/x-ajaxxml7/"
target=_blank>英文原文</A>。<BR><BR>
<LI><A href="http://www.ibm.com/developerworks/cn/ajax/">Ajax
技术资源中心</A>：developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。 <BR><BR>
<LI><A
href="http://www.ibm.com/developerworks/cn/views/rss/customrssatom.jsp?zone_by=Web+services&zone_by=Java+technology&zone_by=XML&zone_by=Open+source&zone_by=WebSphere&zone_by=Web+architecture&type_by=Articles&type_by=Tutorials&search_by=Ajax&day=1&month=01&year=2005&max_entries=20&feed_by=rss&isGUI=true">订阅
Ajax 相关文章和教程 的 RSS 提要</A>：获得即将发表的 Ajax 相关文章和教程的通知（查看 <A
href="http://www.ibm.com/developerworks/cn/rss/">developerWorks 内容
RSS 提要</A> 了解更多的信息）。 <BR><BR>
<LI><A href="http://php.net/">PHP 主页</A>：访问这个有关 PHP
程序员的宝贵资源。<BR><BR>
<LI><A href="http://www.prototypejs.org/">Prototype 库</A>：这个
JavaScript Framework 可简化动态 Web 应用程序的开发。<BR><BR>
<LI><A href="http://script.aculo.us/">Scriptaculous JavaScript
库</A>：这个基于 Prototype 的框架提供了显示帮助程序和效果。<BR><BR>
<LI><A href="http://www.prototypedoc.com/">Prototype.js
文档页面</A>：获得关于 Prototype JavaScript 库的其他信息，包括官方 Prototype blog
和其他参考资料的链接。<BR><BR>
<LI><A href="http://jquery.com/">jQuery</A>：这种 JavaScript 库提供了跟
Prototype.js 类似的功能。<BR><BR>
<LI><A href="http://developer.yahoo.com/yui/">Yahoo! User
Interface Library</A>：查阅 Yahoo! 的 Ajax 工具箱。<BR><BR>
<LI><A
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxslideshow/">使用
DHTML 与 XML 制作 Ajax 幻灯片 </A>（Jack Herrington，developerWorks，2007 年
3 月）：一种构建在 Ajax 上的更精致的幻灯片放映程序。<BR><BR>
<LI><A
href="http://ffmpeg.mplayerhq.hu/">FFmpeg</A>：这种视频工具可以转换视频格式和抓取单独的画面并存为
JPG 文件。<BR><BR>
<LI><A onmouseover=linkQueryAppend(this)
href="http://www.ibm.com/certify/certs/xmsdreltop.shtml">IBM XML
认证</A>：了解如何才能成为一名 IBM 认证的 XML 及相关技术的开发人员。<BR><BR>
<LI><A
href="http://www.ibm.com/developerworks/cn/xml/library/technical/xml.html">XML
技术文档库</A>：developerWorks XML 专区提供了大量技术文章和技巧、教程、标准以及 IBM
红皮书。<BR><BR>
<LI><A
href="http://www.ibm.com/developerworks/cn/offers/techbriefings/">developerWorks
技术活动和网络广播</A>：随时关注技术的最新进展。<BR><BR>
<LI><A
href="http://www.ibm.com/developerworks/cn/xml">developerWorks
中国网站 XML 专区</A>：通过 developerWorks XML 专区了解
XML。<BR><BR></LI></UL><BR><B>讨论</B><BR>
<UL>
<LI><A
href="http://www.ibm.com/developerworks/forums/dw_forum.jsp?forum=965&cat=11">参与论坛讨论</A>。<BR><BR>
<LI><A
href="http://www.ibm.com/developerworks/forums/dw_xforums.jsp">XML
专区讨论论坛</A>：参与几个以 XML 为中心的论坛。<BR><BR>
<LI><A
href="http://www.ibm.com/developerworks/forums/dw_forum.jsp?forum=1080&cat=11">developerWorks
XML 专区：分享您的想法</A>：阅读本文后在这个论坛上发布您的评论和想法。XML
专区编辑负责该论坛，欢迎您的参加。</LI></UL><BR><BR>
<P><A name=author><SPAN class=atitle>关于作者</SPAN></A></P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD colSpan=3><IMG height=5 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif" width="100%"></TD></TR>
<TR vAlign=top align=left>
<TD>
<P></P></TD>
<TD><IMG height=5 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif" width=4></TD>
<TD width="100%">
<P>Jack D. Herrington 是一位有着超过 20 年经验的高级软件工程师。他是 <I>Code
Generation in Action</I>、<I>Podcasting Hacks</I> 和 <I>PHP
Hacks</I> 这三本书的作者。他还撰写了 30 多篇文章。可以通过 <A
href="mailto:jherr@pobox.com?cc=dwxed@us.ibm.com">mailto:jherr@pobox.com?cc=dwxed@us.ibm.com</A>
与 Jack 联系。</P></TD></TR></TBODY></TABLE><BR><BR><BR>
<P class=no-print><SPAN class=atitle><A
name=rate>对本文的评价</A></SPAN></P><SPAN class=no-print>
<TABLE cellSpacing=0 cellPad⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -