編輯“Php-ajax簡(jiǎn)單示例”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>導(dǎo)航:</strong> [[PHP#PHP教程|上一頁(yè)]] | {{template:開(kāi)發(fā)語(yǔ)言導(dǎo)航}}</span>
<div style="clear:both;"></div>
==xAjax的使用步驟==

xajax是一個(gè)開(kāi)源的、針對(duì)PHP的Ajax代碼庫(kù)。它的使用不算太難，從官方的說(shuō)明來(lái)看，只需要七步就可以了: <br>

首先，在php文件頭包含xajax類 <br>

require_once("xajax.inc.php");  <br>
接下來(lái)，創(chuàng)建xajax對(duì)象 <br>

$xajax = new xajax();  <br>
注冊(cè)你的函數(shù)。這個(gè)函數(shù)用于在服務(wù)器端處理相應(yīng)的客戶端請(qǐng)求，并返回指定內(nèi)容。 <br>

$xajax->registerFunction("myFunction");  <br>
編寫(xiě)上述函數(shù)的代碼。根據(jù)你要執(zhí)行的功能 <br>

function myFunction($arg)  <br>
{ 
  // 在函數(shù)中使用從服務(wù)器或客戶端得到的參數(shù)。  <br>
  $newContent = $arg;  <br>
    
  // 創(chuàng)建xajaxResponse對(duì)象。  <br>
  // 這個(gè)是用于被客戶端調(diào)用并返回相應(yīng)內(nèi)容的函數(shù)中所必須定義的。  <br>
  $objResponse = new xajaxResponse();  <br>
    
  // 使用xajaxResponse對(duì)象中的方法，執(zhí)行不同的操作。  <br>
  $objResponse->addAssign("SomeElementId","innerHTML", $newContent);  <br>
    
  // 向客戶端返回內(nèi)容。  <br>
  // 客戶端的頁(yè)面將在不刷新的情況下被重寫(xiě)。  <br>
  return $objResponse->getXML();  <br>
}  <br>
打開(kāi)請(qǐng)求控制器，所以請(qǐng)求都將交由xajax系統(tǒng)來(lái)處理。 <br>
  
$xajax->processRequests();  <br>
在”head”標(biāo)簽中加入下列代碼，用于在頁(yè)面中生成必要的Javascript腳本。 <br>

<?php $xajax->printJavascript(); ?> <br>
最后，在頁(yè)面中有事件發(fā)生時(shí)，調(diào)用你在服務(wù)器端定義的函數(shù)來(lái)進(jìn)行處理就可以了。這里是名為myFunction的函數(shù)。注意，調(diào)用時(shí)，函數(shù)前必須加xajax_前綴。 <br>

<div id="SomeElementId"></div>   <br>
<button onclick="xajax_myFunction(SomeArgument);">   <br>
這樣，一個(gè)具有流行的Ajax效果的頁(yè)面的做好了。怎么樣，不復(fù)雜吧? 實(shí)際上，xajax還提供大量的方法，利用它們，你就可以很容易對(duì)頁(yè)面進(jìn)行操作了。  <br>


----

==Ajax簡(jiǎn)單實(shí)例==
異步 Javascript 和 XML（Asynchronous Javascript and XML，Ajax）無(wú)疑是最流行的新 Web 技術(shù)。本文中我們將完全使用 PHP 和 Simple Ajax Toolkit (Sajax) 創(chuàng)建一個(gè)簡(jiǎn)單的相冊(cè)作為在線 Web 應(yīng)用程序。我們首先用標(biāo)準(zhǔn)的 PHP 開(kāi)發(fā)方法編寫(xiě)簡(jiǎn)單的相冊(cè)，然后再用 Sajax 將其變成活動(dòng)的 Web 應(yīng)用程序。

結(jié)合AJAX進(jìn)行PHP開(kāi)發(fā)之入門(mén)(1)異步 Javascript 和 XML（Asynchronous Javascript and XML，Ajax）無(wú)疑是最流行的新 Web 技術(shù)。本文中我們將完全使用 PHP 和 Simple Ajax Toolkit (Sajax) 創(chuàng)建一個(gè)簡(jiǎn)單的相冊(cè)作為在線 Web 應(yīng)用程序。我們首先用標(biāo)準(zhǔn)的 PHP 開(kāi)發(fā)方法編寫(xiě)簡(jiǎn)單的相冊(cè)，然后再用 Sajax 將其變成活動(dòng)的 Web 應(yīng)用程序。

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

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

添加一個(gè)分頁(yè)器表 <br>

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





----

== 什么是 OpenAjax Alliance ==


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


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


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


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


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


　　為了完成本文的剩余部分，后面假設(shè)照片保存在 /images 子目錄中，縮略圖則放在 /images/thumbnails 中?？梢栽诖a中做適當(dāng)?shù)男薷摹４送?，我們還假定縮略圖和對(duì)應(yīng)的圖像使用相同的名稱。<br>


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


----

　　
== 清單 ==
 1. 相冊(cè)查看器<br>


/*<br>

* Find a list of images in /images and provide thumbnails<br>

*/<br>

function get_table ( $limit_start = 0, $limit_step = 5 ) {<br>

　$images = get_image_list('images');<br>


　// Generate navigation for Previous and Next buttons<br>

　// Code given below<br>


　$output .= '＜table class="image_table"＞';<br>

　$columns = 5;<br>

　foreach ($images as $index =＞ $image) {<br>


　　// Begin directory listing at item number $limit_start<br>

　　if ( $index ＜ $limit_start ) continue;<br>


　　// End directory listing at item number $limit_end<br>

　　if ( $index ＞= $limit_start + $limit_step ) continue;<br>


　　// Begin column<br>

　　if ( $index - $limit_start % $columns == 0 ) {<br>

　　　$output .= '＜tr＞';<br>

　　}<br>


　　// Generate link to blown up image (see below)<br>

　　$thumbnail = '＜img src="thumbnails/' . $image . '" /＞';<br>

　　$output .= '＜td＞' . get_image_link($thumbnail, $index) . '＜/td＞';<br>


　　// Close column<br>

　　if ( $index - $limit_start % $columns == $columns - 1 ) {<br>

　　　$output .= '＜/tr＞';<br>

　　}<br>

　}<br>


　$output .= '＜/table＞';<br>


　return $nav . $output;<br>

} <br>


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


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


　　清單 2. get_file_list 實(shí)現(xiàn)<br>


function get_image_list ( $image_dir ) {<br>

　$d = dir($image_dir);<br>

　$files = array();<br>

　if ( !$d ) return null;<br>


　while (false !== ($file = $d-＞read())) {<br>

　　// getimagesize returns true only on valid images<br>

　　if ( @getimagesize( $image_dir . '/' . $file ) ) {<br>

　　　$files[] = $file;<br>

　　} <br>

　} <br>

　$d-＞close(); <br>

　return $files; <br>

}  <br>


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



----

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


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

分頁(yè)器導(dǎo)航<br>

// Append navigation<br>
$output = '＜h4＞Showing items ' . $limit_start . '-' .<br>
min($limit_start + $limit_step - 1, count($images)) .<br>
' of ' . count($images) . '＜br /＞';<br>

$prev_start = max(0, $limit_start - $limit_step);<br>
if ( $limit_start ＞ 0 ) {<br>
　$output .= get_table_link('＜＜', 0, $limit_step);<br>
　$output .= ' | ' . get_table_link('Prev',<br>
　$prev_start, $limit_step);<br>
} else {<br>
　$output .= '＜＜ | Prev';<br>
}<br>

// Append next button<br>
$next_start = min($limit_start + $limit_step, count($images));<br>
if ( $limit_start + $limit_step ＜ count($images) ) {<br>
　$output .= ' | ' . get_table_link('Next',$next_start, $limit_step);<br>
　$output .= ' | ' . get_table_link('＞＞',(count($images) - $limit_step), $limit_step);<br>
} else {<br>
　$output .= ' | Next | ＞＞';<br>
}<br>

$output .= '＜/h4＞'; <br>

　　最后還要編寫(xiě) get_image_link() 和 get_table_link() 函數(shù)，讓用戶將縮略圖展開(kāi)成完整的圖像（參見(jiàn)清單 4）。注意，腳本 index.php（以及后面要?jiǎng)?chuàng)建的 expand.php）只在這兩個(gè)函數(shù)中調(diào)用。這樣就很容易改變鏈接的功能。事實(shí)上在下面與 Sajax 進(jìn)行集成時(shí)，只有這兩個(gè)函數(shù)需要修改。  <br>

get_image_link、get_table_link 實(shí)現(xiàn)<br>

function get_table_link ( $title, $start, $step ) {<br>
　$link = "index.php?start=$start&step=$step";<br>
　return '＜a href="' . $link . '"＞' . $title .'＜/a＞';<br>
}<br>

function get_image_link ( $title, $index ) {<br>
　$link = "expand.php?index=$index";<br>
　return '＜a href="' . $link . '"＞' . $title . '＜/a＞'; <br>
}  <br>
　放大圖片  <br>

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

get_image 函數(shù) <br>

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

　// Generate navigation   <br>
　$output .= '＜img src="images/' . $images[$index] . '" /＞'; <br>
　return $output; <br>
}  <br>

　　接下來(lái)還要提供與分頁(yè)器類似的導(dǎo)航機(jī)制?！吧弦粡垺?導(dǎo)航到編號(hào)為 $index-1 的圖像，“下一張” 導(dǎo)航到編號(hào)為 $index+1 的圖像，“返回” 則回到分頁(yè)器。  <br>

get_image 導(dǎo)航<br>

$output .= '＜h4＞Viewing image ' . $index .' of ' . count($images) . '＜br /＞';<br>

if ( $index ＞ 0 ) {<br>
　$output .= get_image_link('＜＜', 0);<br>
　$output .= ' | ' . get_image_link('Prev', $index-1);<br>
} else {<br>
　$output .= '＜＜ | Prev';<br>
}<br>

$output .= ' | ' . get_table_link('Up', $index, 5);<br>

if ( $index ＜ count($images) ) {<br>
　$output .= ' | ' . get_image_link('Next', $index+1);<br>
　$output .= ' | ' . get_image_link('＞＞', count($images));<br>
} else {<br>
　$output .= ' | Next | ＞＞';<br>
}<br>

$output .= '＜/h4＞';  <br>

　　最后創(chuàng)建一個(gè)簡(jiǎn)單的 HTML 容器，將其命名為 expand.php。  <br>

get_image 導(dǎo)航<br>


＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br>

"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"＞<br>

＜html xmlns="http://www.w3.org/1999/xhtml"＞<br>

＜head＞<br>

＜title＞Creating a simple picture album viewer＜/title＞<br>


＜style type="text/css"＞<br>

body { text-align: center }<br>

table.image_table { margin: 0 auto 0 auto; width: 700px;<br>

padding:10px; border: 1px solid #ccc; background: #eee; }<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>

＜/style＞<br>


＜/head＞<br>

＜body＞<br>


＜h1＞Creating a simple picture album viewer＜/h1＞<br>

＜?php<br>


$index = isset($_REQUEST['index']) ? $_REQUEST['index'] : 0;<br>

echo get_image($index);<br>


?＞<br>

＜/body＞<br>

＜/html＞  
<br> 
　　這樣我們就完成了相冊(cè)。用戶可以看到所有的圖片，而且很容易導(dǎo)航。自然，用戶可以來(lái)回切換，甚至能通過(guò)書(shū)簽功能返回喜歡的圖片  <br>



----

== 添加 Sajax ==


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

　　這里假設(shè)您對(duì) Ajax 有基本的了解，最好還熟悉 Sajax 的基礎(chǔ)知識(shí)。 <br>

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


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


　　建立在 Ajax 庫(kù)之上的 Sajax 通過(guò)運(yùn)用簡(jiǎn)單的啟發(fā)式方法大大簡(jiǎn)化了這一過(guò)程：Web 客戶機(jī)需要訪問(wèn)的每個(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è)面示范了這種功能。運(yùn)行這個(gè)例子需要下載 Sajax 庫(kù)。 <br>


Sajax 的應(yīng)用 <br>

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

function foo_bar ( $param ) { <br>
　return "You typed: $param"; <br>
} <br>

$sajax_request_type = "GET"; // Set HTTP request type to GET <br>
sajax_init(); // Prepare Sajax <br>
sajax_export("foo_bar"); // foo_bar can now be called by client <br>
sajax_handle_client_request(); // Discussed below <br>
?＞ <br>
＜html＞ <br>
＜head＞ <br>
＜script language="javascript"＞ <br>
＜? sajax_show_javascript(); ?＞ <br>
＜/script＞ <br>
＜/head＞ <br>
＜body＞ <br>
＜form ＞ <br>
＜input type="text" name="input" /＞ <br>
＜/form＞ <br>
＜/body＞ <br>
＜/html＞   <br>


如果打開(kāi)Sajax 的應(yīng)用 的頁(yè)面，在輸入框中輸入一些內(nèi)容然后單擊 Enter，那么輸入內(nèi)容就會(huì)在一個(gè)警告框中顯示出來(lái)。但在這個(gè)看似簡(jiǎn)單的網(wǎng)頁(yè)背后，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() 的輸出。 <br>

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



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

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

　　因?yàn)橄鄡?cè)主要有兩個(gè)函數(shù)，get_table() 和 get_image()，這也是需要用 Sajax 導(dǎo)出的全部函數(shù)。事實(shí)上，為了通過(guò) 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ì)于本文而言，文檔主體部分很簡(jiǎn)單。我們將使用 div 和 window 的 id 來(lái)顯示服務(wù)器的輸出。  <br>

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

 
＜body＞ <br>

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

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

＜/body＞  <br>


　　最后還要編寫(xiě) 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）。  <br>


簡(jiǎn)單的頭 <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() 直接輸出到頁(yè)面。 <br>

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

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


 

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

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

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

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

＜?xml version="1.0"?＞ <br>
＜gallery＞ <br>
　＜photo file="image01.jpg"＞ <br>
　?。糳ate＞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>
　?。糽ocale＞San Francisco, CA＜/locale＞ <br>
　?。糲omment＞In SF, we got to ride the street cars＜/comment＞ <br>
?。?photo＞ <br>
?。紁hoto file="image03.jpg"＞ <br>
　?。糳ate＞August 8, 2006＜/date＞ <br>
　?。糽ocale＞Portland, OR＜/locale＞ <br>
　?。糲omment＞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]]  [[category:MYSQL]]
@@ 第543行： / 第543行： @@
 要注意的是，get_meta_data() 函數(shù)中還使用 getimagesize()（一個(gè)核心 PHP 函數(shù)，不需要 GD）計(jì)算圖像的大小。 <br>
 　　再回到 get_image() 函數(shù)，它包含由 get_image_list() 生成的文件名的列表。查找元數(shù)據(jù)只需要將文件名傳遞給該函數(shù)即可。<br>
-?
+[[category:PHP]]? [[category:MYSQL]]
-[[category:PHP教程]]