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

　　在第 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() 函数

function display_history_buttons()
{
　var str = '';
　if (myHistory.hasPrev()) {
　　str += '＜a href="#" onclick="do_back(); return false;"＞
＜img src="http://img.jcwcn.com/attachment/portal" alt="Back" /＞＜/a＞';
　} else {
　　str += '＜img src="http://img.jcwcn.com/attachment/portal" alt="" /＞';
　}
　if (myHistory.hasNext()) {
　　str += '＜a href="#" onclick="do_forward(); return false;"＞
＜img src="http://img.jcwcn.com/attachment/portal" alt="Forward" /＞＜/a＞';
　} else {
　　str += '＜img src="http://img.jcwcn.com/attachment/portal" alt="" /＞';
　}
　str += '＜a href="#" onclick="do_reload(); return false;"＞
＜img src="http://img.jcwcn.com/attachment/portal" alt="Reload" /＞＜/a＞';
　document.getElementById("historybuttons").innerHTML = str;
}
　　在开始跟踪相册应用程序的历史记录之前，只需要在页面加载过程中调用 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);
}