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

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

創(chuàng)新互聯(lián)服務(wù)緊隨時(shí)代發(fā)展步伐，進(jìn)行技術(shù)革新和技術(shù)進(jìn)步，經(jīng)過十余年的發(fā)展和積累，已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計(jì)師、專業(yè)的網(wǎng)站實(shí)施團(tuán)隊(duì)以及高素質(zhì)售后服務(wù)人員，并且完全形成了一套成熟的業(yè)務(wù)流程，能夠完全依照客戶要求對(duì)網(wǎng)站進(jìn)行網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、建設(shè)、維護(hù)、更新和改版，實(shí)現(xiàn)客戶網(wǎng)站對(duì)外宣傳展示的首要目的，并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。

創(chuàng)建一個(gè)簡(jiǎn)單的相冊(cè)

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

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

添加一個(gè)分頁器表

訪問相冊(cè)的用戶需要某種快速查看照片的方法。因?yàn)楹芏啻笳掌蝗菀自谝豁撋巷@示，所以需要?jiǎng)?chuàng)建一個(gè)分頁器 —— 每次顯示少量縮略圖的簡(jiǎn)單表格。還要編寫導(dǎo)航，幫助用戶在圖像列表中來回移動(dòng)。

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

什么是 OpenAjax Alliance？

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

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

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

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

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

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

分頁器應(yīng)該傳遞兩個(gè)參數(shù)：start 是按照字母順序顯示的第一幅照片的索引號(hào)，step 是顯示的照片數(shù)。

清單 1. 相冊(cè)查看器

/*
* 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;
}

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

該表是目錄列表的可視化表示，因此需要一個(gè)函數(shù)列出目錄中的所有圖像。清單 1 中的 get_file_list() 函數(shù)用索引數(shù)組返回 /images 目錄中的所有圖片列表。下面是一個(gè)示例實(shí)現(xiàn)。

清單 2. get_file_list 實(shí)現(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ǎn)很重要，無論何時(shí)調(diào)用該函數(shù)，返回的數(shù)組都是不變的。因?yàn)樘峁┑膶?shí)現(xiàn)要進(jìn)行目錄搜索，必須保證目錄中的指定文件不會(huì)改變，每次都要按字母順序排序。

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

雖然表格列出了目錄中的一些圖像，但用戶還需要一種查看表格中未出現(xiàn)的圖片的方法。要真正實(shí)現(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（以及后面要?jiǎng)?chuàng)建的 expand.php）只在這兩個(gè)函數(shù)中調(diào)用。這樣就很容易改變鏈接的功能。事實(shí)上在下面與 Sajax 進(jìn)行集成時(shí)，只有這兩個(gè)函數(shù)需要修改。

清單 4. get_image_link、get_table_link 實(shí)現(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)在有了一個(gè)可用的分頁器為用戶提供一些縮略圖。相冊(cè)的第二項(xiàng)功能是允許用戶單擊縮略圖來查看全圖。get_image_link() 函數(shù)調(diào)用了 expand.php 腳本，我們現(xiàn)在就來編寫它。該腳本傳遞用戶希望展開的文件的索引，因此必須在此列出目錄并獲得適當(dāng)?shù)奈募?。隨后的操作就很簡(jiǎn)單了，只需創(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)航機(jī)制。“上一張” 導(dǎo)航到編號(hào)為 $index-1 的圖像，“下一張” 導(dǎo)航到編號(hà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)建一個(gè)簡(jiǎn)單的 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＞

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

 
圖 2. 完成的相冊(cè)

添加 Sajax

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

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

Sajax、Ajax 與傳統(tǒng) Web 應(yīng)用程序

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

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

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

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

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

清單 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)容就會(huì)在一個(gè)警告框中顯示出來。但在這個(gè)看似簡(jiǎn)單的網(wǎng)頁背后，x_foo_bar() JavaScript 函數(shù)將遠(yuǎn)程調(diào)用 foo_bar() 函數(shù)，并把響應(yīng)傳遞給 JavaScript 內(nèi)置函數(shù) alert()。每個(gè) Sajax 導(dǎo)出函數(shù)的最后一個(gè)參數(shù)都是一個(gè)響應(yīng)處理程序，負(fù)責(zé)處理 foo_bar() 的輸出。

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

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

將 Sajax 連接到相冊(cè)

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

因?yàn)橄鄡?cè)主要有兩個(gè)函數(shù)，get_table() 和 get_image()，這也是需要用 Sajax 導(dǎo)出的全部函數(shù)。事實(shí)上，為了通過 Sajax 調(diào)用這些函數(shù)，這些函數(shù)本身基本上不需要修改，很快我們就會(huì)看到，我們只需要修改生成的鏈接即可。

清單 9. Sajax 相冊(cè)的頭部

＜?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();
?＞

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

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

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

最后還要編寫 JavaScript 回調(diào)函數(shù)。該例中，因?yàn)樗械姆?wù)器輸出都直接輸出到 window div 標(biāo)記，所以可以重復(fù)使用簡(jiǎn)單的回調(diào)函數(shù)。將回調(diào)函數(shù)添加到 Sajax 函數(shù)調(diào)用中，就可以得到頭（head）。

清單 11. 簡(jiǎn)單的頭

＜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)用對(duì)應(yīng)的 JavaScript 調(diào)用，PHP 使用 JavaScript 響應(yīng)處理程序 to_window() 直接輸出到頁面。

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

圖 6. 完成的基于 Sajax 的相冊(cè)（縮略圖）

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

擴(kuò)展相冊(cè)

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

元數(shù)據(jù)

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

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

＜?xml version="1.0"?＞
＜gallery＞
＜photo file="image01.jpg"＞
＜date＞August 6, 2006＜/date＞
＜locale＞Los Angeles, CA＜/locale＞
＜comment＞Here's a photo of my favorite celebrity＜/comment＞
＜/photo＞
＜photo file="image02.jpg"＞
＜date＞August 7, 2006＜/date＞
＜locale＞San Francisco, CA＜/locale＞
＜comment＞In SF, we got to ride the street cars＜/comment＞
＜/photo＞
＜photo file="image03.jpg"＞
＜date＞August 8, 2006＜/date＞
＜locale＞Portland, OR＜/locale＞
＜comment＞Time to end our road trip!＜/comment＞
＜/photo＞
＜/gallery＞

文件的解析不在本文討論范圍之列。我們假設(shè)您能夠熟練使用 PHP 中眾多 XML 解析方法中的一種。如果不熟悉的話，建議閱讀 參考資料 中的文章。我們不再浪費(fèi)時(shí)間解釋如何將該文件轉(zhuǎn)化成 HTML，作為一個(gè)練習(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()（一個(gè)核心 PHP 函數(shù)，不需要 GD）計(jì)算圖像的大小。

再回到 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ù)器請(qǐng)求的結(jié)果。圖 7 顯示了帶有元數(shù)據(jù)的放大的圖像。

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

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

本文名稱：使用AJAX進(jìn)行PHP開發(fā)
網(wǎng)頁URL：http://bm7419.com/article34/gijdse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、企業(yè)建站、、品牌網(wǎng)站設(shè)計(jì)、虛擬主機(jī)、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)