1、精品資料推薦 標題： Ajax 和 XML: 五種常見 Ajax 模式 適合什么人群： java 開發人員、 jsp 頁面設計人員、 Ajax 開發人員、 Ajax 愛好者、深入學習 Ajax 的人員 可以解決什么問題： 使用 Ajax 技術播放電影和幻燈片 正文： 簡單的視頻選擇 首先來看網站， 網站上有一個電影列表可供選擇 一個不用改變頁面就能選擇不同電影的 網站。頁面代碼如 清單 1 所示。 清單 1. index.html function setMovie( url ) $(movieHost).innerHTML = ; var elEmbed = document.createE

2、lement( 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+

3、 ) 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() 方法查找所有電

4、影標簽。 對每個電影標簽， 代碼檢索 URL 和標題。如果檢索的標簽是列表中的第一部電影，腳本立即開始放映這部電 影。否則添加一個 anchor 標簽作為 movieList 的電影選擇器。 電影選擇器 anchor 調用 setMovie() 函數打開指定的電影。 播放電影的方法很簡單， 首先 將 movieHost 標簽置空，即刪除原來的電影。然后將內容設置為 標簽，其 URL 由電影列表指定。 標簽是在頁面中播放電影最簡單的方法， 但是存在跨瀏覽器的問題。 另一種辦法是 同時使用 和 標簽。 這個簡單的例子中， movies.xml 只是一個平面文件，包含一些我自己的家庭短片的引用。 該

5、文件如 清單 2 所示。 清單 2. movies.xml 打開該頁面時，顯示的結果如 圖1所示。 圖1.簡單的電影列表頁面 最上方是一部由標簽播放的電影，下面是其他影片列表。點擊其中的任何鏈接, 正在播放的電影就變成所選擇的電影。 顯然，這個系統不適合大型的視頻資料庫，還需要對影片列表進行某種搜索。 可搜索的電影列表 要添加搜索功能，必須添加一個搜索框，如清單3所示。其中增加了搜索輸入字段 q。 清單3.添加搜索功能 vscript src=prototype.js function setMovie( url ) $(movieHost).innerHTML = ; var elEmbed

6、 = 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

7、= ; 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()

8、方法和 Ajax.Request 調用類 似，除了向 search.php 頁面傳遞查詢字符串。 search.php 腳本返回和原來相同的 XML 格 式，因此不需要修改 XML 解析的代碼。 我承認對于自己的習慣來說， key-up 上的 search() 函數反映有點太快。理想情況下，系 統應該在執行搜索之前等待一秒左右以便輸入完整的搜索文本， 避免列表不停地閃爍。 使用 window.setTimeout() 方法很容易實現這種行為。 清單 4 顯示了經過修改的 search.php 腳本。 清單 4. search.php $v ) if ( strlen( $_GETq ) 0 v

9、ar 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).inn

10、erHTML = g_images g_slideIndex .title; $(imgTitle).show(); $(imgItem).show(); 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 ima

11、geTags.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 對象獲

12、得要顯示的 圖片列表。然后解析返回的 XML代碼，獲得圖片的URL、寬、高和標題。然后調用showSlide() 函數得到幻燈片顯示效果。設置的計時器每五秒切換到下一張幻燈片。 幻燈片放映通過包含當前圖片的 標簽和標題 標簽實現。 所謂放映只不過是 隱藏當前的圖片和標題， 將圖片來源和標題文本設置為新幻燈片的內容并顯示。 如果需要某 種淡入淡出效果， 建議使用 Scriptaculous 庫中的 Effects 類，它是構建在 Prototype.js 上的。 清單 6 顯示了數據圖像文件。 清單 6. images.xml 這里雖然使用了硬編碼， 但使用 PHP 腳本很容易生成 XML 代碼?；脽羝庞橙?圖 4 所示。 圖 4. 簡單的幻燈片放映 注意：我以前介紹過一個更加精細的幻燈片放映版本）?，F在這個版本的區別在于使用了 Prototype.js庫，各幻燈片之間的切換更簡單。 下載 描述名字大小下載方法 Sample code x-ajaxxml7-media.zip1090KBHTTP 關于下載方法的信息 參考資料 學習 ? PHP主頁：訪問這個有關 PHP程序員的寶貴資源。 Prototype庫：這個 JavaScript Framework可簡化動態 Web應用程序的開發。 Scriptaculous JavaScript庫：這個基于