结合AJAX进行PHP开发之入门

导航的落到实处就算表格列出了目录中的一些图像,但顾客还索要一种查看表格中未现身的图片的点子。要真正落到实处分页器的导行,则须求一套标准的链接:首页、、和尾页。
项目清单 3. 分页器导航// Append navigation$output = ‘h4Showing 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()函数,让客户将缩略图张开成完全的图像。重视,脚本
index.php只在此八个函数中调用。那样就很随便退换链接的功效。事实上在底下与
Sajax 举办集成时,独有那八个函数须求改良。 项目清单 4.
get_image_link、get_table_link 实现function get_table_link (
$title, $start, $step ) { $link = index.php?start=$startstep=$step;
return ‘a href=’%20.%20$link%20.%20” . $title .’/a’;}function get_image_link
( $title, $index 卡塔尔(قطر‎ { $link = expand.php?index=$index; return ‘a href=’ .
$link . ” . $title . ‘/a’;} 放大图片
现在有了一个可用的分页器为顾客提供部分缩略图。相册的第二项成效是承诺客商单击缩略图来查阅全图。get_image_link(卡塔尔国函数调用了 expand.php
脚本,大家未来就来编排它。该脚本传递顾客期望进行的文件的目录,由此必须在那列出目录并获取确切的文本名。随后的操作就很简单了,只需创造病输出
image 标识就能够。 项目清单 5. get_image 函数function get_image ( $index ) {
$images = get_image_list ( ‘images’ ); // Generate navigation $output
.= ‘img src=images/’%20.%20$images[$index]%20.%20′ /’; return $output;}

异步 JavaScript 和 XML(Asynchronous JavaScript and
XML,Ajax)无疑是最风靡的新 Web 本领。本文中大家将完全使用 PHP 和 Simple
Ajax Toolkit (SajaxState of Qatar 创设三个简易的相册作为在线 Web
应用程序。大家率先用专门的学业的 PHP 开采方法编写轻便的相册,然后再用 Sajax
将其改为活动的 Web 应用程序。

1、要有一个规定图片地址的点子:文章中的第一张图纸,可能应用自定义栏目扩张一个自定义值。
2、在前台调用鲜明好的图片:选拔函数的艺术恐怕一向调用图片。

  创办二个简单易行的相册

接着这种思路,大家来落到实处如下:(前提,任何调用最棒都以在LOOP循环中,那样能够轻巧的选用$post值)

  本文将应用二种办法创制一个简短的相册:守旧的 Web 应用程序和依据Sajax 的应用程序。大家将用 PHP
编写三个相册,读取某一目录中的内容,呈现缩略图组成的报表。纵然顾客单击贰个缩略图,就能够全盘展开该图像。因为编写的是金钱观应用程序,所以每一遍单击都会是一个新的
HTTP 央浼,而参数则作为 U福睿斯L 的一局地传递。

1、调用小说中的第一张图纸:使用$post->post_content获得小说内容,然后用特别的议程获得第一张图纸的src值。

  您将学习怎么将 Sajax 库应用于相册,领会怎么选择 Sajax
能够加速应用程序的付出。

preg_match(‘/<img.+src=[‘”]([^'”]+)[‘”].*
/>/i’,$post->post_content,$index_piclink);if(count($index_piclink)
>= 2)$image_src =
$index_piclink[1];if(!strstr($image_src,’ =
false;

  增加四个分页器表

2、调用贰个自定义栏目:在写作品的时候,扩张二个名词为post_thumb的自定义栏目,然后将图纸之处作为值创立它。如meta_key:post_thumb,meta_value:

  访谈相册的客商要求某种火速查看照片的主意。因为不少大照片不易于在一页上海展览中心示,所以须要创建三个分页器
——
每便展现一些些缩略图的轻便表格。还要编写导航,扶持客户在图像列表中来回移动。

$image_src = get_post_meta($post->ID,’post_thumb’,true);
$image_src = trim($image_src) !== ” ? trim($image_src) : false;

图片 1 
图 1. 分页器提供了体现用户照片的一种艺术

3、在小说循环中运用它们

  什么是 OpenAjax Alliance?

if($image_src)echo ‘<img src=”‘.$image_src.'” />’;

  二〇〇七 年 5 月 JavaOne Conference 开端前,29 家公司的意味在 Adobe
Systems 的会议地方里碰头,绸缪大意上明确 Ajax 的前途,那几个小组就叫做
OpenAjax Alliance。

4、把她们做成函数

  小组做了几项决定,此中最醒指标就是给本人取了个名字:OpenAjax
Alliance。它还决定不把温馨组织成一个正经的行业内部协会,或然 Eclipse
Foundation
那样的开放源码主导的团队,因而小组本人的花样权且也是业余的。小组同意差没多少每一周实行壹次电视会议。

function get_thumb_src($size = ‘thumbnail’,$first_pic_in_ctonte =
true){
   global $post;
   $image_src = ”;
   if(function_exists(‘has_post_thumbnail’) &&
has_post_thumbnail()){
       $image_id = get_post_thumbnail_id();
       $image_src =
wp_get_attachment_image_src($image_id,$size);
       $image_src = $image_src[0];
   }else{
       $image_src =
get_post_meta($post->ID,’post_thumb’,$single=true);
       if(!$image_src && $first_pic_in_ctonte){
         
 preg_match(‘/<img.+src=[‘”]([^'”]+)[‘”].*
/>/i’,$post->post_content,$index_piclink);
           if(count($index_piclink) >= 2)$image_src =
$index_piclink[1];
           if(!strstr($image_src,’ =false;
       }
   }
   return $image_src;
}
function the_thumb_src($size = ‘thumbnail’,$first_pic_in_ctonte =
true){
   echo get_thumb_src($size,$first_pic_in_ctonte);
}

  OpenAjax Alliance 重要关注四个地方:通过提供互操作性减少利用 Ajax
的高风险,保险 Ajax 实施方案水滴石穿走开放标准路径和应用开放源码本领,保持 Web
的开放性。小组的率先项职务正是谋求创立和保全 Ajax
工具间互操作性的办法。

本条函数(把它座落functions.php中)实现了对小说缩略图的选料,假如已经有风味图片,则利用特色图片,若无就反省post_thumb自定义栏目,要是也不曾就接受小说第一张图纸,假诺随笔未有图片,就回去false值。在使用时如下:

  OpenAjax Alliance 饱含 31 家手艺公司,在那之中有 IBM?、Adobe
Systems、Eclipse Foundation、谷歌、Laszlo Systems Inc.、Oracle、Red
Hat Inc. 和 Zend Technologies Ltd.。

if(get_thumb_src())the_thumb_src();

  首先要搜聚最少 20 幅 .jpg
图片,并将它们放到两个文书夹中。各样图片还要有二个保留在单身缩略图像和文字件夹中的缩略图。尽管可利用
GD 软件包生成缩略图(请参阅
参考资料),但本文借使已经策动好了缩略图。也可接受本文提供的肖像和缩略图(请参阅
下载)。

如此一来,就落到实处了wordpress使用外链图片作为小说缩略图,如此回顾,你学会了吗?

  为了完花费文的盈余部分,前面要是照片保存在 /images
子目录中,缩略图则坐落于 /images/thumbnails
中。能够在代码中做相符的改变。别的,大家还假定缩略图和对应的图像使用同一的称号。

嗯!对了,除却,引申一个知识点,大家得以动用上边包车型地铁不二等秘书诀应用the_post_thumbnail函数也能够实现应用外链图片的作用。前提是您遵照地点的思绪,写好了叁个函数,作者的完成方式如下:

  分页器应该传递五个参数:start
是依据字母逐条展现的率先幅照片的索引号,step 是展示的肖像数。

1、在functions.php中加入如下代码

  清单 1. 相册查看器

function the_post_thumb($thumb,$post_id,$post_image_id){
   if($thumb == ”){
       $thumb = ‘<img
src=”‘.get_post_meta($post_id,’post_thumb’,true).'” />’;
   }
   return $thumb;
}
add_filter(‘post_thumbnail_html’,’the_post_thumb’,10,3);

/*
* Find a list of images in /images and provide thumbnails
*/
function get_table ( $limit_start = 0, $limit_step = 5 ) {
 $images = get_image_list(‘images’);

2、在调用图片时使用如下代码(文章LOOP中)

 // Generate navigation for Previous and Next buttons
 // Code given below

<?php if(has_post_thumbnail() ||
get_post_meta($post->ID,’post_thumb’) != ”):
?><div><?php the_post_thumbnail(‘post-thumbnail’);
?></div><?php endif; ?>

 $output .= ‘<table class=”image_table”>’;
 $columns = 5;
 foreach ($images as $index => $image) {

您能够窥见,作者只行使了扩大自定义栏目post_thumb的点子,而还没扩充任品第一张图的功效,那是出于小编设想到小说第一张图大概不是本人想要的图形。

  // Begin directory listing at item number $limit_start
  if ( $index < $limit_start ) continue;

除却,大家竟然仍然是能够使用javascript代码,通过ajax获取图片,再在前台通过退换成分内容的法子完成该效用。

  // 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/’%20.%20$image%20.%20′” />’;
  $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 的时候循环甘休。

  该表是目录列表的可视化表示,由此要求二个函数列出目录中的全部图像。清单1 中的 get_file_list(卡塔尔国 函数用索引数组再次来到 /images
目录中的全体图片列表。上边是三个演示完毕。

  清单 2. get_file_list 实现

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(State of Qatar函数。有有个别很入眼,无论几时调用该函数,再次来到的数组都以不改变的。因为提供的落到实处要开展目录搜索,必需确定保证目录中的钦命文件不会转移,每一次都要按字母逐条排序。

  导航的实现

  即便表格列出了目录中的一些图像,但客户还亟需一种查看表格中未现身的图片的艺术。要真正落实分页器的导行,则需求一套标准的链接:首页、上一页、下一页和尾页。

  清单 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>’;

  最终还要编写 get_image_link() 和 get_table_link(卡塔尔(قطر‎函数,让顾客将缩略图展开成完全的图像(参见清单 4)。注意,脚本
index.php(甚至背后要创设的
expand.php)只在此七个函数中调用。那样就十分轻易改造链接的功能。事实上在底下与
Sajax 进行集成时,独有那多个函数必要修正。

  清单 4. get_image_link、get_table_link 实现

function get_table_link ( $title, $start, $step ) {
 $link = “index.php?start=$start&step=$step”;
 return ‘<a href=”‘%20.%20$link%20.%20′”>’ . $title .’</a>’;
}

function get_image_link ( $title, $index ) {
 $link = “expand.php?index=$index”;
 return ‘<a href=”‘%20.%20$link%20.%20′”>’ . $title . ‘</a>’;
}

  加大图片

  将来有了一个可用的分页器为顾客提供一些缩略图。相册的第二项意义是允许客商单击缩略图来查阅全图。get_image_link(卡塔尔(قطر‎函数调用了 expand.php
脚本,大家现在就来编排它。该脚本传递客户期待进行的公文的目录,因此必需在这里列出目录并赢得确切的文书名。随后的操作就很简单了,只需创立病输出
image 标识就可以。

  清单 5. get_image 函数

function get_image ( $index ) {
 $images = get_image_list ( ‘images’ );

 // Generate navigation

 $output .= ‘<img src=”images/’%20.%20$images[$index]%20.%20′” />’;
 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>’;

  最终创设三个简便的 HTML 容器,将其取名称为 expand.php。

  清单 7. get_image 导航

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

<html xmlns=”
<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 
图 2. 做到的相册

  添加 Sajax

  未来相册提供了主旨的领航功能,目录中的图像加多了目录。下边您将见到增添Sajax 能够修正编制程序和顾客体验。

  这里若是你对 Ajax 有中央的刺探,最棒还熟习 Sajax 的幼功知识(请参阅
参谋资料 中的学科)。

  Sajax、Ajax 与历史观 Web 应用程序
 
  今后我们早已运用标准的 Web
开辟模型开辟了应用程序。两项首要作用是分页器和图像查看器,它们各自对应区别的
PHP 文件。参数作为 HTTP GET 必要传递给脚本,脚本直接向 Web
客商机再次回到页面。

图片 3
图 3. 在人生观的 Web 应用程序中,多少个例外的央求调用了多个页面

  Web 开采社区的人都明白,Ajax
允许向服务器发出异步的拉扯乞请,并一向在网页中体现结果(如图 4
所示)。不幸的是,固然最简单易行的 Ajax 应用程序达成起来也是一项大职分。因为
Ajax 不是典型的技艺,Internet Explorer 和其余浏览器(如
Firefox、Safari)的兑现是莫衷一是的。别的,工程师起码要编写八个函数本事促成一个意义,那多个函数是:发送
HTTP 诉求的初步 JavaScript,重返响应的 PHP
脚本,以致另二个甩卖这个响应的 JavaScript 函数。

图片 4
图 4. Ajax 应用程序担负全部的 HTTP 须要

  构建在 Ajax 库之上的 Sajax
通过运用轻易的启示式方法大大简化了这一进度:Web 客商机要求拜候的各样 PHP
函数都由 Sajax “导出”。假若有三个名字为 foo_bar(卡塔尔 的 PHP 函数,那么 Sajax
会把该函数导出为 JavaScript 函数 x_foo_bar(卡塔尔国。顾客机对 x_foo_bar(State of Qatar的任何调用都会自动转载给服务器上的 foo_bar(卡塔尔,输出则传递给另一个JavaScript 函数。清单 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>

  如若张开清单 8 中的页面,在输入框中输入一些内容然后单击
Enter,那么输入内容就能够在多个警戒框中展现出来。但在此个相通简单的网页背后,x_foo_bar()JavaScript 函数将远程调用 foo_bar(卡塔尔 函数,并把响应传递给 JavaScript
内置函数 alert(卡塔尔国。每种 Sajax
导出函数的末段一个参数都以三个响应管理程序,肩负管理 foo_bar()
的输出。

  那些例子还表明了 Sajax
快速支付的另多少个至关心拥戴要特征:没有要求各类函数都有多少个单身的公文,页面实际上调用的是其本身,因而更方便追踪函数的调用(如图
5 所示)。x_foo_bar(卡塔尔 函数直接向页面发回 Ajax
央求,在伸手中包括函数名和参数。关键是 sajax_handle_client_request(State of Qatar函数,它截获全数的 Sajax 调用并活动对它们实行管理。

图片 5
图 5. 施用 Sajax 顾客机可通过多少个页面访问服务器端的八个函数

 

  将 Sajax 连接到相册

  利用刚刚创造的代码,大家将用 Sajax
连忙把相册从多页面应用程序转产生活动的 Ajax 应用程序。

  因为相册重要有三个函数,get_table() 和 get_image(卡塔尔国,那也是急需用
Sajax 导出的万事函数。事实上,为了通过 Sajax
调用那么些函数,这个函数自身基本上无需修改,比异常的快大家就能够看出,大家只需求改善生成的链接就可以。

  项目清单 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
来展现服务器的输出。

  清单 10. 显示服务器输出的 div 和 window id

<body>
<h1>Sajax photo album</h1>
<div id=”window”></div>
</body>

  最终还要编写 JavaScript
回调函数。该例中,因为兼具的服务器输出都直接出口到 window div
标识,所以能够重复使用轻易的回调函数。将回调函数增多到 Sajax
函数调用中,就能够收获头(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>

  最后一步是承保应用程序中的全体链接都以自定义的 Sajax
调用。只须要取上一节中的代码并作如下替换:href=”index.php?start=0&step=5″
变为 onclick=”x_get_table(0, 5,
to_window)”,href=”expand.php?index=0″ 变为 onclick=”x_get_image(0,
to_window)”。

  并在相应的函数中做相像校勘:get_image_link() 和
get_table_link(卡塔尔。那样向 Sajax 的转载就成功了(如图 6
所示)。全部链接都成为了与远程 PHP 调用对应的 JavaScript 调用,PHP 使用
JavaScript 响应管理程序 to_window(卡塔尔(قطر‎ 直接出口到页面。

  整个应用程序都含有在二个页面中,还足以把任何作用(get_table()、get_image(卡塔尔等)放在不能够从 Web 访谈的独门的库文件中。在超级多 Ajax
应用程序中,各个发往服务器的哀告都亟需由独立的台本管理,或起码需求编写制定一个不胜宏大的管理程序脚本来重定向乞求。将全数那几个文件都聚焦到同盟可能极其麻烦。使用
Sajax 永恒只供给贰个文书,在该文件中只需定义大家利用的函数就能够。Sajax
代替了管理程序脚本。

图片 6
图 6. 完毕的依照 Sajax 的相册(缩略图)

  能够看来 UOdysseyL 依然维持不改变,并带来了更加多高兴的客户体验。window div
显示在二个银色的框中,通过 Sajax
生成的剧情十二分掌握。脚本不显明要了然笔者或许它在服务器上的地点,因为具备的链接最终都形成直接对页面自己的
JavaScript 调用。因而大家的代码能够很好的模块化。大家只供给保持
JavaScript 和 PHP
函数在同二个页面上就能够,就算页面位置暴发了转移也绝非提到。

 

  扩充相册

  使用 Sajax 把我们的相册形成活动的 Web
应用程序如此轻便,我们要再花点时间拉长一些效果,进一层证实 Sajax
怎样使从服务器检索数据变得完全透明。大家将为相册添日币数据成效,那样客商就可感到他们的图形增加表达。

  元数据

  未有上下文表明的相册是缺损的,比方照片的来源、作者等。为此咱们要将图像聚焦起来创制二个简便的
XML 文件。根节点是 gallery,它满含自由三个 photo 节点。各类 photo
节点都经过其 file 属性来编号。在 photo
节点中能够应用猖獗八个标识来描述照片,但本例中只使用了 date、locale 和
comment。

  清单 12. 分包元数据的 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>

  文件的剖析不在本文切磋范围之列。大家要是您能够熟悉使用 PHP 中过多
XML 剖析方法中的一种。如若不熟习的话,建议阅读 仿效资料
中的稿子。大家不再浪费时间解释怎么样将该公文转载成
HTML,作为三个练习,读者能够本人驾驭上边包车型地铁代码怎么样使用 XML 文件并生成
HTML。项目清单 13 中的代码应用了 PHP V5 中自带的 SimpleXML 包。

  清单 13. 元数据函数

function get_meta_data ( $file ) {

 // Using getimagesize, the server calculates the dimensions
 list($width, $height) = @getimagesize(“images/$file”);
 $output = “<p>Width: {$width}px, Height: {$height}px</p>”;

 // Use SimpleXML package in PHP_v5:
 //
 $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(卡塔尔(قطر‎ 函数中还接受 getimagesize(卡塔尔国(一个大旨PHP 函数,无需 GD)总括图像的尺寸。

  再回到 get_image(卡塔尔(قطر‎ 函数,它饱含由 get_image_list(卡塔尔国生成的公文名的列表。查找元数据只须求将文件名传递给该函数就可以。

  项目清单 14. 添美元数据

function get_image ( $index ) {
 $images = get_image_list ( ‘images’ );

 // …

 $output .= ‘<img src=”images/’%20.%20$images[$index]%20.%20′” />’;
 $output .= ‘<div id=”meta_data”>’ .
 get_meta_data( $images[$index] ) . ‘</div>’;
 return $output;
}

  重新张开页面将看到服务器须求的结果。图 7
展现了含蓄元数据的拓展的图像。

图片 7 
图 7. 接收元数据的相册

  结束语

  大家见到,使用 Sajax
能够裁撤顾客机和服务器之间的拦Land Rover,程序员能够举办无缝远程函数调用而不用想念传输层、HTTP
GET 和 POST 央求。大家得以花愈来愈多时间编写提供数据的 PHP
脚本以致表示层和调节层的
JavaScript。在这里个相册例子中,大家让顾客机直接连接到图像数据库。通过丰裕轻松的元数据,大家来看让顾客一贯访谈服务器上的新闻是何其轻松,没有必要担忧协议的难题。

  与持有的 Ajax
应用程序同样,大家的相册也许有一个沉重的症结:没有应用浏览器的
“访谈历史”,因为破坏了后退开关的效应。在 “利用 PHP 开辟 Ajax 应用程序”
体系的第 2
有的中,大家将通过完结历史记录缓冲和情景追踪机制来杀绝那些标题。

JavaScript 和 XML(Asynchronous JavaScript
and XML,Ajax)无疑是最流行的新 Web 本事。本文中大家将完全使用 PHP 和
Simple Ajax Toolkit (Sajax卡塔尔国 创造一…

发表评论

电子邮件地址不会被公开。 必填项已用*标注