編輯“Php-ajax簡單示例”（章節(jié)）

== 將 Sajax 連接到相冊(cè) ==
 

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

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

Sajax 相冊(cè)的頭部 <br>

＜?php<br>
require("Sajax.php");  <br>

function get_image () { } // Defined later <br>
function get_thumbs_table () { } // Defined later <br>

// Standard Sajax stuff. Use Get, and export two <br>
// main functions to javascript <br>
$sajax_request_type = "GET"; <br>
sajax_init(); <br>
sajax_export("get_thumbs_table", "get_image"); <br>
sajax_handle_client_request(); <br>
?＞  <br>

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

 顯示服務(wù)器輸出的 div 和 window id <br>

 
＜body＞ <br>

＜h1＞Sajax photo album＜/h1＞ <br>

＜div id="window"＞＜/div＞ <br>

＜/body＞  <br>


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


簡單的頭 <br>
 
＜head＞ <br>
＜title＞Creating a Sajax photo album＜/title＞ <br>
＜style type="text/css"＞ <br>
body { text-align: center } <br>
div#window { margin: 0 auto 0 auto; width: 700px; <br>
padding: 10px; border: 1px solid #ccc; background: #eee; } <br>
table.image_table { margin: 0 auto 0 auto; } <br>
table.image_table td { padding: 5px } <br>
table.image_table a { display: block; } <br>
table.image_table img { display: block; width: 120px <br>
padding: 2px; border: 1px solid #ccc; } <br>
img.full { display: block; margin: 0 auto 0 auto; <br>
width: 300px; border: 1px solid #000 } <br>
＜/style＞ <br>

＜script language="javascript"＞ <br>
＜? sajax_show_javascript(); ?＞ <br>

// Outputs directly to the "window" div <br>
function to_window(output) { <br>
　document.getElementById("window").innerHTML = output; <br>
} <br>

window.onload = function() { <br>
　x get table to window); <br>
}; <br>

＜/script＞ <br>
＜/head＞  <br>

　　最后一步是保證應(yīng)用程序中的所有鏈接都是自定義的 Sajax 調(diào)用。只需要取上一節(jié)中的代碼并作如下替換：href="index.php?start=0&step=5" 變?yōu)?，href="expand.php?index=0" 變?yōu)?。 <br>

　　并在相應(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() 直接輸出到頁面。 <br>

　　整個(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 代替了處理程序腳本。  <br>

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


 

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

　　元數(shù)據(jù) <br>

　　沒有上下文說明的相冊(cè)是不完整的，比如照片的來源、作者等。為此我們要將圖像集中起來創(chuàng)建一個(gè)簡單的 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。 <br>

包含元數(shù)據(jù)的 XML 文件 <br>

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

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

 元數(shù)據(jù)函數(shù)<br>

function get_meta_data ( $file ) {<br>

　// Using getimagesize, the server calculates the dimensions<br>
　list($width, $height) = @getimagesize("images/$file");<br>
　$output = "＜p＞W(wǎng)idth: {$width}px, Height: {$height}px＜/p＞";<br>

　// Use SimpleXML package in PHP_v5:<br>
　// http://us3.php.net/manual/en/ref.simplexml.php<br>
　$xml = simplexml_load_file("gallery.xml");<br>

　foreach ( $xml as $photo ) {<br>
　　if ($photo['id'] == $file) {<br>
　　　$output .= !empty($photo-＞date) ? "＜p＞Date taken:{$photo-＞date}＜/p＞" : '';<br>
　　　$output .= !empty($photo-＞locale) ? "＜p＞Location:{$photo-＞locale}＞/p＞" : '';<br>
　　　$output .= !empty($photo-＞comment) ? "＜p＞Comment:{$photo-＞comment}＜/p＞" : '';<br>
　　}<br>
　}<br>
　return $output;   <br>

要注意的是，get_meta_data() 函數(shù)中還使用 getimagesize()（一個(gè)核心 PHP 函數(shù)，不需要 GD）計(jì)算圖像的大小。 <br>
　　再回到 get_image() 函數(shù)，它包含由 get_image_list() 生成的文件名的列表。查找元數(shù)據(jù)只需要將文件名傳遞給該函數(shù)即可。<br>

[[category:PHP教程]]