📄 ajax 和 xml 将 ajax 用于多媒体.htm
字号:
<TD bgColor=#eeeeee>
<P>请访问 <A
href="http://www.ibm.com/developerworks/cn/ajax/">Ajax
技术资源中心</A>，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki
和新闻。任何 Ajax 的新信息都能在这里找到。
<TABLE cellSpacing=0 cellPadding=0 width="80%"
border=0><TBODY>
<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=middle>
<TD colSpan=2><IMG alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif" width=5
border=0> </TD>
<TD width=21><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"><IMG
height=16 alt=RSS
src="Ajax 和 XML 将 Ajax 用于多媒体.files/feed.gif"
width=16 border=0> </A></TD>
<TD><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> </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>媒体分享正在改变世界，而且从技术的观点来说，这并不难做到。本文介绍如何在 Web 视频托管应用程序上增加一个 Ajax 前端。
</P>
<P><A name=N100DE><SPAN class=atitle>简单的视频选择</SPAN></A></P>
<P>首先来看网站，网站上有一个电影列表可供选择 — 一个不用改变页面就能选择不同电影的网站。页面代码如 <A
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/index.html#list1">清单
1</A> 所示。 </P><BR><A name=list1><B>清单 1. index.html</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<div id="movieHost">
</div>
<div id="movieList">
</div>
<script>
function setMovie( url )
{
$('movieHost').innerHTML = '';
var elEmbed = document.createElement( 'embed' );
elEmbed.src = url;
$('movieHost').appendChild( elEmbed );
}
new Ajax.Request( 'movies.xml', {
method: 'get',
onSuccess: function( transport ) {
var movieTags = transport.responseXML.getElementsByTagName( 'movie' );
$('movieList').innerHTML = '';
var bFirst = true;
for( var b = 0; b < movieTags.length; b++ ) {
var url = movieTags[b].getAttribute('url');
var title = movieTags[b].getAttribute('title');
if ( bFirst )
{
setMovie( url );
bFirst = false;
}
var html = '<a href="javascript:void setMovie(\''+url+'\');">';
html += title+'</a><br/>';
$('movieList').innerHTML += html;
}
}
} );
</script>
</body>
</html>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>该页面使用 Prototype.js 这个很棒的 JavaScript 库向 movies.xml 数据源发送 Ajax
请求。返回数据后通过 <CODE>getElementsByTagName()</CODE>
方法查找所有电影标签。对每个电影标签，代码检索 URL
和标题。如果检索的标签是列表中的第一部电影，脚本立即开始放映这部电影。否则添加一个 anchor 标签作为
<CODE>movieList <div></CODE> 的电影选择器。 </P>
<P>电影选择器 anchor 调用 <CODE>setMovie()</CODE> 函数打开指定的电影。播放电影的方法很简单，首先将
<CODE>movieHost <div></CODE> 标签置空，即删除原来的电影。然后将内容设置为
<CODE><embed></CODE> 标签，其 URL 由电影列表指定。 </P>
<P><CODE><embed></CODE>
标签是在页面中播放电影最简单的方法，但是存在跨浏览器的问题。另一种办法是同时使用 <CODE><object></CODE>
和 <CODE><embed></CODE> 标签（还有一种办法，即使用 Macromedia Flash
Player：<A
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/index.html#flashmedia">本文稍后</A>
再讨论）。 </P>
<P>这个简单的例子中，movies.xml 只是一个平面文件，包含一些我自己的家庭短片的引用。该文件如 <A
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/index.html#list2">清单
2</A> 所示。 </P><BR><A name=list2><B>清单 2. movies.xml</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<movies>
<movie url="spider.mov" title="Spider" />
<movie url="swing.mov" title="Swing Set" />
<movie url="water.mov" title="Water Splash" />
</movies>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>打开该页面时，显示的结果如 <A
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/index.html#fig1">图
1</A> 所示。</P><BR><A name=fig1><B>图 1. 简单的电影列表页面</B></A><BR><IMG
height=276 alt=简单的电影列表页面
src="Ajax 和 XML 将 Ajax 用于多媒体.files/index_400_304.jpg" width=377>
<BR>
<P>最上方是一部由 <CODE><embed></CODE>
标签播放的电影，下面是其他影片列表。点击其中的任何链接，正在播放的电影就变成所选择的电影。 </P>
<P>显然，这个系统不适合大型的视频资料库，还需要对影片列表进行某种搜索。 </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=N10153><SPAN class=atitle>可搜索的电影列表</SPAN></A></P>
<P>要添加搜索功能，必须添加一个搜索框，如 <A
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/index.html#list3">清单
3</A> 所示。其中增加了搜索输入字段 <CODE>q</CODE>。 </P><BR><A name=list3><B>清单 3.
添加搜索功能</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<table><tr><td valign="top">
<input type="text" id="q" onkeyup="search()">
<div id="movieList">
</div>
</td><td valign="top">
<div id="movieHost">
</div>
</td>
</tr></table>
<script>
function setMovie( url )
{
$('movieHost').innerHTML = '';
var elEmbed = document.createElement( 'embed' );
elEmbed.src = url;
$('movieHost').appendChild( elEmbed );
}
function search()
{
new Ajax.Request( 'search.php?q='+escape($('q').value), {
method: 'get',
onSuccess: function( transport ) {
var movieTags = transport.responseXML.getElementsByTagName( 'movie' );
$('movieList').innerHTML = '';
var bFirst = true;
for( var b = 0; b < movieTags.length; b++ ) {
var url = movieTags[b].getAttribute('url');
var title = movieTags[b].getAttribute('title');
if ( bFirst )
{
setMovie( url );
bFirst = false;
}
var html = '<a href="javascript:void setMovie(\''+url+'\');">';
html += title+'</a><br/>';
$('movieList').innerHTML += html;
}
}
} );
}
</script>
</body>
</html>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>在 key-up 事件中指定 <CODE>search()</CODE> 方法将被调用。<CODE>search()</CODE>
方法和 <CODE>Ajax.Request</CODE> 调用类似，除了向 search.php
页面传递查询字符串。search.php 脚本返回和原来相同的 XML 格式，因此不需要修改 XML 解析的代码。 </P>
<P>我承认对于自己的习惯来说，key-up 上的 <CODE>search()</CODE>
函数反映有点太快。理想情况下，系统应该在执行搜索之前等待一秒左右以便输入完整的搜索文本，避免列表不停地闪烁。使用
<CODE>window.setTimeout()</CODE> 方法很容易实现这种行为。 </P>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -