使用AJAX進(jìn)行PHP開發(fā)

這篇文章主要講解了“使用AJAX進(jìn)行PHP開發(fā)”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“使用AJAX進(jìn)行PHP開發(fā)”吧！

　　創(chuàng)建一個簡單的相冊

　　本文將使用兩種方法創(chuàng)建一個簡單的相冊：傳統(tǒng)的 Web 應(yīng)用程序和基于 Sajax 的應(yīng)用程序。我們將用 PHP 編寫一個相冊，讀取某一目錄中的內(nèi)容，顯示縮略圖組成的表格。如果用戶單擊一個縮略圖，就會完全展開該圖像。因為編寫的是傳統(tǒng)應(yīng)用程序，所以每次單擊都會是一個新的 HTTP 請求，而參數(shù)則作為 URL 的一部分傳遞。

　　您將學(xué)習(xí)如何將 Sajax 庫應(yīng)用于相冊，了解為何使用 Sajax 可以加快應(yīng)用程序的開發(fā)。

　　添加一個分頁器表

　　訪問相冊的用戶需要某種快速查看照片的方法。因為很多大照片不容易在一頁上顯示，所以需要創(chuàng)建一個分頁器 —— 每次顯示少量縮略圖的簡單表格。還要編寫導(dǎo)航，幫助用戶在圖像列表中來回移動。

 
圖 1. 分頁器提供了顯示用戶照片的一種方式

　　什么是 OpenAjax Alliance？

　　2006 年 5 月 JavaOne Conference 開始前，29 家公司的代表在 Adobe Systems 的會議室里碰頭，準(zhǔn)備大體上確定 Ajax 的未來，這個小組就稱為 OpenAjax Alliance。

　　小組做了幾項決定，其中最顯著的就是給自己取了個名字：OpenAjax Alliance。它還決定不把自己組織成一個正式的標(biāo)準(zhǔn)團體，或者 Eclipse Foundation 那樣的開放源碼主導(dǎo)的組織，因此小組自身的形式暫時也是非正式的。小組同意大約每周召開一次電話會議。

　　OpenAjax Alliance 主要關(guān)注三個方面：通過提供互操作性降低采用 Ajax 的風(fēng)險，保證 Ajax 解決方案堅持走開放標(biāo)準(zhǔn)路線和使用開放源碼技術(shù)，保持 Web 的開放性。小組的第一項任務(wù)就是尋求建立和保持 Ajax 工具間互操作性的方法。

　　OpenAjax Alliance 包括 31 家技術(shù)公司，其中有 IBM?、Adobe Systems、Eclipse Foundation、Google、Laszlo Systems Inc.、Oracle、Red Hat Inc. 和 Zend Technologies Ltd.。

　　首先要收集至少 20 幅 .jpg 圖片，并將它們放到一個文件夾中。每個圖片還要有一個保存在單獨縮略圖文件夾中的縮略圖。雖然可使用 GD 軟件包生成縮略圖（請參閱 參考資料），但本文假設(shè)已經(jīng)準(zhǔn)備好了縮略圖。也可使用本文提供的照片和縮略圖（請參閱 下載）。

　　為了完成本文的剩余部分，后面假設(shè)照片保存在 /images 子目錄中，縮略圖則放在 /images/thumbnails 中。可以在代碼中做適當(dāng)?shù)男薷?。此外，我們還假定縮略圖和對應(yīng)的圖像使用相同的名稱。

　　分頁器應(yīng)該傳遞兩個參數(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;
}

　　這個表很簡單，它從索引號 $limit_start 開始遍歷圖片列表。然后放上每個圖片的縮略圖，每五張圖片作為一行。達(dá)到 $limit_start + $limit_step 的時候循環(huán)結(jié)束。

　　該表是目錄列表的可視化表示，因此需要一個函數(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;
}

　　注意：本文后面還要使用 get_file_list() 函數(shù)。有一點很重要，無論何時調(diào)用該函數(shù)，返回的數(shù)組都是不變的。因為提供的實現(xiàn)要進(jìn)行目錄搜索，必須保證目錄中的指定文件不會改變，每次都要按字母順序排序。

　　導(dǎo)航的實現(xiàn)

　　雖然表格列出了目錄中的一些圖像，但用戶還需要一種查看表格中未出現(xiàn)的圖片的方法。要真正實現(xiàn)分頁器的導(dǎo)行，則需要一套標(biāo)準(zhǔn)的鏈接：首頁、上一頁、下一頁和尾頁。

　　清單 3. 分頁器導(dǎo)航

// Append navigation
$output = '＜h5＞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 .= '＜/h5＞';

　　最后還要編寫 get_image_link() 和 get_table_link() 函數(shù)，讓用戶將縮略圖展開成完整的圖像（參見清單 4）。注意，腳本 index.php（以及后面要創(chuàng)建的 expand.php）只在這兩個函數(shù)中調(diào)用。這樣就很容易改變鏈接的功能。事實上在下面與 Sajax 進(jìn)行集成時，只有這兩個函數(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＞';
}

　　放大圖片

　　現(xiàn)在有了一個可用的分頁器為用戶提供一些縮略圖。相冊的第二項功能是允許用戶單擊縮略圖來查看全圖。get_image_link() 函數(shù)調(diào)用了 expand.php 腳本，我們現(xiàn)在就來編寫它。該腳本傳遞用戶希望展開的文件的索引，因此必須在此列出目錄并獲得適當(dāng)?shù)奈募?。隨后的操作就很簡單了，只需創(chuàng)建病輸出 image 標(biāo)記即可。

　　清單 5. get_image 函數(shù)

function get_image ( $index ) {
　$images = get_image_list ( 'images' );

　// Generate navigation

　$output .= '＜img src="images/' . $images[$index] . '" /＞';
　return $output;
}

　　接下來還要提供與分頁器類似的導(dǎo)航機制。“上一張” 導(dǎo)航到編號為 $index-1 的圖像，“下一張” 導(dǎo)航到編號為 $index+1 的圖像，“返回” 則回到分頁器。

　　清單 6. get_image 導(dǎo)航

$output .= '＜h5＞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 .= '＜/h5＞';

　　最后創(chuàng)建一個簡單的 HTML 容器，將其命名為 expand.php。

　　清單 7. get_image 導(dǎo)航

＜!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＞

＜h2＞Creating a simple picture album viewer＜/h2＞
＜?php

$index = isset($_REQUEST['index']) ? $_REQUEST['index'] : 0;
echo get_image($index);

?＞
＜/body＞
＜/html＞

　　這樣我們就完成了相冊。用戶可以看到所有的圖片，而且很容易導(dǎo)航。自然，用戶可以來回切換，甚至能通過書簽功能返回喜歡的圖片。

 
圖 2. 完成的相冊

　　添加 Sajax

　　現(xiàn)在相冊提供了基本的導(dǎo)航功能，目錄中的圖像添加了索引。下面您將看到添加 Sajax 能夠改進(jìn)編程和用戶體驗。

　　這里假設(shè)您對 Ajax 有基本的了解，最好還熟悉 Sajax 的基礎(chǔ)知識（請參閱 參考資料 中的教程）。

　　Sajax、Ajax 與傳統(tǒng) Web 應(yīng)用程序
　
　　現(xiàn)在我們已經(jīng)使用標(biāo)準(zhǔn)的 Web 開發(fā)模型開發(fā)了應(yīng)用程序。兩項主要功能是分頁器和圖像查看器，它們分別對應(yīng)不同的 PHP 文件。參數(shù)作為 HTTP GET 請求傳遞給腳本，腳本直接向 Web 客戶機返回頁面。

圖 3. 在傳統(tǒng)的 Web 應(yīng)用程序中，三個不同的請求調(diào)用了兩個頁面

　　Web 開發(fā)社區(qū)的人都知道，Ajax 允許向服務(wù)器發(fā)出異步的輔助請求，并直接在網(wǎng)頁中顯示結(jié)果（如圖 4 所示）。不幸的是，即便最簡單的 Ajax 應(yīng)用程序?qū)崿F(xiàn)起來也是一項大任務(wù)。因為 Ajax 不是標(biāo)準(zhǔn)化的技術(shù)，Internet Explorer 和其他瀏覽器（如 Firefox、Safari）的實現(xiàn)是不同的。此外，程序員至少要編寫三個函數(shù)才能實現(xiàn)一個功能，這三個函數(shù)是：發(fā)送 HTTP 請求的初始 JavaScript，返回響應(yīng)的 PHP 腳本，以及另一個處理這些響應(yīng)的 JavaScript 函數(shù)。

圖 4. Ajax 應(yīng)用程序負(fù)責(zé)所有的 HTTP 請求

　　建立在 Ajax 庫之上的 Sajax 通過運用簡單的啟發(fā)式方法大大簡化了這一過程：Web 客戶機需要訪問的每個 PHP 函數(shù)都由 Sajax “導(dǎo)出”。如果有一個名為 foo_bar() 的 PHP 函數(shù)，那么 Sajax 會把該函數(shù)導(dǎo)出為 JavaScript 函數(shù) x_foo_bar()。客戶機對 x_foo_bar() 的任何調(diào)用都會自動轉(zhuǎn)發(fā)給服務(wù)器上的 foo_bar()，輸出則傳遞給另一個 JavaScript 函數(shù)。清單 8 中的簡短頁面示范了這種功能。運行這個例子需要下載 Sajax 庫（請參閱 參考資料）。

　　清單 8. Sajax 的應(yīng)用

＜?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＞

　　如果打開清單 8 中的頁面，在輸入框中輸入一些內(nèi)容然后單擊 Enter，那么輸入內(nèi)容就會在一個警告框中顯示出來。但在這個看似簡單的網(wǎng)頁背后，x_foo_bar() JavaScript 函數(shù)將遠(yuǎn)程調(diào)用 foo_bar() 函數(shù)，并把響應(yīng)傳遞給 JavaScript 內(nèi)置函數(shù) alert()。每個 Sajax 導(dǎo)出函數(shù)的最后一個參數(shù)都是一個響應(yīng)處理程序，負(fù)責(zé)處理 foo_bar() 的輸出。

　　這個例子還說明了 Sajax 快速開發(fā)的另一個重要特性：不需要每個函數(shù)都有一個單獨的文件，頁面實際上調(diào)用的是其自身，因此更便于跟蹤函數(shù)的調(diào)用（如圖 5 所示）。x_foo_bar() 函數(shù)直接向頁面發(fā)回 Ajax 請求，在請求中包含函數(shù)名和參數(shù)。關(guān)鍵是 sajax_handle_client_request() 函數(shù)，它截獲所有的 Sajax 調(diào)用并自動對它們進(jìn)行處理。

圖 5. 使用 Sajax 客戶機可通過一個頁面訪問服務(wù)器端的多個函數(shù)

　　將 Sajax 連接到相冊

　　利用剛剛創(chuàng)建的代碼，我們將用 Sajax 迅速把相冊從多頁面應(yīng)用程序轉(zhuǎn)化成活動的 Ajax 應(yīng)用程序。

　　因為相冊主要有兩個函數(shù)，get_table() 和 get_image()，這也是需要用 Sajax 導(dǎo)出的全部函數(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();
?＞

　　對于本文而言，文檔主體部分很簡單。我們將使用 div 和 window 的 id 來顯示服務(wù)器的輸出。

　　清單 10. 顯示服務(wù)器輸出的 div 和 window id

＜body＞
＜h2＞Sajax photo album＜/h2＞
＜div id="window"＞＜/div＞
＜/body＞

　　最后還要編寫 JavaScript 回調(diào)函數(shù)。該例中，因為所有的服務(wù)器輸出都直接輸出到 window div 標(biāo)記，所以可以重復(fù)使用簡單的回調(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＞

　　最后一步是保證應(yīng)用程序中的所有鏈接都是自定義的 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)"。

　　并在相應(yīng)的函數(shù)中做同樣修改：get_image_link() 和 get_table_link()。這樣向 Sajax 的轉(zhuǎn)化就完成了（如圖 6 所示）。所有鏈接都變成了與遠(yuǎn)程 PHP 調(diào)用對應(yīng)的 JavaScript 調(diào)用，PHP 使用 JavaScript 響應(yīng)處理程序 to_window() 直接輸出到頁面。

　　整個應(yīng)用程序都包含在一個頁面中，還可以把其余功能（get_table()、get_image() 等）放在不能從 Web 訪問的單獨的庫文件中。在大多數(shù) Ajax 應(yīng)用程序中，每個發(fā)往服務(wù)器的請求都需要由單獨的腳本處理，或至少需要編寫一個非常龐大的處理程序腳本來重定向請求。將所有這些文件都集中到一起可能非常麻煩。使用 Sajax 永遠(yuǎn)只需要一個文件，在該文件中只需定義我們使用的函數(shù)即可。Sajax 代替了處理程序腳本。

圖 6. 完成的基于 Sajax 的相冊（縮略圖）

　　可以看到 URL 仍然保持不變，并帶來了更多愉快的用戶體驗。window div 顯示在一個灰色的框中，通過 Sajax 生成的內(nèi)容非常清楚。腳本不一定要知道自身或者它在服務(wù)器上的位置，因為所有的鏈接最終都成為直接對頁面自身的 JavaScript 調(diào)用。因此我們的代碼能夠很好的模塊化。我們只需要保持 JavaScript 和 PHP 函數(shù)在同一個頁面上即可，即使頁面位置發(fā)生了變化也沒有關(guān)系。

　　擴展相冊

　　使用 Sajax 把我們的相冊變成活動的 Web 應(yīng)用程序如此輕而易舉，我們要再花點時間添加一些功能，進(jìn)一步說明 Sajax 如何使從服務(wù)器檢索數(shù)據(jù)變得完全透明。我們將為相冊添加元數(shù)據(jù)功能，這樣用戶就能為他們的圖片添加說明。

　　元數(shù)據(jù)

　　沒有上下文說明的相冊是不完整的，比如照片的來源、作者等。為此我們要將圖像集中起來創(chuàng)建一個簡單的 XML 文件。根節(jié)點是 gallery，它包含任意多個 photo 節(jié)點。每個 photo 節(jié)點都通過其 file 屬性來編號。在 photo 節(jié)點中可以使用任意多個標(biāo)記來描述照片，但本例中只使用了 date、locale 和 comment。

　　清單 12. 包含元數(shù)據(jù)的 XML 文件

＜?xml version="1.0"?＞
＜gallery＞
　＜photo file="image01.jpg"＞
　?。糳ate＞August 6, 2006＜/date＞
　?。糽ocale＞Los Angeles, CA＜/locale＞
　?。糲omment＞Here's a photo of my favorite celebrity＜/comment＞
　＜/photo＞
?。紁hoto file="image02.jpg"＞
　?。糳ate＞August 7, 2006＜/date＞
　　＜locale＞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＞

　　文件的解析不在本文討論范圍之列。我們假設(shè)您能夠熟練使用 PHP 中眾多 XML 解析方法中的一種。如果不熟悉的話，建議閱讀 參考資料 中的文章。我們不再浪費時間解釋如何將該文件轉(zhuǎn)化成 HTML，作為一個練習(xí)，讀者可以自己了解下面的代碼如何使用 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;

　　要注意的是，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;
}

　　重新打開頁面將看到服務(wù)器請求的結(jié)果。圖 7 顯示了帶有元數(shù)據(jù)的放大的圖像。

 
圖 7. 使用元數(shù)據(jù)的相冊

感謝各位的閱讀，以上就是“使用AJAX進(jìn)行PHP開發(fā)”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對使用AJAX進(jìn)行PHP開發(fā)這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！