|
Ajax 幻燈片放映
個人圖像管理應用程序（如 Macintosh® 上的 Apple® iPhoto®）使得幻燈片瀏覽廣為人知。在幻燈片瀏覽中，圖像按照時間順序先后淡入淡出。此外，圖片還通過所謂的 “Ken Burns Effect” 進行移動和縮放。
在該例中，我讓瀏覽器從服務器上下載一個圖像列表。然后使用動態(tài) HTML（DHTML）把圖片列表組成一個幻燈片。我使用隨機的緩慢移動、縮放和漸變來改變圖片，實現(xiàn)了令人滿意的 Ken Burns Effect 版本，而不需要下載 Macromedia® Flash 或其他重量級的動畫工具。
體系結(jié)構(gòu)
要了解 Ajax 有何不同，首先必須理解當前的 Web 編程模型�？蛻魴C和服務器之間的簡單交互如 圖 1 所示。
圖 1. 客戶機-服務器交互的 Web V1.0 模型
Web 瀏覽器或者客戶機 向 Web 服務器發(fā)出 GET 或 POST 請求。服務器格式化 HTML 響應。客戶機解析 HTML 并顯示給用戶。如果用戶單擊其他鏈接和按鈕，就向服務器發(fā)出另一個請求，用服務器返回的新頁面替換當前頁面。
新模型具有更多的異步特色，如 圖 2 所示。
圖 2. 客戶機-服務器交互的 Ajax 模型
在新的模型中，和以前一樣，服務器也返回 HTML 頁面。但是這個頁面中有一些 JavaScript 代碼。在需要的時候，這些代碼向服務器請求更多信息。這些請求可以是簡單的 GET 請求（Representational State Transfer (REST) 服務）或者 POST 請求（SOAP）。
然后，JavaScript 代碼解析響應（通常用 XML 編碼）并動態(tài)更新頁面以反映新的數(shù)據(jù)。除了 XML 外，還返回 JavaScript Serialized Object Notation（JSON）格式編碼的數(shù)據(jù)。瀏覽器很容易理解這類數(shù)據(jù)，但其他類型的客戶機則不行。返回 XML 的意義在于瀏覽器之外的其他客戶機也能解釋數(shù)據(jù)。選擇由您來決定并依賴于具體的應用程序。
開發(fā) Ajax 幻燈片的第一步是結(jié)合 REST 數(shù)據(jù)服務。該例中使用 PHP 頁面返回所有可用的幻燈片圖像及其大�。▽捄透撸�。所有圖像都放在 images 目錄中。文件名格式為 name_width_height.jpg，比如 oso1_768_700.jpg 表示該文件是我的狗 Oso 的照片，寬 768 像素，高 700 像素。我堅持使用這種命名方式，因為這樣就很容易確定圖片的寬和高，而不用費力去打開 Adobe® PhotoShop® 或 Macromedia Fireworks。
我使用 清單 1 所示的 PHP 服務器代碼來提供圖片列表。
清單 1. slides.php 服務器頁面
<?php
header( "Content-type: text/xml" );
?>
<slides>
<?php
if ($handle = opendir('images')) {
while (false !== ($file = readdir($handle)))
{
if ( preg_match( "/[.]jpg$/", $file ) ) {
preg_match( "/_(\d+)_(\d+)[.]/", $file, $found );
?>
<slide src="images/<?php echo $file; ?>"
width="<?php echo $found[1]; ?>"
height="<?php echo $found[2]; ?>" /><?php echo( "\n" ); ?>
<?php
}
}
closedir($handle);
}
?>
</slides>
代碼很簡單。首先將內(nèi)容類型設(shè)置為 XML。讓瀏覽器將該文檔識別為 XML 并為其創(chuàng)建文檔對象模型（DOM）至關(guān)重要。代碼從 <slides> 標記開始，然后讀取圖片目錄并為遇到的每個圖片創(chuàng)建 <slide> 標記。最后腳本結(jié)束 <slides> 標記。
如果用 Mozilla® Firefox® 瀏覽器打開（在我的機器上）本地主機 kenburns 目錄中的該頁面，就會看到 圖 3 所示的結(jié)果。
圖 3. slides.php 服務器腳本的輸出
一共三幅圖片：我的女兒和我的兩條狗。當然在這里可以增加任何需要的細節(jié)或者多媒體，但我盡量保持例子的簡單性。
出處：IBM developerWorks
責任編輯：moby
上一頁 下一頁 用DHTML與XML制作Ajax幻燈片 [2]
◎進入論壇網(wǎng)絡(luò)編程版塊參加討論
|
第 1 頁 用DHTML與XML制作Ajax幻燈片 [1]
第 2 頁 
