没有旅游这一行可是在当今世界上.doc

标题：Ajax 和 XML: 五种常见 Ajax 模式适合什么人群：java开发人员、jsp页面设计人员、Ajax开发人员、Ajax爱好者、深入学习Ajax的人员可以解决什么问题：使用 Ajax 技术播放电影和幻灯片正文：简单的视频选择首先来看网站，网站上有一个电影列表可供选择 一个不用改变页面就能选择不同电影的网站。页面代码如 清单 1 所示。 清单 1. index.html 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 = movieTagsb.getAttribute(url); var title = movieTagsb.getAttribute(title); if ( bFirst ) setMovie( url ); bFirst = false; var html = ; html += title+; $(movieList).innerHTML += html; );该页面使用 Prototype.js 这个很棒的 JavaScript 库向 movies.xml 数据源发送 Ajax 请求。返回数据后通过 getElementsByTagName() 方法查找所有电影标签。对每个电影标签，代码检索 URL 和标题。如果检索的标签是列表中的第一部电影，脚本立即开始放映这部电影。否则添加一个 anchor 标签作为 movieList 的电影选择器。 电影选择器 anchor 调用 setMovie() 函数打开指定的电影。播放电影的方法很简单，首先将 movieHost 标签置空，即删除原来的电影。然后将内容设置为 标签，其 URL 由电影列表指定。 标签是在页面中播放电影最简单的方法，但是存在跨浏览器的问题。另一种办法是同时使用 和 标签。 这个简单的例子中，movies.xml 只是一个平面文件，包含一些我自己的家庭短片的引用。该文件如 清单 2 所示。 清单 2. movies.xml 打开该页面时，显示的结果如 图 1 所示。图 1. 简单的电影列表页面最上方是一部由 标签播放的电影，下面是其他影片列表。点击其中的任何链接，正在播放的电影就变成所选择的电影。 显然，这个系统不适合大型的视频资料库，还需要对影片列表进行某种搜索。 可搜索的电影列表要添加搜索功能，必须添加一个搜索框，如 清单 3 所示。其中增加了搜索输入字段 q。 清单 3. 添加搜索功能 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 = movieTagsb.getAttribute(url); var title = movieTagsb.getAttribute(title); if ( bFirst ) setMovie( url ); bFirst = false; var html = ; html += title+; $(movieList).innerHTML += html; );在 key-up 事件中指定 search() 方法将被调用。search() 方法和 Ajax.Request 调用类似，除了向 search.php 页面传递查询字符串。search.php 脚本返回和原来相同的 XML 格式，因此不需要修改 XML 解析的代码。 我承认对于自己的习惯来说，key-up 上的 search() 函数反映有点太快。理想情况下，系统应该在执行搜索之前等待一秒左右以便输入完整的搜索文本，避免列表不停地闪烁。使用 window.setTimeout() 方法很容易实现这种行为。 清单 4 显示了经过修改的 search.php 脚本。清单 4. search.php $v ) if ( strlen( $_GETq ) 0 & preg_match( /.$_GETq./i, $v ) ) ?movie url= title= /脚本一开始建立了一个数组保存全部电影。为了简化起见，这里对电影进行了硬编码。实际应用的时候这些元素很可能取自电影清单的数据库。 接下来的代码遍历列表，把搜索查询的正则表达式应用于每个电影的标题。如果匹配则输出包含 URL 和名称的 标签。 打开页面并输入 s，将看到 图 2 所示的页面。 图 2. 简单的电影查询页面 如果按下 Delete 建并输入 water，就会看到 图 3 所示的页面。 图 3. 搜索与 “water” 相关的电影的查询页面 虽然本文主要讨论如何使用 Dynamic HTML（DHTML）和 Ajax 建立前端应用程序，但视频共享网站决不是这么简单。 视频分享基础先暂时离开实践问题讨论一些更具理论性的东西，视频共享中更加复杂的问题。涉及到三个主要问题： 如何存储和传输视频 如何处理不同的视频格式 如何从上传文件中获得缩略图和视频信息 视频存储是一个实实在在的问题 特别是对于小应用程序而言视频文件非常大，需要大容量的硬盘空间来存储。将其传递给客户还面临着带宽的挑战。可以自己购买设备安装到托管设施中。或者使用 Amazon S3 这样的服务，只需很低的价格就能上传任何资料（数据库备份、图片、电影等等）到 Amazon 数据中心，以及提供给其他客户。和建立数据中心的大量投资相比可以先考虑一下这些服务。 下一个问题 视频格式 提出了一个有趣的挑战。存在多种视频格式，没有任何一种播放器能支持所有格式。事实上多数播放器只能处理自己挑选的视频格式。为了方便用户，也许最好以某种格式为标准然后将所有传来的视频都转化成这种格式。有一种非常方便的工具，即命令行应用程序 FFmpeg。它不仅能把一种视频格式转化成另一种，还能拾取画面的快照从而为用户提供视频缩略图。 选择何种视频格式作为标准可能很麻烦。目前 Flash 视频具有明显的优势，但是 Windows Media，特别是随着 Microsoft Silverlight（原来的 WPF/Everywhere）的发布，正在赢得越来越多的支持。FFmpeg 几乎能将任何影片格式转化成 Flash 视频格式，这一点很吸引人。而且有一些免费和开源的 Flash 播放器很容易嵌入到网站上。将这些播放器和上述代码结合起来就能建立一个完整的、以 Ajax 为前端的端到端视频分享解决方案。 但 Web 上不仅仅有视频，图像共享也很重要。 幻灯片放映清单 5 显示了一个简单的基于 DHTML 的幻灯片，数据来自 XML 文件。 清单 5. index.html var g_images = ;var g_slideIndex = 0;function showSlide() $(imgTitle).hide(); $(imgItem).hide(); var height = 600; var width = ( height / g_images g_slideIndex .height ) * g_images g_slideIndex .width; $(imgItem).src = g_images g_slideIndex .src; $(imgItem).width = width; $(imgItem).height = height; $(imgTitle).innerHTML = g_images g_slideIndex .title; $(imgTitle).show(); $(imgItem).show(); g_slideIndex+; if ( g_slideIndex = g_images.length ) g_slideIndex = 0;new Ajax.Request( images.xml, method: get, onSuccess: function( transport ) var imageTags = transport.responseXML.getElementsByTagName( image ); for( var b = 0; b imageTags.length; b+ ) g_images.push( src: imageTagsb.getAttribute(src), title: imageTagsb.getAttribute(title), width: imageTagsb.getAttribute(width), height: imageTagsb.getAttribute(height) ); showSlide(); window.setInterval( showSlide, 5000 ); );上述代码需要用到 Prototype.js JavaScript 库。利用 Ajax.Request 对象获得要显示的图片列表。然后解析返回的 XML 代码，获得图片的 URL、宽、高和标题。然后调用 showSlide() 函数得到幻灯片显示效果。设置的计时器每五秒切换到下一张幻灯片。 幻灯片放映通过包含当前图片的 标签和标题 标签实现。所谓放映只不过是隐藏当前的图片和标题，将图片来源和标题文本设置为新幻灯片的内容并显示。如果需要某种淡入淡出效果，建议使用 Scriptaculous 库中的 Effects 类，它是构建在 Prototype.js 上的。 清单 6 显示了数据图像文件。清单 6. images.xml 这里虽然使用了硬编码，但使用 PHP 脚本很容易生成 XML 代码。幻灯片放映如 图 4 所示。 图 4. 简单的幻灯片放映注意：我以前介绍过一个更加精细的幻灯片放映版本）。现在这个版本的区别在于使用了 Prototype.js 库，各幻灯片之间的切换更简单。 下载描述名字大小下载方法Sample codex-ajaxxml7-media.zip1090KBHTTP关于下载方法的信息参考资料 学习 PHP 主页：访问这个有关 PHP 程序员的宝贵资源。 Prototype 库：这个 JavaScript Framework 可