第14章 Web应用程序
14.1 History API
14.1.1 History API的定义
History API 是用于在 JavaScript 中对浏览器的 URL 及历史信息进行操作的 API。过去，大部分的 Web 应用程序都是由服务器端负责程序逻辑，客户端则主要负责信息显示。而最近，将复杂的状态变化移至客户端进行管理的 Web 应用程序多了起来。由于在客户端通过 AJAX 方式更新内容时不会改变页面的 URL，因此必须通过 JavaScript 对 URL 进行管理以始终应对页面的状态变化。
然而，如果只是改写页面的 URL，就将会发生页面跳转，且 JavaScript 的状态也会在这时被重置。于是出现了 History API。如果使用 HistoryAPI，就能够在不发生页面跳转的情况下将 URL路径替换为任意内容。
14.1.2 哈希片段
AJAX应用程序与哈希片段
原本 URL 的作用是用于唯一识别 Web 上的某一内容。然而对于运用了 AJAX 技术的页面来说，即使不进行页面跳转也能够自由地改写页面内容。此时如果无法对 URL 进行有序的管理，则可能会出现同一个 URL 表示了完全不同的内容的情况。
正如不存在没有地址栏的浏览器，URL 与 Web 应用程序也是不可分割的概念。如果 URL 无法履行其唯一识别 Web 内容的这一原本的功能的话，浏览器的书签功能就将失效，而使用外部内容的链接也将成为一个难题。
为了解决这一问题，现在很多的 AJAX 应用程序都采用了哈希片段（URL 中 # 之后的字符串）这一方式。由于哈希片段使用的就是页面内的链接，因此即使改写了哈希片段也不会发生页面跳转（向服务器发送请求）。利用这一机制以哈希片段来表示页面的状态后，就能够以唯一的 URL 来表示应用程序的特定状态了。
代码清单 14.1 是哈希片段的使用示例。在这个例子中，哈希片段代表了正在浏览的页面的页码信息。需要注意的是，这里的 updateContent 被假定为一个实现了对内容进行更新处理的函数。
代码清单 14.1 哈希片段的使用示例
哈希片段与网络蜘蛛
使用哈希片段的 AJAX 应用程序有一个问题，即之前提到的不能很好地支持搜索引擎等的网络蜘蛛。通常网路蜘蛛不会对应用程序中包含的 JavaScript 进行解读，所以无法在获取页面后抓取通过 JavaScript 动态载入的内容。因此，为了让网络蜘蛛能够收集页面的内容，则必须在服务器端识别网络蜘蛛的访问，并返回不包含 JavaScript 的静态内容。
然而 URL 中哈希片段的部分不会和请求一起发送给服务器。也就是说，服务器无法返回与哈希片段所表示的应用程序状态相对应的合适内容，于是，网络蜘蛛也就无法正确获取 URL原本指示的内容。
14.1.3 接口
在 History API 中会用到的主要内容有 history 对象与 popstate 对象。history 对象是 window
对象所具有的一个属性，用于对历史记录进行操作。popstate 事件将会在巡览页面历史时被触发，因此可以侦听 popstate 事件，并实现一些用于恢复页面状态的处理。
页面历史的保存
众所周知，我们可以通过 JavaScript 的 location 对象以跳转至特定的页面（代码清单 14.2）。如果不希望发生页面跳转就能够显示特定内容，则可以使用之前介绍的使用了哈希片段以在 URL 中保存页面状态的方法（代码清单 14.3）。
页面的历史记录的跳转
可以通过浏览器的后退键以及前进键遍历浏览器所管理的页面历史记录。也可以通过 history 对象的 back 方法与 forward 方法，实现以 JavaScript 来进行页面历史记录的跳转。此外，还可以使用 go 方法以参数所指定的步数在历史记录中向前或向后跳转，不过一般情况下这种方法并不常用。代码清单 14.5 是一个例子。
页面状态的恢复
在遍览通过 pushState 添加的页面历史记录时通常不会发生页面跳转，因此有必要独自对页面状态的恢复处理进行实现。具体来说，由于这时 popstate 事件将被触发，因此可以侦听 popstate 事件，并实现一些用于将页面更新为恰当状态的处理。页面所显示的内容应当是与 URL 相对应的，因此，在对 popstate 事件进行实现时，基本要点在于应该根据 URL 来执行恰当的内容绘制处理。代码清单 14.6 是一个简化的 popstate 事件的实现示例。
恢复更为详细的页面状态
URL 所能保存的信息量是非常少的。通常的 URL 都不会包含诸如“跳转目标的 URL”这样的跨页面信息，或是“层级树的开闭状态”这样的非常细节的页面状态信息。可以借助 pushState 的第 1 个参数，来管理比 URL 所能保存的信息更为详细的页面状态。
例如，试考虑不希望在某一页面中显示用于返回跳转目标的链接的情况。这时跳转目标的 URL 或标题等信息是必需的，但通过 URL 来保存所有这些信息并不是很讨巧的做法。应该像代码清单 14.7 这样，将这些信息传递给 pushState 的第 1 个参数。
页面的历史记录的替换
应该在页面状态被改写时相应地更新 URL。不过如果在保存页面历史记录时分得过细，则需要多次点击后退键才能回到希望回到的状态，反而有可能导致可用性下降。
如果对内容的更新程度没有达到需要添加新的页面历史记录，则可以不添加历史记录而直接覆写正在显示的历史记录信息。可以通过 replaceState 方法来覆盖正在显示的历史记录信息。该方法所需的参数与pushState 基本相同，只是 replaceState 不会添加新的历史记录而会覆盖当前的历史记录信息。
代码清单 14.9 将在切换复选框的勾选状态时将这一勾选状态写入当前的历史记录信息中。只要恰当地更新历史记录信息，就能够在遍览页面历史记录时正确地恢复复选框的状态。
14.2 ApplicationCache
14.2.1 关于缓存管理
在最近的 Web 应用程序开发中，对智能手机的支持已经是一个无法回避的重要事项了。在对智能手机提供支持时，应当考虑的重要的一点是通信线路的不稳定性。移动设备所使用的 3G 线路的通信速度较慢，而且还可能多次发生信号不畅的情况。
通过使用本节将要介绍的缓存清单文件以及 ApplicationCache API，就能够将过去由浏览器进行管理的缓存文件改由应用程序的开发者来控制。利用缓存来减少不必要的文件下载后就能够改善通信速度较慢的问题，而如果使用得当，甚至还能够开发出可以离线使用的 Web 应用程序。
