結合AJAX進行PHP開發(fā)之入門
更新時間：2006年12月05日 00:00:00 作者：
異步 JavaScript 和 XML（Asynchronous JavaScript and XML，Ajax）無疑是最流行的新 Web 技術。本文中我們將完全使用 PHP 和 Simple Ajax Toolkit (Sajax) 創(chuàng)建一個簡單的相冊作為在線 Web 應用程序。我們首先用標準的 PHP 開發(fā)方法編寫簡單的相冊，然后再用 Sajax 將其變成活動的 Web 應用程序。
創(chuàng)建一個簡單的相冊
本文將使用兩種方法創(chuàng)建一個簡單的相冊：傳統(tǒng)的 Web 應用程序和基于 Sajax 的應用程序。我們將用 PHP 編寫一個相冊，讀取某一目錄中的內(nèi)容，顯示縮略圖組成的表格。如果用戶單擊一個縮略圖，就會完全展開該圖像。因為編寫的是傳統(tǒng)應用程序，所以每次單擊都會是一個新的 HTTP 請求，而參數(shù)則作為 URL 的一部分傳遞。
您將學習如何將 Sajax 庫應用于相冊，了解為何使用 Sajax 可以加快應用程序的開發(fā)。
添加一個分頁器表
訪問相冊的用戶需要某種快速查看照片的方法。因為很多大照片不容易在一頁上顯示，所以需要創(chuàng)建一個分頁器 —— 每次顯示少量縮略圖的簡單表格。還要編寫導航，幫助用戶在圖像列表中來回移動。
什么是 OpenAjax Alliance？
2006 年 5 月 JavaOne Conference 開始前，29 家公司的代表在 Adobe Systems 的會議室里碰頭，準備大體上確定 Ajax 的未來，這個小組就稱為 OpenAjax Alliance。
小組做了幾項決定，其中最顯著的就是給自己取了個名字：OpenAjax Alliance。它還決定不把自己組織成一個正式的標準團體，或者 Eclipse Foundation 那樣的開放源碼主導的組織，因此小組自身的形式暫時也是非正式的。小組同意大約每周召開一次電話會議。
OpenAjax Alliance 主要關注三個方面：通過提供互操作性降低采用 Ajax 的風險，保證 Ajax 解決方案堅持走開放標準路線和使用開放源碼技術，保持 Web 的開放性。小組的第一項任務就是尋求建立和保持 Ajax 工具間互操作性的方法。
OpenAjax Alliance 包括 31 家技術公司，其中有 IBM?、Adobe Systems、Eclipse Foundation、Google、Laszlo Systems Inc.、Oracle、Red Hat Inc. 和 Zend Technologies Ltd.。
首先要收集至少 20 幅 .jpg 圖片，并將它們放到一個文件夾中。每個圖片還要有一個保存在單獨縮略圖文件夾中的縮略圖。雖然可使用 GD 軟件包生成縮略圖（請參閱 參考資料），但本文假設已經(jīng)準備好了縮略圖。也可使用本文提供的照片和縮略圖（請參閱 下載）。
為了完成本文的剩余部分，后面假設照片保存在 /images 子目錄中，縮略圖則放在 /images/thumbnails 中?？梢栽诖a中做適當?shù)男薷摹４送?，我們還假定縮略圖和對應的圖像使用相同的名稱。
分頁器應該傳遞兩個參數(shù)：start 是按照字母順序顯示的第一幅照片的索引號，step 是顯示的照片數(shù)。
清單 1. 相冊查看器
這個表很簡單，它從索引號 $limit_start 開始遍歷圖片列表。然后放上每個圖片的縮略圖，每五張圖片作為一行。達到 $limit_start + $limit_step 的時候循環(huán)結束。
該表是目錄列表的可視化表示，因此需要一個函數(shù)列出目錄中的所有圖像。清單 1 中的 get_file_list() 函數(shù)用索引數(shù)組返回 /images 目錄中的所有圖片列表。下面是一個示例實現(xiàn)。
清單 2. get_file_list 實現(xiàn)
最后還要編寫 get_image_link() 和 get_table_link() 函數(shù)，讓用戶將縮略圖展開成完整的圖像（參見清單 4）。注意，腳本 index.php（以及后面要創(chuàng)建的 expand.php）只在這兩個函數(shù)中調(diào)用。這樣就很容易改變鏈接的功能。事實上在下面與 Sajax 進行集成時，只有這兩個函數(shù)需要修改。
清單 4. get_image_link、get_table_link 實現(xiàn)
放大圖片
現(xiàn)在有了一個可用的分頁器為用戶提供一些縮略圖。相冊的第二項功能是允許用戶單擊縮略圖來查看全圖。get_image_link() 函數(shù)調(diào)用了 expand.php 腳本，我們現(xiàn)在就來編寫它。該腳本傳遞用戶希望展開的文件的索引，因此必須在此列出目錄并獲得適當?shù)奈募?。隨后的操作就很簡單了，只需創(chuàng)建病輸出 image 標記即可。
清單 5. get_image 函數(shù)
接下來還要提供與分頁器類似的導航機制?！吧弦粡垺?導航到編號為 $index-1 的圖像，“下一張” 導航到編號為 $index+1 的圖像，“返回” 則回到分頁器。
清單 6. get_image 導航
最后創(chuàng)建一個簡單的 HTML 容器，將其命名為 expand.php。
清單 7. get_image 導航
這樣我們就完成了相冊。用戶可以看到所有的圖片，而且很容易導航。自然，用戶可以來回切換，甚至能通過書簽功能返回喜歡的圖片。
Web 開發(fā)社區(qū)的人都知道，Ajax 允許向服務器發(fā)出異步的輔助請求，并直接在網(wǎng)頁中顯示結果（如圖 4 所示）。不幸的是，即便最簡單的 Ajax 應用程序實現(xiàn)起來也是一項大任務。因為 Ajax 不是標準化的技術，Internet Explorer 和其他瀏覽器（如 Firefox、Safari）的實現(xiàn)是不同的。此外，程序員至少要編寫三個函數(shù)才能實現(xiàn)一個功能，這三個函數(shù)是：發(fā)送 HTTP 請求的初始 JavaScript，返回響應的 PHP 腳本，以及另一個處理這些響應的 JavaScript 函數(shù)。
建立在 Ajax 庫之上的 Sajax 通過運用簡單的啟發(fā)式方法大大簡化了這一過程：Web 客戶機需要訪問的每個 PHP 函數(shù)都由 Sajax “導出”。如果有一個名為 foo_bar() 的 PHP 函數(shù)，那么 Sajax 會把該函數(shù)導出為 JavaScript 函數(shù) x_foo_bar()?？蛻魴C對 x_foo_bar() 的任何調(diào)用都會自動轉發(fā)給服務器上的 foo_bar()，輸出則傳遞給另一個 JavaScript 函數(shù)。清單 8 中的簡短頁面示范了這種功能。運行這個例子需要下載 Sajax 庫（請參閱 參考資料）。
清單 8. Sajax 的應用
如果打開清單 8 中的頁面，在輸入框中輸入一些內(nèi)容然后單擊 Enter，那么輸入內(nèi)容就會在一個警告框中顯示出來。但在這個看似簡單的網(wǎng)頁背后，x_foo_bar() JavaScript 函數(shù)將遠程調(diào)用 foo_bar() 函數(shù)，并把響應傳遞給 JavaScript 內(nèi)置函數(shù) alert()。每個 Sajax 導出函數(shù)的最后一個參數(shù)都是一個響應處理程序，負責處理 foo_bar() 的輸出。
這個例子還說明了 Sajax 快速開發(fā)的另一個重要特性：不需要每個函數(shù)都有一個單獨的文件，頁面實際上調(diào)用的是其自身，因此更便于跟蹤函數(shù)的調(diào)用（如圖 5 所示）。x_foo_bar() 函數(shù)直接向頁面發(fā)回 Ajax 請求，在請求中包含函數(shù)名和參數(shù)。關鍵是 sajax_handle_client_request() 函數(shù)，它截獲所有的 Sajax 調(diào)用并自動對它們進行處理。
對于本文而言，文檔主體部分很簡單。我們將使用 div 和 window 的 id 來顯示服務器的輸出。
清單 10. 顯示服務器輸出的 div 和 window id
最后還要編寫 JavaScript 回調(diào)函數(shù)。該例中，因為所有的服務器輸出都直接輸出到 window div 標記，所以可以重復使用簡單的回調(diào)函數(shù)。將回調(diào)函數(shù)添加到 Sajax 函數(shù)調(diào)用中，就可以得到頭（head）。
清單 11. 簡單的頭
最后一步是保證應用程序中的所有鏈接都是自定義的 Sajax 調(diào)用。只需要取上一節(jié)中的代碼并作如下替換：href="index.php?start=0&step=5" 變?yōu)?onclick="x_get_table(0, 5, to_window)"，href="expand.php?index=0" 變?yōu)?onclick="x_get_image(0, to_window)"。
并在相應的函數(shù)中做同樣修改：get_image_link() 和 get_table_link()。這樣向 Sajax 的轉化就完成了（如圖 6 所示）。所有鏈接都變成了與遠程 PHP 調(diào)用對應的 JavaScript 調(diào)用，PHP 使用 JavaScript 響應處理程序 to_window() 直接輸出到頁面。
整個應用程序都包含在一個頁面中，還可以把其余功能（get_table()、get_image() 等）放在不能從 Web 訪問的單獨的庫文件中。在大多數(shù) Ajax 應用程序中，每個發(fā)往服務器的請求都需要由單獨的腳本處理，或至少需要編寫一個非常龐大的處理程序腳本來重定向請求。將所有這些文件都集中到一起可能非常麻煩。使用 Sajax 永遠只需要一個文件，在該文件中只需定義我們使用的函數(shù)即可。Sajax 代替了處理程序腳本。
可以看到 URL 仍然保持不變，并帶來了更多愉快的用戶體驗。window div 顯示在一個灰色的框中，通過 Sajax 生成的內(nèi)容非常清楚。腳本不一定要知道自身或者它在服務器上的位置，因為所有的鏈接最終都成為直接對頁面自身的 JavaScript 調(diào)用。因此我們的代碼能夠很好的模塊化。我們只需要保持 JavaScript 和 PHP 函數(shù)在同一個頁面上即可，即使頁面位置發(fā)生了變化也沒有關系。
文件的解析不在本文討論范圍之列。我們假設您能夠熟練使用 PHP 中眾多 XML 解析方法中的一種。如果不熟悉的話，建議閱讀 參考資料 中的文章。我們不再浪費時間解釋如何將該文件轉化成 HTML，作為一個練習，讀者可以自己了解下面的代碼如何使用 XML 文件并生成 HTML。清單 13 中的代碼使用了 PHP V5 中自帶的 SimpleXML 包。
清單 13. 元數(shù)據(jù)函數(shù)
要注意的是，get_meta_data() 函數(shù)中還使用 getimagesize()（一個核心 PHP 函數(shù)，不需要 GD）計算圖像的大小。
再回到 get_image() 函數(shù)，它包含由 get_image_list() 生成的文件名的列表。查找元數(shù)據(jù)只需要將文件名傳遞給該函數(shù)即可。
清單 14. 添加元數(shù)據(jù)
重新打開頁面將看到服務器請求的結果。圖 7 顯示了帶有元數(shù)據(jù)的放大的圖像。
結束語
我們看到，使用 Sajax 可以消除客戶機和服務器之間的障礙，程序員能夠進行無縫遠程函數(shù)調(diào)用而不用擔心傳輸層、HTTP GET 和 POST 請求。我們可以花更多時間編寫提供數(shù)據(jù)的 PHP 腳本以及表示層和控制層的 JavaScript。在這個相冊例子中，我們讓客戶機直接連接到圖像數(shù)據(jù)庫。通過添加簡單的元數(shù)據(jù)，我們看到讓用戶直接訪問服務器上的信息是多么簡單，無需擔心協(xié)議的問題。
與所有的 Ajax 應用程序一樣，我們的相冊也有一個致命的弱點：沒有使用瀏覽器的 “訪問歷史”，因為破壞了后退按鈕的功能。在 “利用 PHP 開發(fā) Ajax 應用程序” 系列的第 2 部分中，我們將通過實現(xiàn)歷史記錄緩沖和狀態(tài)跟蹤機制來解決這個問題。
創(chuàng)建一個簡單的相冊
本文將使用兩種方法創(chuàng)建一個簡單的相冊：傳統(tǒng)的 Web 應用程序和基于 Sajax 的應用程序。我們將用 PHP 編寫一個相冊，讀取某一目錄中的內(nèi)容，顯示縮略圖組成的表格。如果用戶單擊一個縮略圖，就會完全展開該圖像。因為編寫的是傳統(tǒng)應用程序，所以每次單擊都會是一個新的 HTTP 請求，而參數(shù)則作為 URL 的一部分傳遞。
您將學習如何將 Sajax 庫應用于相冊，了解為何使用 Sajax 可以加快應用程序的開發(fā)。
添加一個分頁器表
訪問相冊的用戶需要某種快速查看照片的方法。因為很多大照片不容易在一頁上顯示，所以需要創(chuàng)建一個分頁器 —— 每次顯示少量縮略圖的簡單表格。還要編寫導航，幫助用戶在圖像列表中來回移動。
圖 1. 分頁器提供了顯示用戶照片的一種方式
什么是 OpenAjax Alliance？
2006 年 5 月 JavaOne Conference 開始前，29 家公司的代表在 Adobe Systems 的會議室里碰頭，準備大體上確定 Ajax 的未來，這個小組就稱為 OpenAjax Alliance。
小組做了幾項決定，其中最顯著的就是給自己取了個名字：OpenAjax Alliance。它還決定不把自己組織成一個正式的標準團體，或者 Eclipse Foundation 那樣的開放源碼主導的組織，因此小組自身的形式暫時也是非正式的。小組同意大約每周召開一次電話會議。
OpenAjax Alliance 主要關注三個方面：通過提供互操作性降低采用 Ajax 的風險，保證 Ajax 解決方案堅持走開放標準路線和使用開放源碼技術，保持 Web 的開放性。小組的第一項任務就是尋求建立和保持 Ajax 工具間互操作性的方法。
OpenAjax Alliance 包括 31 家技術公司，其中有 IBM?、Adobe Systems、Eclipse Foundation、Google、Laszlo Systems Inc.、Oracle、Red Hat Inc. 和 Zend Technologies Ltd.。
首先要收集至少 20 幅 .jpg 圖片，并將它們放到一個文件夾中。每個圖片還要有一個保存在單獨縮略圖文件夾中的縮略圖。雖然可使用 GD 軟件包生成縮略圖（請參閱 參考資料），但本文假設已經(jīng)準備好了縮略圖。也可使用本文提供的照片和縮略圖（請參閱 下載）。
為了完成本文的剩余部分，后面假設照片保存在 /images 子目錄中，縮略圖則放在 /images/thumbnails 中?？梢栽诖a中做適當?shù)男薷摹４送?，我們還假定縮略圖和對應的圖像使用相同的名稱。
分頁器應該傳遞兩個參數(shù)：start 是按照字母順序顯示的第一幅照片的索引號，step 是顯示的照片數(shù)。
清單 1. 相冊查看器
/*
* Find a list of images in /images and provide thumbnails
*/
function get_table ( $limit_start = 0, $limit_step = 5 ) {
$images = get_image_list('images');
// Generate navigation for Previous and Next buttons
// Code given below
$output .= '＜table class="image_table"＞';
$columns = 5;
foreach ($images as $index =＞ $image) {
// Begin directory listing at item number $limit_start
if ( $index ＜ $limit_start ) continue;
// End directory listing at item number $limit_end
if ( $index ＞= $limit_start + $limit_step ) continue;
// Begin column
if ( $index - $limit_start % $columns == 0 ) {
$output .= '＜tr＞';
}
// Generate link to blown up image (see below)
$thumbnail = '＜img src="thumbnails/' . $image . '" /＞';
$output .= '＜td＞' . get_image_link($thumbnail, $index) . '＜/td＞';
// Close column
if ( $index - $limit_start % $columns == $columns - 1 ) {
$output .= '＜/tr＞';
}
}
$output .= '＜/table＞';
return $nav . $output;
}
* Find a list of images in /images and provide thumbnails
*/
function get_table ( $limit_start = 0, $limit_step = 5 ) {
$images = get_image_list('images');
// Generate navigation for Previous and Next buttons
// Code given below
$output .= '＜table class="image_table"＞';
$columns = 5;
foreach ($images as $index =＞ $image) {
// Begin directory listing at item number $limit_start
if ( $index ＜ $limit_start ) continue;
// End directory listing at item number $limit_end
if ( $index ＞= $limit_start + $limit_step ) continue;
// Begin column
if ( $index - $limit_start % $columns == 0 ) {
$output .= '＜tr＞';
}
// Generate link to blown up image (see below)
$thumbnail = '＜img src="thumbnails/' . $image . '" /＞';
$output .= '＜td＞' . get_image_link($thumbnail, $index) . '＜/td＞';
// Close column
if ( $index - $limit_start % $columns == $columns - 1 ) {
$output .= '＜/tr＞';
}
}
$output .= '＜/table＞';
return $nav . $output;
}
這個表很簡單，它從索引號 $limit_start 開始遍歷圖片列表。然后放上每個圖片的縮略圖，每五張圖片作為一行。達到 $limit_start + $limit_step 的時候循環(huán)結束。
該表是目錄列表的可視化表示，因此需要一個函數(shù)列出目錄中的所有圖像。清單 1 中的 get_file_list() 函數(shù)用索引數(shù)組返回 /images 目錄中的所有圖片列表。下面是一個示例實現(xiàn)。
清單 2. get_file_list 實現(xiàn)
function get_image_list ( $image_dir ) {
$d = dir($image_dir);
$files = array();
if ( !$d ) return null;
while (false !== ($file = $d-＞read())) {
// getimagesize returns true only on valid images
if ( @getimagesize( $image_dir . '/' . $file ) ) {
$files[] = $file;
}
}
$d-＞close();
return $files;
}
$d = dir($image_dir);
$files = array();
if ( !$d ) return null;
while (false !== ($file = $d-＞read())) {
// getimagesize returns true only on valid images
if ( @getimagesize( $image_dir . '/' . $file ) ) {
$files[] = $file;
}
}
$d-＞close();
return $files;
}
注意：本文后面還要使用 get_file_list() 函數(shù)。有一點很重要，無論何時調(diào)用該函數(shù)，返回的數(shù)組都是不變的。因為提供的實現(xiàn)要進行目錄搜索，必須保證目錄中的指定文件不會改變，每次都要按字母順序排序。
導航的實現(xiàn)
雖然表格列出了目錄中的一些圖像，但用戶還需要一種查看表格中未出現(xiàn)的圖片的方法。要真正實現(xiàn)分頁器的導行，則需要一套標準的鏈接：首頁、上一頁、下一頁和尾頁。
清單 3. 分頁器導航
// Append navigation
$output = '＜h4＞Showing items ' . $limit_start . '-' .
min($limit_start + $limit_step - 1, count($images)) .
' of ' . count($images) . '＜br /＞';
$prev_start = max(0, $limit_start - $limit_step);
if ( $limit_start ＞ 0 ) {
$output .= get_table_link('＜＜', 0, $limit_step);
$output .= ' | ' . get_table_link('Prev',
$prev_start, $limit_step);
} else {
$output .= '＜＜ | Prev';
}
// Append next button
$next_start = min($limit_start + $limit_step, count($images));
if ( $limit_start + $limit_step ＜ count($images) ) {
$output .= ' | ' . get_table_link('Next',$next_start, $limit_step);
$output .= ' | ' . get_table_link('＞＞',(count($images) - $limit_step), $limit_step);
} else {
$output .= ' | Next | ＞＞';
}
$output .= '＜/h4＞';
$output = '＜h4＞Showing items ' . $limit_start . '-' .
min($limit_start + $limit_step - 1, count($images)) .
' of ' . count($images) . '＜br /＞';
$prev_start = max(0, $limit_start - $limit_step);
if ( $limit_start ＞ 0 ) {
$output .= get_table_link('＜＜', 0, $limit_step);
$output .= ' | ' . get_table_link('Prev',
$prev_start, $limit_step);
} else {
$output .= '＜＜ | Prev';
}
// Append next button
$next_start = min($limit_start + $limit_step, count($images));
if ( $limit_start + $limit_step ＜ count($images) ) {
$output .= ' | ' . get_table_link('Next',$next_start, $limit_step);
$output .= ' | ' . get_table_link('＞＞',(count($images) - $limit_step), $limit_step);
} else {
$output .= ' | Next | ＞＞';
}
$output .= '＜/h4＞';
最后還要編寫 get_image_link() 和 get_table_link() 函數(shù)，讓用戶將縮略圖展開成完整的圖像（參見清單 4）。注意，腳本 index.php（以及后面要創(chuàng)建的 expand.php）只在這兩個函數(shù)中調(diào)用。這樣就很容易改變鏈接的功能。事實上在下面與 Sajax 進行集成時，只有這兩個函數(shù)需要修改。
清單 4. get_image_link、get_table_link 實現(xiàn)
function get_table_link ( $title, $start, $step ) {
$link = "index.php?start=$start&step=$step";
return '＜a href="' . $link . '"＞' . $title .'＜/a＞';
}
function get_image_link ( $title, $index ) {
$link = "expand.php?index=$index";
return '＜a href="' . $link . '"＞' . $title . '＜/a＞';
}
$link = "index.php?start=$start&step=$step";
return '＜a href="' . $link . '"＞' . $title .'＜/a＞';
}
function get_image_link ( $title, $index ) {
$link = "expand.php?index=$index";
return '＜a href="' . $link . '"＞' . $title . '＜/a＞';
}
放大圖片
現(xiàn)在有了一個可用的分頁器為用戶提供一些縮略圖。相冊的第二項功能是允許用戶單擊縮略圖來查看全圖。get_image_link() 函數(shù)調(diào)用了 expand.php 腳本，我們現(xiàn)在就來編寫它。該腳本傳遞用戶希望展開的文件的索引，因此必須在此列出目錄并獲得適當?shù)奈募?。隨后的操作就很簡單了，只需創(chuàng)建病輸出 image 標記即可。
清單 5. get_image 函數(shù)
function get_image ( $index ) {
$images = get_image_list ( 'images' );
// Generate navigation
$output .= '＜img src="images/' . $images[$index] . '" /＞';
return $output;
}
$images = get_image_list ( 'images' );
// Generate navigation
$output .= '＜img src="images/' . $images[$index] . '" /＞';
return $output;
}
接下來還要提供與分頁器類似的導航機制?！吧弦粡垺?導航到編號為 $index-1 的圖像，“下一張” 導航到編號為 $index+1 的圖像，“返回” 則回到分頁器。
清單 6. get_image 導航
$output .= '＜h4＞Viewing image ' . $index .' of ' . count($images) . '＜br /＞';
if ( $index ＞ 0 ) {
$output .= get_image_link('＜＜', 0);
$output .= ' | ' . get_image_link('Prev', $index-1);
} else {
$output .= '＜＜ | Prev';
}
$output .= ' | ' . get_table_link('Up', $index, 5);
if ( $index ＜ count($images) ) {
$output .= ' | ' . get_image_link('Next', $index+1);
$output .= ' | ' . get_image_link('＞＞', count($images));
} else {
$output .= ' | Next | ＞＞';
}
$output .= '＜/h4＞';
if ( $index ＞ 0 ) {
$output .= get_image_link('＜＜', 0);
$output .= ' | ' . get_image_link('Prev', $index-1);
} else {
$output .= '＜＜ | Prev';
}
$output .= ' | ' . get_table_link('Up', $index, 5);
if ( $index ＜ count($images) ) {
$output .= ' | ' . get_image_link('Next', $index+1);
$output .= ' | ' . get_image_link('＞＞', count($images));
} else {
$output .= ' | Next | ＞＞';
}
$output .= '＜/h4＞';
最后創(chuàng)建一個簡單的 HTML 容器，將其命名為 expand.php。
清單 7. get_image 導航
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞Creating a simple picture album viewer＜/title＞
＜style type="text/css"＞
body { text-align: center }
table.image_table { margin: 0 auto 0 auto; width: 700px;
padding:10px; border: 1px solid #ccc; background: #eee; }
table.image_table td { padding: 5px }
table.image_table a { display: block; }
table.image_table img { display: block; width: 120px;
padding: 2px; border: 1px solid #ccc; }
＜/style＞
＜/head＞
＜body＞
＜h1＞Creating a simple picture album viewer＜/h1＞
＜?php
$index = isset($_REQUEST['index']) ? $_REQUEST['index'] : 0;
echo get_image($index);
?＞
＜/body＞
＜/html＞
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞Creating a simple picture album viewer＜/title＞
＜style type="text/css"＞
body { text-align: center }
table.image_table { margin: 0 auto 0 auto; width: 700px;
padding:10px; border: 1px solid #ccc; background: #eee; }
table.image_table td { padding: 5px }
table.image_table a { display: block; }
table.image_table img { display: block; width: 120px;
padding: 2px; border: 1px solid #ccc; }
＜/style＞
＜/head＞
＜body＞
＜h1＞Creating a simple picture album viewer＜/h1＞
＜?php
$index = isset($_REQUEST['index']) ? $_REQUEST['index'] : 0;
echo get_image($index);
?＞
＜/body＞
＜/html＞
這樣我們就完成了相冊。用戶可以看到所有的圖片，而且很容易導航。自然，用戶可以來回切換，甚至能通過書簽功能返回喜歡的圖片。
圖 2. 完成的相冊
添加 Sajax
現(xiàn)在相冊提供了基本的導航功能，目錄中的圖像添加了索引。下面您將看到添加 Sajax 能夠改進編程和用戶體驗。
這里假設您對 Ajax 有基本的了解，最好還熟悉 Sajax 的基礎知識（請參閱 參考資料 中的教程）。
Sajax、Ajax 與傳統(tǒng) Web 應用程序
現(xiàn)在我們已經(jīng)使用標準的 Web 開發(fā)模型開發(fā)了應用程序。兩項主要功能是分頁器和圖像查看器，它們分別對應不同的 PHP 文件。參數(shù)作為 HTTP GET 請求傳遞給腳本，腳本直接向 Web 客戶機返回頁面。
圖 3. 在傳統(tǒng)的 Web 應用程序中，三個不同的請求調(diào)用了兩個頁面
Web 開發(fā)社區(qū)的人都知道，Ajax 允許向服務器發(fā)出異步的輔助請求，并直接在網(wǎng)頁中顯示結果（如圖 4 所示）。不幸的是，即便最簡單的 Ajax 應用程序實現(xiàn)起來也是一項大任務。因為 Ajax 不是標準化的技術，Internet Explorer 和其他瀏覽器（如 Firefox、Safari）的實現(xiàn)是不同的。此外，程序員至少要編寫三個函數(shù)才能實現(xiàn)一個功能，這三個函數(shù)是：發(fā)送 HTTP 請求的初始 JavaScript，返回響應的 PHP 腳本，以及另一個處理這些響應的 JavaScript 函數(shù)。
圖 4. Ajax 應用程序負責所有的 HTTP 請求
建立在 Ajax 庫之上的 Sajax 通過運用簡單的啟發(fā)式方法大大簡化了這一過程：Web 客戶機需要訪問的每個 PHP 函數(shù)都由 Sajax “導出”。如果有一個名為 foo_bar() 的 PHP 函數(shù)，那么 Sajax 會把該函數(shù)導出為 JavaScript 函數(shù) x_foo_bar()?？蛻魴C對 x_foo_bar() 的任何調(diào)用都會自動轉發(fā)給服務器上的 foo_bar()，輸出則傳遞給另一個 JavaScript 函數(shù)。清單 8 中的簡短頁面示范了這種功能。運行這個例子需要下載 Sajax 庫（請參閱 參考資料）。
清單 8. Sajax 的應用
＜?php
require("Sajax.php");
function foo_bar ( $param ) {
return "You typed: $param";
}
$sajax_request_type = "GET"; // Set HTTP request type to GET
sajax_init(); // Prepare Sajax
sajax_export("foo_bar"); // foo_bar can now be called by client
sajax_handle_client_request(); // Discussed below
?＞
＜html＞
＜head＞
＜script language="javascript"＞
＜? sajax_show_javascript(); ?＞
＜/script＞
＜/head＞
＜body＞
＜form onSubmit="x_foo_bar(this.input.value, alert);return false;"＞
＜input type="text" name="input" /＞
＜/form＞
＜/body＞
＜/html＞
require("Sajax.php");
function foo_bar ( $param ) {
return "You typed: $param";
}
$sajax_request_type = "GET"; // Set HTTP request type to GET
sajax_init(); // Prepare Sajax
sajax_export("foo_bar"); // foo_bar can now be called by client
sajax_handle_client_request(); // Discussed below
?＞
＜html＞
＜head＞
＜script language="javascript"＞
＜? sajax_show_javascript(); ?＞
＜/script＞
＜/head＞
＜body＞
＜form onSubmit="x_foo_bar(this.input.value, alert);return false;"＞
＜input type="text" name="input" /＞
＜/form＞
＜/body＞
＜/html＞
如果打開清單 8 中的頁面，在輸入框中輸入一些內(nèi)容然后單擊 Enter，那么輸入內(nèi)容就會在一個警告框中顯示出來。但在這個看似簡單的網(wǎng)頁背后，x_foo_bar() JavaScript 函數(shù)將遠程調(diào)用 foo_bar() 函數(shù)，并把響應傳遞給 JavaScript 內(nèi)置函數(shù) alert()。每個 Sajax 導出函數(shù)的最后一個參數(shù)都是一個響應處理程序，負責處理 foo_bar() 的輸出。
這個例子還說明了 Sajax 快速開發(fā)的另一個重要特性：不需要每個函數(shù)都有一個單獨的文件，頁面實際上調(diào)用的是其自身，因此更便于跟蹤函數(shù)的調(diào)用（如圖 5 所示）。x_foo_bar() 函數(shù)直接向頁面發(fā)回 Ajax 請求，在請求中包含函數(shù)名和參數(shù)。關鍵是 sajax_handle_client_request() 函數(shù)，它截獲所有的 Sajax 調(diào)用并自動對它們進行處理。
圖 5. 使用 Sajax 客戶機可通過一個頁面訪問服務器端的多個函數(shù)
將 Sajax 連接到相冊
利用剛剛創(chuàng)建的代碼，我們將用 Sajax 迅速把相冊從多頁面應用程序轉化成活動的 Ajax 應用程序。
因為相冊主要有兩個函數(shù)，get_table() 和 get_image()，這也是需要用 Sajax 導出的全部函數(shù)。事實上，為了通過 Sajax 調(diào)用這些函數(shù)，這些函數(shù)本身基本上不需要修改，很快我們就會看到，我們只需要修改生成的鏈接即可。
清單 9. Sajax 相冊的頭部
＜?php
require("Sajax.php");
function get_image () { } // Defined later
function get_thumbs_table () { } // Defined later
// Standard Sajax stuff. Use Get, and export two
// main functions to javascript
$sajax_request_type = "GET";
sajax_init();
sajax_export("get_thumbs_table", "get_image");
sajax_handle_client_request();
?＞
require("Sajax.php");
function get_image () { } // Defined later
function get_thumbs_table () { } // Defined later
// Standard Sajax stuff. Use Get, and export two
// main functions to javascript
$sajax_request_type = "GET";
sajax_init();
sajax_export("get_thumbs_table", "get_image");
sajax_handle_client_request();
?＞
對于本文而言，文檔主體部分很簡單。我們將使用 div 和 window 的 id 來顯示服務器的輸出。
清單 10. 顯示服務器輸出的 div 和 window id
＜body＞
＜h1＞Sajax photo album＜/h1＞
＜div id="window"＞＜/div＞
＜/body＞
＜h1＞Sajax photo album＜/h1＞
＜div id="window"＞＜/div＞
＜/body＞
最后還要編寫 JavaScript 回調(diào)函數(shù)。該例中，因為所有的服務器輸出都直接輸出到 window div 標記，所以可以重復使用簡單的回調(diào)函數(shù)。將回調(diào)函數(shù)添加到 Sajax 函數(shù)調(diào)用中，就可以得到頭（head）。
清單 11. 簡單的頭
＜head＞
＜title＞Creating a Sajax photo album＜/title＞
＜style type="text/css"＞
body { text-align: center }
div#window { margin: 0 auto 0 auto; width: 700px;
padding: 10px; border: 1px solid #ccc; background: #eee; }
table.image_table { margin: 0 auto 0 auto; }
table.image_table td { padding: 5px }
table.image_table a { display: block; }
table.image_table img { display: block; width: 120px
padding: 2px; border: 1px solid #ccc; }
img.full { display: block; margin: 0 auto 0 auto;
width: 300px; border: 1px solid #000 }
＜/style＞
＜script language="javascript"＞
＜? sajax_show_javascript(); ?＞
// Outputs directly to the "window" div
function to_window(output) {
document.getElementById("window").innerHTML = output;
}
window.onload = function() {
x get table to window);
};
＜/script＞
＜/head＞
＜title＞Creating a Sajax photo album＜/title＞
＜style type="text/css"＞
body { text-align: center }
div#window { margin: 0 auto 0 auto; width: 700px;
padding: 10px; border: 1px solid #ccc; background: #eee; }
table.image_table { margin: 0 auto 0 auto; }
table.image_table td { padding: 5px }
table.image_table a { display: block; }
table.image_table img { display: block; width: 120px
padding: 2px; border: 1px solid #ccc; }
img.full { display: block; margin: 0 auto 0 auto;
width: 300px; border: 1px solid #000 }
＜/style＞
＜script language="javascript"＞
＜? sajax_show_javascript(); ?＞
// Outputs directly to the "window" div
function to_window(output) {
document.getElementById("window").innerHTML = output;
}
window.onload = function() {
x get table to window);
};
＜/script＞
＜/head＞
最后一步是保證應用程序中的所有鏈接都是自定義的 Sajax 調(diào)用。只需要取上一節(jié)中的代碼并作如下替換：href="index.php?start=0&step=5" 變?yōu)?onclick="x_get_table(0, 5, to_window)"，href="expand.php?index=0" 變?yōu)?onclick="x_get_image(0, to_window)"。
并在相應的函數(shù)中做同樣修改：get_image_link() 和 get_table_link()。這樣向 Sajax 的轉化就完成了（如圖 6 所示）。所有鏈接都變成了與遠程 PHP 調(diào)用對應的 JavaScript 調(diào)用，PHP 使用 JavaScript 響應處理程序 to_window() 直接輸出到頁面。
整個應用程序都包含在一個頁面中，還可以把其余功能（get_table()、get_image() 等）放在不能從 Web 訪問的單獨的庫文件中。在大多數(shù) Ajax 應用程序中，每個發(fā)往服務器的請求都需要由單獨的腳本處理，或至少需要編寫一個非常龐大的處理程序腳本來重定向請求。將所有這些文件都集中到一起可能非常麻煩。使用 Sajax 永遠只需要一個文件，在該文件中只需定義我們使用的函數(shù)即可。Sajax 代替了處理程序腳本。
圖 6. 完成的基于 Sajax 的相冊（縮略圖）
可以看到 URL 仍然保持不變，并帶來了更多愉快的用戶體驗。window div 顯示在一個灰色的框中，通過 Sajax 生成的內(nèi)容非常清楚。腳本不一定要知道自身或者它在服務器上的位置，因為所有的鏈接最終都成為直接對頁面自身的 JavaScript 調(diào)用。因此我們的代碼能夠很好的模塊化。我們只需要保持 JavaScript 和 PHP 函數(shù)在同一個頁面上即可，即使頁面位置發(fā)生了變化也沒有關系。
擴展相冊
使用 Sajax 把我們的相冊變成活動的 Web 應用程序如此輕而易舉，我們要再花點時間添加一些功能，進一步說明 Sajax 如何使從服務器檢索數(shù)據(jù)變得完全透明。我們將為相冊添加元數(shù)據(jù)功能，這樣用戶就能為他們的圖片添加說明。
元數(shù)據(jù)
沒有上下文說明的相冊是不完整的，比如照片的來源、作者等。為此我們要將圖像集中起來創(chuàng)建一個簡單的 XML 文件。根節(jié)點是 gallery，它包含任意多個 photo 節(jié)點。每個 photo 節(jié)點都通過其 file 屬性來編號。在 photo 節(jié)點中可以使用任意多個標記來描述照片，但本例中只使用了 date、locale 和 comment。
清單 12. 包含元數(shù)據(jù)的 XML 文件
＜?xml version="1.0"?＞
＜gallery＞
?。紁hoto file="image01.jpg"＞
?。糳ate＞August 6, 2006＜/date＞
?。糽ocale＞Los Angeles, CA＜/locale＞
＜comment＞Here's a photo of my favorite celebrity＜/comment＞
?。?photo＞
＜photo file="image02.jpg"＞
?。糳ate＞August 7, 2006＜/date＞
?。糽ocale＞San Francisco, CA＜/locale＞
?。糲omment＞In SF, we got to ride the street cars＜/comment＞
＜/photo＞
?。紁hoto file="image03.jpg"＞
＜date＞August 8, 2006＜/date＞
?。糽ocale＞Portland, OR＜/locale＞
?。糲omment＞Time to end our road trip!＜/comment＞
?。?photo＞
＜/gallery＞
＜gallery＞
?。紁hoto file="image01.jpg"＞
?。糳ate＞August 6, 2006＜/date＞
?。糽ocale＞Los Angeles, CA＜/locale＞
＜comment＞Here's a photo of my favorite celebrity＜/comment＞
?。?photo＞
＜photo file="image02.jpg"＞
?。糳ate＞August 7, 2006＜/date＞
?。糽ocale＞San Francisco, CA＜/locale＞
?。糲omment＞In SF, we got to ride the street cars＜/comment＞
＜/photo＞
?。紁hoto file="image03.jpg"＞
＜date＞August 8, 2006＜/date＞
?。糽ocale＞Portland, OR＜/locale＞
?。糲omment＞Time to end our road trip!＜/comment＞
?。?photo＞
＜/gallery＞
文件的解析不在本文討論范圍之列。我們假設您能夠熟練使用 PHP 中眾多 XML 解析方法中的一種。如果不熟悉的話，建議閱讀 參考資料 中的文章。我們不再浪費時間解釋如何將該文件轉化成 HTML，作為一個練習，讀者可以自己了解下面的代碼如何使用 XML 文件并生成 HTML。清單 13 中的代碼使用了 PHP V5 中自帶的 SimpleXML 包。
清單 13. 元數(shù)據(jù)函數(shù)
function get_meta_data ( $file ) {
// Using getimagesize, the server calculates the dimensions
list($width, $height) = @getimagesize("images/$file");
$output = "＜p＞W(wǎng)idth: {$width}px, Height: {$height}px＜/p＞";
// Use SimpleXML package in PHP_v5:
// http://us3.php.net/manual/en/ref.simplexml.php
$xml = simplexml_load_file("gallery.xml");
foreach ( $xml as $photo ) {
if ($photo['id'] == $file) {
$output .= !empty($photo-＞date) ? "＜p＞Date taken:{$photo-＞date}＜/p＞" : '';
$output .= !empty($photo-＞locale) ? "＜p＞Location:{$photo-＞locale}＞/p＞" : '';
$output .= !empty($photo-＞comment) ? "＜p＞Comment:{$photo-＞comment}＜/p＞" : '';
}
}
return $output;
// Using getimagesize, the server calculates the dimensions
list($width, $height) = @getimagesize("images/$file");
$output = "＜p＞W(wǎng)idth: {$width}px, Height: {$height}px＜/p＞";
// Use SimpleXML package in PHP_v5:
// http://us3.php.net/manual/en/ref.simplexml.php
$xml = simplexml_load_file("gallery.xml");
foreach ( $xml as $photo ) {
if ($photo['id'] == $file) {
$output .= !empty($photo-＞date) ? "＜p＞Date taken:{$photo-＞date}＜/p＞" : '';
$output .= !empty($photo-＞locale) ? "＜p＞Location:{$photo-＞locale}＞/p＞" : '';
$output .= !empty($photo-＞comment) ? "＜p＞Comment:{$photo-＞comment}＜/p＞" : '';
}
}
return $output;
要注意的是，get_meta_data() 函數(shù)中還使用 getimagesize()（一個核心 PHP 函數(shù)，不需要 GD）計算圖像的大小。
再回到 get_image() 函數(shù)，它包含由 get_image_list() 生成的文件名的列表。查找元數(shù)據(jù)只需要將文件名傳遞給該函數(shù)即可。
清單 14. 添加元數(shù)據(jù)
function get_image ( $index ) {
$images = get_image_list ( 'images' );
// ...
$output .= '＜img src="images/' . $images[$index] . '" /＞';
$output .= '＜div id="meta_data"＞' .
get_meta_data( $images[$index] ) . '＜/div＞';
return $output;
}
$images = get_image_list ( 'images' );
// ...
$output .= '＜img src="images/' . $images[$index] . '" /＞';
$output .= '＜div id="meta_data"＞' .
get_meta_data( $images[$index] ) . '＜/div＞';
return $output;
}
重新打開頁面將看到服務器請求的結果。圖 7 顯示了帶有元數(shù)據(jù)的放大的圖像。
圖 7. 使用元數(shù)據(jù)的相冊
結束語
我們看到，使用 Sajax 可以消除客戶機和服務器之間的障礙，程序員能夠進行無縫遠程函數(shù)調(diào)用而不用擔心傳輸層、HTTP GET 和 POST 請求。我們可以花更多時間編寫提供數(shù)據(jù)的 PHP 腳本以及表示層和控制層的 JavaScript。在這個相冊例子中，我們讓客戶機直接連接到圖像數(shù)據(jù)庫。通過添加簡單的元數(shù)據(jù)，我們看到讓用戶直接訪問服務器上的信息是多么簡單，無需擔心協(xié)議的問題。
與所有的 Ajax 應用程序一樣，我們的相冊也有一個致命的弱點：沒有使用瀏覽器的 “訪問歷史”，因為破壞了后退按鈕的功能。在 “利用 PHP 開發(fā) Ajax 應用程序” 系列的第 2 部分中，我們將通過實現(xiàn)歷史記錄緩沖和狀態(tài)跟蹤機制來解決這個問題。
相關文章
這篇文章主要為大家詳細介紹了Ajax實現(xiàn)二級聯(lián)動菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
AJAX聊天室V1.0發(fā)布...2006-09-09
asp.net 全部選中與取消操作,選中后的刪除(ajax)實現(xiàn)無刷新效果
現(xiàn)在我們在編程的時刻總是要利用一些最新的技術去解決問題。。。。下面是我用ajax與jequery結合在一起使用的一個實例。希能給一起學習的朋友們帶來幫助。2009-06-06
支持跨域的Ajax異步(請求)提交類2009-07-07
關于Ajax中通過response在后臺傳遞數(shù)據(jù)問題
這篇文章給大家介紹了Ajax中通過response在后臺傳遞數(shù)據(jù)問題，需要的的朋友參考下吧2017-08-08
流行的Ajax應用演示和源碼下載...2006-08-08
Ajax 可以為用戶提供更為豐富的用戶體驗。jQuery 對 Ajax 當然也提供了很好的支持，而且還抽象了各種瀏覽器對于 Ajax 支持方面令人痛苦的差異。接下來，通過本篇文章給大家介紹jquery下的ajax調(diào)試步驟，感興趣的朋友可以參考下2015-09-09
這篇文章主要介紹了解決Ajax加載JSon數(shù)據(jù)中文亂碼問題,需要的朋友可以參考下2017-10-10
今天小編就為大家分享一篇解決ajax請求后臺,有時收不到返回值的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
解決ajax提交到后臺數(shù)據(jù)成功但返回不走success而走的error問題
今天小編就為大家分享一篇解決ajax提交到后臺數(shù)據(jù)成功但返回不走success而走的error問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08