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

在开始跟踪相册应用程序的历史记录之前，只需要在页面加载过程中调用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 所示。

图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应用程序来解决同样的问题。

（责任编辑 火凤凰 sunsj@51cto.com  TEL：（010）68476636-8007）