结合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 所示的 JavaScript 代码。这段代码首先实例化一个新的历史堆栈对象，并载入可能已经保存到浏览器 cookie 中的所有数据。

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

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

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

＜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); } function display() { 　// Display history buttons 　var str = ''; 　if (myHistory.hasPrev()) { 　　str += '＜a href="#" onclick="do_back(); return false;"＞' + '＜img src="icons/back_on.gif" alt="Back" /＞＜/a＞ '; 　} else { 　　str += '＜img src="icons/back_off.gif" alt="" /＞ '; 　} 　if (myHistory.hasNext()) { 　　str += '＜a href="#" onclick="do_forward(); return false;"＞' + '＜img src="icons/forward_on.gif" alt="Forward" /＞' + '＜/a＞ '; 　} else { 　　str += '＜img src="icons/forward_off.gif" alt="" /＞ '; 　} 　str += '＜a href="#" onclick="do_reload(); return false;"＞' + '＜img src="icons/reload.gif" alt="Reload" /＞＜/a＞'; 　document.getElementById("historybuttons").innerHTML = str; 　// 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。

在第 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="icons/back_on.gif" alt="Back" /＞＜/a＞'; 　} else { 　　str += '＜img src="icons/back_off.gif" alt="" /＞'; 　} 　if (myHistory.hasNext()) { 　　str += '＜a href="#" onclick="do_forward(); return false;"＞ ＜img src="icons/forward_on.gif" alt="Forward" /＞＜/a＞'; 　} else { 　　str += '＜img src="icons/forward_off.gif" alt="" /＞'; 　} 　str += '＜a href="#" onclick="do_reload(); return false;"＞ ＜img src="icons/reload.gif" 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); }

　　至此就完成了历史堆栈到相册应用程序的集成。完成后的产品如图 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 应用程序来解决同样的问题。