Posts Tagged ‘ajax’

php

2009/11/15

结合AJAX进行PHP开发之入门(5)

扩展相册

使用 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:
// 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() 函数中还使用 getimagesize()（一个核心 PHP 函数，不需要 GD）计算图像的大小。

再回到 get_image() 函数，它包含由 get_image_list() 生成的文件名的列表。查找元数据只需要将文件名传递给该函数即可。

清单 14. 添加元数据

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

重新打开页面将看到服务器请求的结果。图 7 显示了带有元数据的放大的图像。

结束语

我们看到，使用 Sajax 可以消除客户机和服务器之间的障碍，程序员能够进行无缝远程函数调用而不用担心传输层、HTTP GET 和 POST 请求。我们可以花更多时间编写提供数据的 PHP 脚本以及表示层和控制层的 Javas

cript。在这个相册例子中，我们让客户机直接连接到图像数据库。通过添加简单的元数据，我们看到让用户直接访问服务器上的信息是多么简单，无需担心协议的问题。

与所有的 Ajax 应用程序一样，我们的相册也有一个致命的弱点：没有使用浏览器的 “访问历史”，因为破坏了后退按钮的功能。在 “利用 PHP 开发 Ajax 应用程序” 系列的第 2 部分中，我们将通过实现历史记录缓冲和状态跟踪机制来解决这个问题。

php

结合AJAX进行PHP开发之入门(4)

Tags: ajax, php, 技术文章

将 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＞

最后还要编写 Javas

cript 回调函数。该例中，因为所有的服务器输出都直接输出到 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″ 变为 o

nclick=”x_get_table(0, 5, to_window)”，href=”expand.php?index=0″ 变为 o

nclick=”x_get_image(0, to_window)”。

并在相应的函数中做同样修改： get_image_link() 和 get_table_link()。这样向 Sajax 的转化就完成了（如图 6 所示）。所有链接都变成了与远程 PHP 调用对应的 Javas

cript 调用，PHP 使用 Javas

cript 响应处理程序 to_window() 直接输出到页面。

整个应用程序都包含在一个页面中，还可以把其余功能（get_table()、 get_image() 等）放在不能从 Web 访问的单独的库文件中。在大多数 Ajax 应用程序中，每个发往服务器的请求都需要由单独的脚本处理，或至少需要编写一个非常庞大的处理程序脚本来重定向请求。将所有这些文件都集中到一起可能非常麻烦。使用 Sajax 永远只需要一个文件，在该文件中只需定义我们使用的函数即可。Sajax 代替了处理程序脚本。

可以看到 URL 仍然保持不变，并带来了更多愉快的用户体验。window div 显示在一个灰色的框中，通过 Sajax 生成的内容非常清楚。脚本不一定要知道自身或者它在服务器上的位置，因为所有的链接最终都成为直接对页面自身的 Javas

cript 调用。因此我们的代码能够很好的模块化。我们只需要保持 Javas

cript 和 PHP 函数在同一个页面上即可，即使页面位置发生了变化也没有关系。

网站建设

php

结合AJAX进行PHP开发之入门(3)

Tags: ajax, php, 技术文章

添加 Sajax

现在相册提供了基本的导航功能，目录中的图像添加了索引。下面您将看到添加 Sajax 能够改进编程和用户体验。

这里假设您对 Ajax 有基本的了解，最好还熟悉 Sajax 的基础知识（请参阅参考资料中的教程）。

Sajax、Ajax 与传统 Web 应用程序

现在我们已经使用标准的 Web 开发模型开发了应用程序。两项主要功能是分页器和图像查看器，它们分别对应不同的 PHP 文件。参数作为 HTTP GET 请求传递给脚本，脚本直接向 Web 客户机返回页面。

Web 开发社区的人都知道，Ajax 允许向服务器发出异步的辅助请求，并直接在网页中显示结果（如图 4 所示）。不幸的是，即便最简单的 Ajax 应用程序实现起来也是一项大任务。因为 Ajax 不是标准化的技术，Internet Explorer 和其他浏览器（如 Firefox、Safari）的实现是不同的。此外，程序员至少要编写三个函数才能实现一个功能，这三个函数是：发送 HTTP 请求的初始 Javascript，返回响应的 PHP 脚本，以及另一个处理这些响应的 Javascript 函数。

建立在 Ajax 库之上的 Sajax 通过运用简单的启发式方法大大简化了这一过程：Web 客户机需要访问的每个 PHP 函数都由 Sajax “导出”。如果有一个名为 foo_bar() 的 PHP 函数，那么 Sajax 会把该函数导出为 Javascript 函数 x_foo_bar()。客户机对 x_foo_bar() 的任何调用都会自动转发给服务器上的 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() Javas

cript 函数将远程调用 foo_bar() 函数，并把响应传递给 Javas

cript 内置函数 alert()。每个 Sajax 导出函数的最后一个参数都是一个响应处理程序，负责处理 foo_bar() 的输出。

这个例子还说明了 Sajax 快速开发的另一个重要特性：不需要每个函数都有一个单独的文件，页面实际上调用的是其自身，因此更便于跟踪函数的调用（如图 5 所示）。x_foo_bar() 函数直接向页面发回 Ajax 请求，在请求中包含函数名和参数。关键是 sajax_handle_client_request() 函数，它截获所有的 Sajax 调用并自动对它们进行处理。

图 5. 使用 Sajax 客户机可通过一个页面访问服务器端的多个函数

php

结合AJAX进行PHP开发之入门(2)

Tags: ajax, php

导航的实现

虽然表格列出了目录中的一些图像，但用户还需要一种查看表格中未出现的图片的方法。要真正实现分页器的导行，则需要一套标准的链接：首页、上一页、下一页和尾页。

清单 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=”‘ . $link . ‘”＞’ . $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/’ . $images[$index] . ‘” /＞’;
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”
“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＞

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

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

?＞
＜/body＞
＜/html＞

这样我们就完成了相册。用户可以看到所有的图片，而且很容易导航。自然，用户可以来回切换，甚至能通过书签功能返回喜欢的图片。

php

结合AJAX进行PHP开发之入门(1)

Tags: ajax, php

异步 Javascript 和 XML（Asynchronous Javascript and XML，Ajax）无疑是最流行的新 Web 技术。本文中我们将完全使用 PHP 和 Simple Ajax Toolkit (Sajax) 创建一个简单的相册作为在线 Web 应用程序。我们首先用标准的 PHP 开发方法编写简单的相册，然后再用 Sajax 将其变成活动的 Web 应用程序。

创建一个简单的相册

本文将使用两种方法创建一个简单的相册：传统的 Web 应用程序和基于 Sajax 的应用程序。我们将用 PHP 编写一个相册，读取某一目录中的内容，显示缩略图组成的表格。如果用户单击一个缩略图，就会完全展开该图像。因为编写的是传统应用程序，所以每次单击都会是一个新的 HTTP 请求，而参数则作为 URL 的一部分传递。

您将学习如何将 Sajax 库应用于相册，了解为何使用 Sajax 可以加快应用程序的开发。

添加一个分页器表

访问相册的用户需要某种快速查看照片的方法。因为很多大照片不容易在一页上显示，所以需要创建一个分页器 —— 每次显示少量缩略图的简单表格。还要编写导航，帮助用户在图像列表中来回移动。

什么是 OpenAjax Alliance？

2006 年 5 月 JavaOne Conference 开始前，29 家公司的代表在 Adobe Systems 的会议室里碰头，准备大体上确定 Ajax 的未来，这个小组就称为 OpenAjax Alliance。

小组做了几项决定，其中最显著的就是给自己取了个名字：OpenAjax Alliance。它还决定不把自己组织成一个正式的标准团体，或者 Eclipse Foundation 那样的开放源码主导的组织，因此小组自身的形式暂时也是非正式的。小组同意大约每周召开一次电话会议。

OpenAjax Alliance 主要关注三个方面：通过提供互操作性降低采用 Ajax 的风险，保证 Ajax 解决方案坚持走开放标准路线和使用开放源码技术，保持 Web 的开放性。小组的第一项任务就是寻求建立和保持 Ajax 工具间互操作性的方法。

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

首先要收集至少 20 幅 .jpg 图片，并将它们放到一个文件夹中。每个图片还要有一个保存在单独缩略图文件夹中的缩略图。虽然可使用 GD 软件包生成缩略图（请参阅参考资料），但本文假设已经准备好了缩略图。也可使用本文提供的照片和缩略图（请参阅下载）。

为了完成本文的剩余部分，后面假设照片保存在 /images 子目录中，缩略图则放在 /images/thumbnails 中。可以在代码中做适当的修改。此外，我们还假定缩略图和对应的图像使用相同的名称。

分页器应该传递两个参数：start 是按照字母顺序显示的第一幅照片的索引号，step 是显示的照片数。

清单 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＞’;
$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 开始遍历图片列表。然后放上每个图片的缩略图，每五张图片作为一行。达到 $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() 函数。有一点很重要，无论何时调用该函数，返回的数组都是不变的。因为提供的实现要进行目录搜索，必须保证目录中的指定文件不会改变，每次都要按字母顺序排序。

php

2009/11/14

结合AJAX的PHP开发之后退、前进和刷新(4)

Tags: ajax, php, 技术文章

在第 1 部分中，相册中的每个链接都是由 get_table_link() 和 get_image_link() 两个函数生成的。通过编辑这些函数，可以在调用 Sajax 函数之前让该函数先调用历史堆栈。清单 9 以粗体显示了这些变化。

清单 9. get_table_link() 和 get_image_link() 函数的更新版本

function get_table_link ( $title, $start, $step ) {
$link = “myHistory.addResource(’table-$start-$step’); ”
.”x_get_table($start, $step, to_window); ”
.”return false;”;
return ‘＜a href=”#” onclick=”‘ . $link . ‘”＞’ . $title.’＜/a＞’;
}

function get_image_link ( $title, $index ) {
$link = “myHistory.addResource(’image-$index’); ”
.”x_get_image($index, to_window); ”
.”return false;”;
return ‘＜a href=”#” onclick=”‘ . $link . ‘”＞’ . $title .’＜/a＞’;
}

当应用程序进行 Sajax 调用时，to_window() 作为回调函数在页面上重新生成 HTML。在测试应用程序中，我们用函数 display()（清单 8）完成了两项任务：更新页面输出和更新历史记录按钮的状态。现在将在已有的 to_window() 函数体中添加下列函数调用：

display_history_buttons();

该函数的定义如清单 10 所示。

清单 10. display_history_buttons() 函数

在开始跟踪相册应用程序的历史记录之前，只需要在页面加载过程中调用 x_get_table() 函数即可。这样就可以调用通过 Sajax 显示的初始表。

现在已经有了历史堆栈，但是我们不希望每次打开该应用程序时都要从头开始。相反，我们希望从离开的地方开始。因此需要添加 load_current() 函数以扩展应用程序，加载页面时会调用该函数。添加后退和前进按钮处理程序时，还将调用该函数，根据保存到历史堆栈中的事件 ID 来更新页面。

清单 11. load_current() 函数

function load_current()
{
// No existing history.
if (myHistory.stack.length == 0) {
x_get_table(to_window);
myHistory.addResource(’table-0-5′);

// Load from history.
} else {
var current = myHistory.getCurrent();
var params = current.split(’-');
if (params[0] == ‘table’) {
x_get_table(params[1], params[2], to_window);
} else if (params[0] == ‘image’) {
x_get_image(params[1], to_window);
}
}
}

onload 处理程序需要进行相应的修改：

window.onload = function () {
load_current();
};

最后，添加清单 12 中的历史记录按钮处理例程。注意处理程序和测试应用程序的相似性。

清单 12. 历史记录按钮事件处理程序

function do_back()
{
myHistory.go(-1);
load_current();
}

function do_forward()
{
myHistory.go(1);
load_current();
}

function do_reload()
{
myHistory.go(0);
}

至此就完成了历史堆栈到相册应用程序的集成。完成后的产品如图 3 所示。

打开应用程序并单击链接，就会看到存储在浏览器 cookie 中的历史堆栈和指针。

CHCurrent = 4
CHStack = table-0-5%2Cimage-1%2Cimage-2%2Cimage-3%2Ctable-3-5

如果正在运行 Mozilla Firefox 并下载了 Web Developer Toolbar 扩展，那么这些操作就很容易实现。

结束语

我们介绍了如何创建一个自定义的历史堆栈来跟踪 Ajax 应用程序中的事件。可以在应用程序中添加 Web 浏览器上常见的后退、前进和刷新按钮来导航自定义的历史堆栈。

为解决这一难题，我们确定了问题所在，创建了能应用于其他应用程序的可重用解决方案。我们没有直接在相册应用程序中建立历史堆栈，而是用一个简单的页面测试这个类。这样做有助于建立不会严格绑定到某个应用程序的解决方案，该解决方案可用于其他 Ajax 应用程序来解决同样的问题。

网站建设

php

结合AJAX的PHP开发之后退、前进和刷新(3)

Tags: ajax, php

测试类

可以用简单的 HTML 页面和一些 Javascript 来测试完成的类。测试页面将在上方显示历史记录按钮，只有活动的按钮是突出显示并且可以单击的。我们没有建立复杂的测试应用程序，该页面在每次单击链接时仅仅生成随机数。这些数字就是记录到历史堆栈中的事件。堆栈也在页面上显示，指针标记的当前记录用粗体显示。

清单 7. 测试历史堆栈的简单 HTML 页面

＜html＞
＜head＞
＜title＞＜/title＞
＜/head＞

＜body＞

＜div id=”historybuttons”＞＜/div＞
＜div＞
＜a href=”#” onclick=”do_add(); return false;”＞Add Random
Resource＜/a＞
＜/div＞
＜div id=”output” style=”margin-top:40px;”＞＜/div＞

＜/body＞
＜/html＞

在该 HTML 页面的头部需要添加清单 8 所示的 Javas

cript 代码。这段代码首先实例化一个新的历史堆栈对象，并载入可能已经保存到浏览器 cookie 中的所有数据。

我们定义了四个 do_*() 函数，这些事件处理程序将添加到后退、前进和刷新按钮的链接中，此外还有 Add Random Resource 链接，如清单 7 所示。

display() 函数检查历史记录对象的当前状态，并为历史记录按钮生成 HTML。它还生成历史记录中存储的项目列表。

清单 8. 集成历史记录类和测试页面的 Javas

cript

＜script type=”text/javascript” src=”history.js”＞＜/script＞
＜script type=”text/javascript”＞

var myHistory = new HistoryStack();
myHistory.load();

function do_add()
{
var num = Math.round(Math.random() * 1000);
myHistory.addResource(num);
display();
return false;
}

function do_back()
{
myHistory.go(-1);
display();
}

function do_forward()
{
myHistory.go(1);
display();
}

function do_reload()
{
myHistory.go(0);
}

// Display the current history stack, highlighting the current
// position.
var str = ‘＜div＞History:＜/div＞’;
for (i=0; i ＜ myHistory.stack.length; i++) {
if (i == myHistory.current) {
str += ‘＜div＞＜b＞’ + myHistory.stack[i] +
‘＜/b＞＜/div＞’;
} else {
str += ‘＜div＞’ + myHistory.stack[i] + ‘＜/div＞’;
}
}
document.getElementById(”output”).innerHTML = str;
}

window.onload = function () {
display();
};
＜/script＞

运行该测试页面，可以看到历史记录按钮反映了历史堆栈的状态（见图 2）。比如，第一次加载页面时，按钮都是灰色的。向堆栈中添加一些记录后，后退按钮就变成活动的了。如果在堆栈中回退，前进按钮就变亮了。还要注意的是，如果单击几次后退然后再单击 Add，那么堆栈会被截掉一部分，新的事件被压入缩短的堆栈顶部。

图 2. 历史堆栈的测试页面

测试完该类后，就可以进入最激动人心的阶段了。

集成历史记录对象和相册

我们将从第 1 部分留下的问题开始，直接从相册页面调用历史堆栈。不需要修改任何 PHP 文件。

首先需要添加一个 div 标记来存放历史记录按钮。如清单 7 所示。

＜div id=”historybuttons”＞＜/div＞

历史堆栈代码被保存到一个 .js 文件中，该文件将链接到相册页面。

＜script type=”text/javascript” src=”history.js”＞＜/script＞

需要实例化历史堆栈对象并从缓冲区加载它们。这些操作可以添加到相册页面上已有脚本的前面。

var myHistory = new HistoryStack();
myHistory.load();

在针对历史堆栈的测试应用程序中，只存储随机数作为事件。我们可以在历史记录中存储需要的任何信息，但是要记住，当用户单击应用程序的后退按钮时，还要确定历史堆栈中的内容是什么。应用程序只有两个动作与 x_get_table() 和 x_get_image() 函数有关。因此对于每个表链接，可以存储名称 table 再加上 start 和 step 值作为事件标识符，比如 table-10-5。类似地，可以存储名称 image 和将被查看图像的 index，如 image-20。

php

结合AJAX的PHP开发之后退、前进和刷新(2)

Tags: ajax, php

编写类

我们来看看历史堆栈中需要存储的数据或属性。前面已经讨论了堆栈（数组）和指针。stack_limit 属性可以防止因为数据过多而造成的 cookie 溢出（参见清单 1）。在实践中，我们希望在删除最老的记录之前能够存储 40-50 个事件。出于测试的目的，我们将该值设置为 15。

清单 1. 历史堆栈的构造，包括类的属性

function HistoryStack ()
{
this.stack = new Array();
this.current = -1;
this.stack_limit = 15;
}

除了这三个属性外，该类还需要一些方法来添加元素、检索堆栈数据以及将堆栈数据保存到浏览器 cookie 中。首先看一看 addResource() 方法，它用于将记录压入历史堆栈的堆栈顶部（参见清单 2）。注意，如果堆栈的长度超过了 stack_limit，那么最老的记录将从堆栈中移走。

清单 2. addResource() 方法，向历史堆栈的堆栈顶部添加记录

HistoryStack.prototype.addResource = function(resource)
{
if (this.stack.length ＞ 0) {
this.stack = this.stack.slice(0, this.current + 1);
}
this.stack.push(resource);
while (this.stack.length ＞ this.stack_limit) {
this.stack.shift();
}
this.current = this.stack.length – 1;
this.save();
};

给历史堆栈添加的以下三个方法用于从该类中获取信息（参见清单 3）。getCurrent() 返回堆栈指针指向的当前记录，这在堆栈中导航的时候非常有用。hasPrev() 和 hasNext() 方法返回 Boolean 值，告诉我们当前记录之前或之后是否还有记录，或者指示我们到达了堆栈顶部或堆栈尾部。这些方法很简单，但是确定后退和前进按钮的状态时很有用。

清单 3. 历史堆栈定义的方法

HistoryStack.prototype.addResource = function(resource)
HistoryStack.prototype.getCurrent = function ()
{
return this.stack[this.current];
};

HistoryStack.prototype.hasPrev = function()
{
return (this.current ＞ 0);
};

HistoryStack.prototype.hasNext = function()
{
return (this.current ＜ this.stack.length – 1 && this.current ＞ -1);
};

现在就可以向历史堆栈中添加记录并确定所在的位置了。但还是无法在堆栈中导航。清单 4 中定义的 go() 方法允许我们在堆栈中来回移动。通过传递正或负的增量就可以在堆栈中向前或向后移动。这与 Javas

cript 内置的 location.go() 方法类似。既然模仿内置功能，为何不根据这些已有的方法建立模型呢？

此外，我们还可用该方法实现刷新功能。可以通过传递正或负的参数在堆栈中导航。传递零时则会刷新当前页面。

清单 4. 历史堆栈的 go() 方法

HistoryStack.prototype.go = function(increment)
{
// Go back…
if (increment ＜ 0) {
this.current = Math.max(0, this.current + increment);

// Go forward…
} else if (increment ＞ 0) {
this.current = Math.min(this.stack.length – 1,this.current + increment);
// Reload…
} else {
location.reload();
}
this.save();
};

到目前为止，只要 HistoryStack 对象存在于当前文档中，这个新建的类就能正常工作。我们已经讨论了刷新页面会造成数据丢失的问题，现在来解决它。清单 5 中添加了在浏览器 cookie 中设置和访问数据的方法。所要做的只是设置每个 cookie 的名称值对。因为只需要在浏览器会话中保存 cookie，而不需要设置有效期。为了简化示例，我们不考虑其他参数，如 secure、domain 和 path。

注意：如果该类需要对 cookie 做复杂处理，更明智的办法是使用完全独立的 cookie 管理类。建立和读取 cookie 有点偏离历史堆栈的正题。如果 Javas

cript 允许指定方法和属性访问的作用域，也可以将这些方法设成私有的。

清单 5. 建立和访问浏览器 cookie 的方法

HistoryStack.prototype.setCookie = function(name, value)
{
var cookie_str = name + “=” + escape(value);
document.cookie = cookie_str;
};

HistoryStack.prototype.getCookie = function(name)
{
if (!name) return ”;
var raw_cookies, tmp, i;
var cookies = new Array();
raw_cookies = document.cookie.split(’; ‘);
for (i=0; i ＜ raw_cookies.length; i++) {
tmp = raw_cookies[i].split(’=');
cookies[tmp[0]] = unescape(tmp[1]);
}
if (cookies[name] != null) {
return cookies[name];
} else {
return ”;
}
};

定义了管理任何 cookie 的方法之后，可以编写另外两个类专门处理历史堆栈的类。save() 方法将堆栈转化成字符串并保存到 cookie 中，load() 重新将字符串解析成用于管理历史堆栈的数组（参见清单 6）。

清单 6. save() 和 load() 方法

HistoryStack.prototype.save = function()
{
this.setCookie(’CHStack’, this.stack.toString());
this.setCookie(’CHCurrent’, this.current);
};

HistoryStack.prototype.load = function()
{
var tmp_stack = this.getCookie(’CHStack’);
if (tmp_stack != ”) {
this.stack = tmp_stack.split(’,');
}

var tmp_current = parseInt(this.getCookie(’CHCurrent’));
if (tmp_current ＞= -1) {
this.current = tmp_current;
}
};

php

结合AJAX的PHP开发之后退、前进和刷新(1)

Tags: ajax, php

简介

第 1 部分介绍了如何用 Sajax、PHP 和 Javas

cript 开发基本的相册。在为应用程序建立历史堆栈的过程中，我们将依靠客户端技术，并将其直接与第 1 部分的代码结合在一起。本文假设读者了解 Javas

cript 和浏览器 cookie。

在浏览器中保存状态

在网上冲浪的时候，总是从一个页面到另一个页面，从一个站点到另一个站点。在这个过程中，Web 浏览器忠实地记录了您曾经到过何处的历史记录，创建了一条面包屑型（breadcrumbs）数字轨迹，沿着这条轨迹能够一步一步地回到出发点。后退按钮允许您回到上一个动作之前所在的位置，从这个意义上说它就是 Web 上的撤销按钮。

Web 是一种按页划分的的媒体。浏览器工具栏中的后退和前进按钮指引着浏览器从一个页面移动到另一个页面。当 Macromedia 的 Flash 风行一时的时候，开发人员和用户发现富互联网应用程序（Rich Internet Application，RIA）打破了这种模式。用户可以在几个站点上浏览，然后登录一个基于 Flash 的网站，在这个网站上消磨几分钟。当用户单击后退按钮时，游戏结束了。用户没有回到先前的那个 Flash 站点，完全不知道到了什么地方。

对于完全基于 Ajax 的网站 —— RIA 的另一种形式，情况也是如此。允许用户与一个页面进行多次交互的网站很容易受到后退按钮的困扰，或者受到任何历史记录按钮的困扰（就此而言）。前进和重载按钮的问题与后退按钮的问题一样。 Web 浏览器内置的内部历史记录机制是一个不可逃避的问题。出于安全的原因，开发人员不能篡改浏览器历史记录或者任何相关按钮。还有可用性的问题。设想一下，如果后退按钮突然弹出一个神秘的警告提示或者用户被打发到一个新的网站上去，用户该是多么困惑。

构建历史堆栈

虽然不能改变浏览器历史记录，但是可以自己构建一个在 RIA 中使用的历史记录。显然，它在某种程度上应该与浏览器的标准导航工具分开，但正如前面所说的，富应用程序在一定程度上背离了 Web 的页面到页面的标准模式。

我们将建立一个堆栈来管理应用程序的历史事件记录，也就是说存储一个列表，在表的最后添加元素。堆栈用于按照后进先出（LIFO）的顺序存储数据。虽然回退的时候并没有删除堆栈顶部的数据，但这个模型跟我们的需要非常接近。在 Javas

cript 中，堆栈可以用数组来管理。

与堆栈在一起的还有一个指针，指示我们在堆栈中的当前位置。当我们在应用程序中单击的时候，新的事件将被压入堆栈顶部，指针指向最后添加的元素。单击应用程序的后退和前进按钮时，不会在堆栈中添加新的事件，而是移动堆栈的指针。想一想使用后退按钮时历史堆栈中会发生什么：浏览器返回上一次查看的页面，原来不能用的前进按钮突然之间变得可用了。浏览新的页面时，前进按钮再次变成灰色。浏览器历史记录中较晚保存的元素将被弹出堆栈，新的事件被压入堆栈顶部。我们将在自己创建的历史堆栈中再现这种行为。

我们的目标是创建一组可用的历史记录按钮：后退、前进和刷新，如图 1 所示。

图 1. 后退、前进和刷新的历史记录按钮显示在左侧，不可用状态显示在右侧

可重用的设计

Javas

cript 使用非常宽松的方法创建对象和类，但仍然能够建立可重用的代码。首先列出历史堆栈需要的功能，然后用 Javas

cript 建立堆栈模型。在把历史堆栈集成到相册应用程序之前，首先要建立一个简单的页面来测试其功能。这样做有两方面的好处：测试页有助于将精力集中到开发和测试类的核心功能上，建立单独的测试页可以避免混淆历史堆栈和相册的功能，从而确保可重用性。

用 cookie 缓冲

我们需要应用程序的历史记录在整个浏览器会话中都存在。只要用户仍在查看相册页面，历史堆栈对象就会一直存在。每当发生更改的时候，这个类就会将整个历史记录复制到浏览器 cookie 中。如果用户在同一个浏览器会话中离开该页之后又返回，那么将返回他离开该应用程序时所在的同一个位置。

php

2009/11/12

AJAX框架汇总

Tags: ajax

基于浏览器的应用框架一般分为两种：

Aplication frameworks:提供了浏览器功能，但其最著名的还是在于通过窗口生成组件建立桌面GUI。
Infrastructural frameworks:提供基本的框架功能和轻便式浏览器端操作，让开发者去创建具体应用，主要功能包括：
- 基于XMLHttpRequest组件的浏览器交互功能
- XML解析和操作功能
- 根据XMLHttpRequest的返回信息进行相应的DOM操作
- 一些特殊情况下，和其他的浏览器端技术如Flash（或Java Applets）等集合到一起应用

基于服务器端的应用框架通常以下面两种方式工作(尽管它们根据不同的语言进行了分类)

HTML/JS Generation(HTML/JS生成)：通过服务器端生成HTML和JS代码在传递给浏览器端进行直接运行
远程交互：JavaScript调用服务器端函数(例如调用Java函数)并返回给JavaScript的回调句柄，或者请求服务器端数据信息，例如Session信息，数据库查询等。

1.Pure Javascript: Application Frameworks

1.1Bindows (成立于2003年)

Bindows是一个通过DHTML、JavaScript、CSS和HTML等技术强劲联合起来的一套完整的Windows桌面式的WEB应用程序解决方案。 Bindows无需下载安装客户端支撑组件（如Java、ActiveX或Flash），仅需一个浏览器。纯OO的理念体现在Bindows任何地方，Bindows或许是笔者见过的最完整最强大的AJAX应用程序平台。
Bindows是商业程序的，使用了来自于MB的技术(总部位于GA USA，主要开发中心在瑞典，成立于2002年)。

Bindows框架提供的功能和特性有：

基于面相对象技术的类和API
一套完整的Windows桌面系统，支持各种特性窗口模式，包括菜单、表单、表格、滑动条、测量仪器窗口和其他一些Windows窗口特性支持。
是开发zero-footprint(零空间占用)SOA客户端应用程序首选工具包
本机的XML，SOAP和XML-RPC支持
单用户到企业级开发的支持
内建的完美的AJAX支持

Bindows开发环境：

支持企业级规模的项目开发
跨浏览器、跨OS平台的支持
不受服务器结构限制
良好的与新的、现有的资源互操作性
统一的开发接口

1.2BackBase (成立于2003年)

BackBase是一个完整的浏览器端框架，提供了丰富的浏览器操作功能，以及对.NET和JAVA平台的集成。
商业化产品，来自于Backbase B.V(总部在Amsterdam，成立于2003年)。

1.3DOJO (开发中,成立于2004年9月)

DOJO提供完整的轻量级窗口组件和浏览器-服务器消息映射支持

提供创建自定义Javascript窗口组件的框架支持
预制的丰富的窗口类型库
B/S消息映射支持——XMLHttpRequest和其他机制
支持浏览器中的URL操纵功能
开源许可(Academic Free License 2.1)，由JotSpot的Alex Russell所领导。

1.4Open Rico (开发中;成立于2005年5月;基于早期的一个proprietary 框架)

Open Rico是一个支持Ajax架构和用户交互的多用途框架。

一个XMLHttpRequest response能被一个或多个的DOM对象，或者Javascript对象调用。
支持拖拽操作
支持基于AJAX的动画模式，如缩放和变换等
基于Behaviors的操作库
使用指南，由RussMirimar的Yonah提供
开源。源于Sabre航空公司解决方案，由Bill Scott，Darren James及另外一些人维护。

1.5qooxdoo (开发中; 成立于2005年5月)

qooxdoo，是另一个发展迅猛的应用框架，提供广泛的UI支持，正在开发基础架构等特性。

基础结构特性：
- 能轻易的捕获和操纵DOM事件
- 支持调试
- 支持一个时间操作的Timer类
- Getter/Setter支持
UI:
- 窗口组件库和框架
- 界面布局管理
- 图像缓存和透明PNG图片处理
开源(LGPL).

1.6 Tibet (开发中; 创建于2005年6月)

Tibet提供了大量的易移植和完整的JavaScript API，通过这些可以快速生成大量的客户端代码，Tibet自称是企业级AJAX。

远程脚本调用封装在XMLHttpRequest中
URI支持
支持所有的HTTP事件，不再仅仅是GET和POST
低级的协议-File://和WebDav也可以当作HTTP正常使用
Web Services调用支持，包括SOAP、XML-RPC等等
大型的Javascript对象库
多种多样的XML操作支持
IDE和开发工具
开源协议(OSI)

1.7 AJFORM (创建于2005年6月)

AJFORM是一个极易上手的AJAX框架，被用来编写入门级的AJAX代码，提供有以下功能：

三步安装
自动支持任意HTML表单元素
几乎无需编码即可实现AJAX

2 Pure Javascript: Infrastructural Frameworks

2.1 AjaxCaller(创建于2005年5月，目前是Alpha版)

AjaxCaller是一个具有多线程安全访问的XMLHttpRequest组件，主要针对Ajax开发新手，目前仍处于alpha开发阶段，仅在AjaxPatterns的在线搜索范例中使用了这个程序。

用明文或者XML结构的数据实现和服务器的交互(GET/POST/PUT/DELETE)
支持XMLHttRequest对象的构析(销毁对象，C++支持内存对象的构析操作)
支持Response的高速缓存(尚在计划中)
简单的库文件代码易于新手学习使用，并且支持脚本调试
开源协议

2.2 Flash JavaScript Integration Kit

The Flash JavaScript Integration Kit可以使Flash和Javascript脚本实现相互集成。

可以实现在JavaScript中调用Flash ActionScript脚本，反之亦然。
几乎支持双方主要数据类型的在不同环境中的传递调用。
开源协议，有几个Flash开源爱好者维护。

2.3 Google AJAXSLT (2005年6月发行)

Google AJAXSLT，是一个Javascript框架，用来执行XSLT转换以及XPath查询。

目前在Google Map上就使用了这个。
开源协议(BSD)

2.4 HTMLHttpRequest(Beta版；创建于2005年)

HtmlHttpRequest最大的特点就是运用XMLHttpRequest对象和标准HTML标签IFrame来实现最大限度的跨浏览跨平台的AJAX支持，其原理是在支持XMLHttpRequest的浏览器上调用XMLHttp，如果不支持，就用IFrame来模拟实现异步交互。

目前支持的浏览器：IE6/Win, IE5.5/Win, IE5/Win, IE4/Win, Mozilla/Win, Opera7/Win, Safari/Mac, IE5/Mac
尚未测试的浏览器：IE4/Mac, Mozilla/Mac, Opera/Other, Konqueror/Linux。
开源协议(LGPL)

2.5 Interactive Website Framework (创建于2005年)

Interactive Website Framework定位在浏览器中支持各种各样的AJAX基础应用的开源项目。自称是通过JavaScript、CSS、XML和HTML实现高性能的交互式WEB框架，包括一个可定制易读的XML解析器。实际上，IWF是一个AJAX的基础框架，并且还包括一些通用脚本代码。

实现了线程安全的XMLHttpRequest
对XML Document进行封装，以便创建更具有可读性的代码：

var node = doc.groceries.frozen[0].pizza[0].size;

封装后的数据读取

var node = doc.documentElement.firstChild.firstChild.getAttribute(”size”);

原始的DOM操作读取
开源协议

2.6 LibXMLHttpRequest (2003年6月发布)

libXmlRequest是一个小型XMLHttpRequest封装包

用getXML()和postXML()两个事件简化XMLHttpReuqest调用
支持XMLHttpRequest对象池
Response缓存处理
源码可以使用，但是有版权保护。

2.7 MAJAX

MAJAX是另一个非常小巧的HttpRequest封装包，为收发字符型信息提供简单接口，并为每步动作设置回调界面。

2.8 RSLite (x)

RSLite是一个XMLHttpRequest封装组件，作为Brent Ashley的JSRS(JavaScript Remote Scripting)其中的一部分功能单独发布。详情可以看JSRS的介绍

2.9 Sack(开发中，成立于2005年5月)

Sack也是一个很有名字的微型XMLHttpRequest封装包。调用者可以自定义回调函数或者是DOM对象。借助于回调DOM对象，可以把Response回来的数据直接以文本的方式嵌入DOM中。

2.10 Sarissa (发布于2003年2月)

Sarissa是一个JavaScript API，封装了在浏览器端独立调用XML的功能。

可移植的XMLHttpRequest对象创造
可移植的XPath查询
可移植的DOM操控
可移植的XSLT
可移植的XML序列化
开源协议(GPL2.0和LGPL2.1)

2.11 XHConn (2005年4月发布)

XHConn也是一个小型的XMLHttpRequest封装库。笔者也使用改良过的XHConn，其特点就是调用简单，代码也清晰易读。

例子：

new XHConn().connect(”mypage.php”，”POST”，”foo=bar&baz=qux”，fnWhenDone);
开源协议许可

3 Server-Side: Multi-Language

3.1 Cross-Platform Asynchronous INterface Toolkit (2005年5月)

CPAINT是一个真正的同时支持PHP和ASP/VBScript脚本的AJAX和JSRS工具包。CPAINT在后台提供你需求的AJAX和JSRS代码，并自动返回到浏览器端相应的Javascript脚本代码，这种方式易于实时反馈需求的WEB应用程序。

支持PHP和ASP
所有功能函数都在统一的JavaScript文件中
支持远程脚本和XML
支持本地和远程函数调用
可以创建单个或多个XMLHttp对象
返回给后台的数据即可以是文本也可以是XML/DOM文档对象
支持POST和GET
用服务端代理的方式实现远程函数和数据的访问操作
大部分浏览器中测试正常使用
在GNU、GPL、LGPL开源协议保护下发行

3.2 SAJAX (2005年3月)

SAJAX的实现方式很独特，例如：调用一个javascript方法x_calculateBudget()，将先把响应传到服务器并调用一个Java calculateBudget()方法，然后以javascript方式把值返回到x_calculateBudget_cb()中。SAJAX的名气不错，估计很多人都听过甚至用过，不过缺点就是它的这套映射理论感觉较繁锁，远不如一些轻量级的封装库好用，不过SAJAX最大的特点就是支持的平台丰富，几乎囊括了WEB下常用的编程语言和平台

很方便从JavaScript函数映射到服务端代理操作
支持多种平台(ASP/ColdFusion/Io/Lua/Perl/PHP/Python/Ruby)
开源协议

3.3 Javascipt Object Notation (JSON) and JSON-RPC

JSON是一个”face-free” XML，而JSON-RPC是一种远程交互协议，类似于XML-RPC，对JavaScript支持较强

支持多服务端平台: Java, Python, Ruby, Perl.
针对不同的平台有不同的包和许可协议, 如JSON-RPC-Java.

3.4 JavaScript Remote Scripting(JSRS)(2000年)

JSRS，较经典的远程脚本访问组件，支持将客户端数据通过服务器做代理进行远程的数据/操作交互。

支持的浏览器：IE4+，NS4.x，NS6.x，Mozilla，Opera7和Galeon。
服务器端脚本语言支持：ASP，ColdFusion，PerlCGI，PHP,Python和JSP(servlet)。
开源协议。由Brent Ashley提供支持。

3.5 Bitkraft for ASP.NET

Bitkraft是个基于(.NET)Web框架的CLR(公共语言运行库)，允许用独特的方式创建和操作分布式Web内容。用C#编写，运行在微软的.NET 1.1和Mono框架下，无缝式的客户端-服务器响应方式是它的最大特点。Bitkraft没有使用XML组织数据，而是用JSON代替。

支持的浏览器： IE5+, Firefox1+, NS6
服务器端要求：ASP.NET, Mono XSP, Cassini, Apache (modMono) .NET Framework 1.1+
事件驱动
支持同步和异步的远程代理
客户端支持所有的.NET类型或自定义类对象映射到JSON中
用JSON取代XML
免费，开源许可协议

4 Server-Side: Java

4.1 WebORB for Java (2005年8月)

WebORB for Java是一个开发AJAX和基于Flash的富客户端应用程序的开发平台。在线例子

WebORB包括一个富客户端开发类库。提供简单的在线式API用来绑定或者调用任何Java对象、XML Web Services和EJB
支持异步或同步的事件驱动
不需要在服务端修改任何代码，不需要自定义方法或属性、变量等。不要求设计时指定代理等。
同步调用不需要回调，异步调用需要一个回调方法。
客户端可以向服务端请求指定的活动方式，不需要任何编程就可以把处理结果轻易的转变为状态。
提供一个特定API来处理数据库查询结果-服务器代码能返回DataSet或者DataTable，而客户端以一个类似于RecordSet的JavaScript对象来显示这个结果。该对象提供检索列名和行数据的方法。
支持数据分页技术。客户应用程序能检索页面中的数据。
支持以参数的方式返回所有服务期端数据类型，如primitives, strings, complex types, arrays, native .net collections, remote references
目前有两个版本：标准版(免费)，专业版(商业许可)

4.2 Echo 2 (2005年3月)

Echo 2允许你用纯Java语言编写AJAX程序。Demo.

自动生成HTML和Javascript代码
用XML在客户端-服务端传递消息
如果愿意支持自定义Javascript组件
开源协议(Mozilla Public License or GNU LGPL)

4.3 Direct Web Remoting (DWR) (2005)

Direct Web Remoting可以在Javascript代码中直接调用Java方法的应用框架

类似于SAJAX，可以把Javascript中的请求调用转递到Java方法中并将执行结果返回给Javascript
可以和任何Web框架一起使用，如Struts、Tapestry等等
开源(Apache)，目前该产品被加入到WebWork中

4.4 SWATO (2005)

SWATO是一套可重用的和良好集成的Java/JavaScript库，它实现了一种更容易的方式来改变你的web应用程序的交互，通过AJAX方式实现。

服务端Java库可以非常容易的部署到所有Servlet2.3+兼容的容器中
客户端Javascript库可以在所有支持XMLHttpRequest的浏览器中使用
使用JSON技术在服务端组织POJO数据，这样你可以在任何Javascript环境中(HTML、XUL、SVG)访问这些远程数据，这种方式很容易通过硬编码或者某种成熟的Javascript库集成到当前应用中
提供一个简单接口使你能在Javascript中调用远程的POJO数据
使用<servlet>和<filter>灵活的在web.xml中进行配置，并且可以集成(不是必须)到你的Spring框架中
提供了几个可帮助你快速开发web应用程序的组件(如自动完成的文本框，在线表单，在线列表等等)

4.5 AJAX JSP Tag Library

The AJAX JSP Tag Library是一组JSP标签库，用来AJAX程序开发。可以在J2EE下无需Javascript就能轻松开发AJAX模式的Web Form。标签库为比较通用的AJAX功能提供了5个标签：

autocomplete: 用户在文本框中输入字符，自动从指定的数据中匹配用户输入的字符，类似于Google Suggest
callout:可以为A标签加入气泡式的消息提示框，不过是实时的服务端取出数据
Select/dropdown:类似于联动菜单，比如地州市的联动下拉框
toggle:开关闸按钮，比如在一个hidden表单域中存储true和falsh，同时显示相应的img图像
update field:更新数据，也就是无刷新提交了。

4.6 AJAX Java Server Faces Framework

The AJAX-JSF用来把任意的JSF应用程序转变为AJAX应用程序

例子：AJAX组件的 MyFaces JSF Tree(树型目录), table scroller(可滚动的表格), tabbed pane(分页栏)
开源协议(Apache Software License)

Server-Side: Lisp

5.1 CL-Ajax

CL-Ajax实现Javascript直接调用服务端Lisp

生成可带参数的函数
可以回调Javascript函数或者DOM对象
可以集成到SAJAX中
开源许可

6 Server-Side: .NET

6.1 WebORB for .NET (2005年8月)

WebORB for .NET是一个用.NET和XML Web Services方式开发AJAX和基于Flash的富客户端应用程序(在线例子)

WebORB包括一个富客户端开发类库。提供简单的在线式API用来绑定或者调用任何.NET对象、XML Web Services
支持异步或同步的事件驱动
不需要在服务端修改任何代码，不需要自定义方法或属性、变量等。不要求设计时指定代理等。
同步调用不需要回调，异步调用需要一个回调方法。
客户端可以向服务端请求指定的活动方式，不需要任何编程就可以把处理结果轻易的转变为状态。
提供一个特定API来处理数据库查询结果-服务器代码能返回DataSet或者DataTable，而客户端以一个类似于RecordSet的JavaScript对象来显示这个结果。该对象提供检索列名和行数据的方法。
支持数据分页技术。客户应用程序能检索页面中的数据。
支持以参数的方式返回所有服务期端数据类型，如primitives, strings, complex types, arrays, native .net collections, remote references
目前有两个版本：标准版(免费)，专业版(商业许可)

6.2 Ajax.NET (2005年3月)

Ajax.NET是首家支持各种方式通过Javascript访问服务端.net的免费库

类似于SAJAX，能把Javascript请求发送到.NET方法，服务端回传给Javascript，甚至包括串行化自定义类。
可以在Javascript中访问Session和Application数据
缓存查询结果
免费使用源代码
无需更改源代码，允许给Ajax.NET添加和修改方法和属性
所有类支持Javascript客户端返回数据，可以在JavaScript中使用DataSet：res.Tables[0].Rows
使用HtmlControls组件访问和返回数据
页面无需重载，用事件代理(数据访问层)
因为只提供一个调用接口方法，所以服务端CPU占用非常少

6.3 ComfortASP.NET (2005年8月)

ComfortASP.NET可以让开发者在纯.NET下开发类似AJAX(DHTML,JavaScript,XMLHttp)特性的应用程序。

快速应答
减少HTML传输
减少页面重载
无闪烁的浏览器内容更改
AJAX用户体验，

6.4 AjaxAspects (2005年8月)

AjaxAspects是个可以用Javascript调用服务端WebService事件的引擎

用标准的SOAP和WSDL进行服务端-客户端通信
用简单的类型和XML对象支持带参数的返回值
缓存支持
动作队列
免费使用，开源协议

7 Server-Side: PHP

7.1 AjaxAC (2005年4月)

AjaxAC用一个单独类封装了完整的应用程序功能

所有的功能集成在自包含的类中(另外附带一些Javascript库)
调用PHP文件或者HTML页面非常简易，只需创建App类后把类引用传递给需要调用的Javascript对象或者HTML元素即可。
捕获Javascript事件
可以自定义配置数据，并且支持运行时参数更改
无需再Javascript代码中夹杂凌乱的Html代码，所有事件都是被动态附加上的
由于以上两个优点，所以支持良好的模版引擎
容易Hook到PHP类和MySql数据已返回给自己的request
能够容易的用Javascript建立窗口模式应用程序。

7.2 JPSpan

JPSPAN通过Javascript直接调用PHP中的函数。

进行了严谨的单元测试
开源许可(PHP)

7.3 XAJAX

XAjax通过Javascript直接调用PHP中的函数

支持用Javascript调用PHP脚本
开源许可协议

8 Server-Side: Ruby

8.1 Ruby On Rails

Ruby On Rails是一个支持AJAX的完整Web框架，使用Ruby语言编写，严格按照MVC结构开发。

当Ajax出现的时候Rails还处于其发展的早期，因此Ajax可能逐渐成为Rails框架的核心。
生成浏览器中大多数/全部的Window应用组件和动画的Javascript脚本。
支持服务器端调用。
队列支持
开源许可

« Newer Posts Older Posts »

2010年8月
一	二	三	四	五	六	日
« 7
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

燕之庐网站建设 - 优质网站设计公司

Posts Tagged ‘ajax’

目录

1.Pure Javascript: Application Frameworks

1.1Bindows (成立于2003年)

1.2BackBase (成立于2003年)

1.3DOJO (开发中,成立于2004年9月)

1.4Open Rico (开发中;成立于2005年5月;基于早期的一个proprietary 框架)

1.5qooxdoo (开发中; 成立于2005年5月)

1.6 Tibet (开发中; 创建于2005年6月)

1.7 AJFORM (创建于2005年6月)

2 Pure Javascript: Infrastructural Frameworks

2.1 AjaxCaller(创建于2005年5月，目前是Alpha版)

2.2 Flash JavaScript Integration Kit

2.3 Google AJAXSLT (2005年6月发行)

2.4 HTMLHttpRequest(Beta版；创建于2005年)

2.5 Interactive Website Framework (创建于2005年)

2.6 LibXMLHttpRequest (2003年6月发布)

2.7 MAJAX

2.8 RSLite (x)

2.9 Sack(开发中，成立于2005年5月)

2.10 Sarissa (发布于2003年2月)

2.11 XHConn (2005年4月发布)

3 Server-Side: Multi-Language

3.1 Cross-Platform Asynchronous INterface Toolkit (2005年5月)

3.2 SAJAX (2005年3月)

3.3 Javascipt Object Notation (JSON) and JSON-RPC

3.4 JavaScript Remote Scripting(JSRS)(2000年)

3.5 Bitkraft for ASP.NET

4 Server-Side: Java

4.1 WebORB for Java (2005年8月)

4.2 Echo 2 (2005年3月)

4.3 Direct Web Remoting (DWR) (2005)

4.4 SWATO (2005)

4.5 AJAX JSP Tag Library

4.6 AJAX Java Server Faces Framework

Server-Side: Lisp

5.1 CL-Ajax

6 Server-Side: .NET

6.1 WebORB for .NET (2005年8月)

6.2 Ajax.NET (2005年3月)

6.3 ComfortASP.NET (2005年8月)

6.4 AjaxAspects (2005年8月)

7 Server-Side: PHP

7.1 AjaxAC (2005年4月)

7.2 JPSpan

7.3 XAJAX

8 Server-Side: Ruby

8.1 Ruby On Rails

搜索框

按日显示

最近更新

每月归档

最新评论

TAG

Blogroll