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

简介

　　第 1 部分 介绍了如何用 Sajax、PHP 和 JavaScript 开发基本的相册。在为应用程序建立历史堆栈的过程中，我们将依靠客户端技术，并将其直接与第 1 部分的代码结合在一起。本文假设读者了解 JavaScript 和浏览器 cookie。

　　在浏览器中保存状态

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

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

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

　　构建历史堆栈

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

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

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

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

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

　　可重用的设计

　　JavaScript 使用非常宽松的方法创建对象和类，但仍然能够建立可重用的代码。首先列出历史堆栈需要的功能，然后用 JavaScript 建立堆栈模型。在把历史堆栈集成到相册应用程序之前，首先要建立一个简单的页面来测试其功能。这样做有两方面的好处：测试页有助于将精力集中到开发和测试类的核心功能上，建立单独的测试页可以避免混淆历史堆栈和相册的功能，从而确保可重用性。

　　用 cookie 缓冲

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