第八章离线Web应用和地理定位.ppt

2．applicationCache对象的事件 applicationCache对象除了具有update方法与swapCache方法之外，还具有一系列的事件，我们再通过前面讲过的浏览器与服务器的交互过程来看一下在这个过程中这些事件是如何被触发的。 首次访问http://localhost:82/mr/网站： （1）浏览器：请求访问http://localhost:82/mr/。 （2）服务器：返回index.html网页。 （3）浏览器：发现该网页具有manifest属性，触发checking事件，检查manifest文件是否存在。不存在时，触发error事件，表示manifest文件未找到，同时也不执行步骤6开始的交互过程。 （4）浏览器：解析index.html网页，请求页面上所有资源文件。 （5）服务器：返回所有资源文件。 （6）浏览器：处理manifest文件，请求manifest中所有要求本地缓存的文件，包括index.html页面本身，即使刚才已经请求过该文件。如果你要求本地缓存所有文件，这将是一个比较大的重复的请求过程。 （7）服务器：返回所有要求本地缓存的文件。 （8）浏览器：触发downloading事件，然后开始下载这些资源。在下载的同时，周期性地触发progress事件，开发人员可以用编程的手段获取多少文件已被下载，多少文件仍然处于下载队列等信息。 （9）下载结束后触发cached事件，表示首次缓存成功，存入所有要求本地缓存的资源文件。 再次访问http://localhost:82/mr/网站，步骤1~5同上，在步骤5执行完之后，浏览器将核对manifest文件是否被更新，若没有被更新，触发noupdate事件，步骤6开始的交互过程不会被执行。如果被更新了，将继续执行后面的步骤，在步骤9中不触发cached事件，而是触发updateReady事件，这表示下载结束，可以通过刷新页面来使用更新后的本地缓存，或调用swapCache方法来立刻使用更新后的本地缓存。 另外，在访问缓存名单时如果返回一个HTTP404错误（页面未找到），或者410错误（永久消失），则触发obsolete事件。 在整个过程中，如果任何与本地缓存有关的处理中发生错误的话，都会触发error事件。可能会触发error事件的情况分为以下几种。 缓存名单返回一个HTTP404错误（页面未找到），或者410错误（永久消失）。 缓存名单被找到且没有更改，但引用缓存名单的HTML页面不能正确下载。 缓存名单被找到且被更改，但浏览器不能下载某个缓存名单中列出的资源。 开始更新本地缓存时，缓存名单再次被更改。 【例8-2】 为了说明这个事件流程，在下面的代码中，将浏览器与服务器在交互过程中所触发的一系列事件用文字的形式显示在页面上，这个页面中可以看出这些事件发生的先后顺序。其主要代码如下： !DOCTYPE HTML html manifest=applicationCacheEvent.manifest head meta charset=UTF-8 titleapplicationCache事件流程示例/title script function drow() { var msg=document.getElementById(mr); applicationCache.addEventListener(checking, function() { mr.innerHTML+=checkingbr/; }, true); applicationCache.addEventListener(noupdate, function() { mr.innerHTML+=noupdatebr/; }, true); applicationCache.addEventListener(downloading, function() { mr.innerHTML+=downloadingbr/; }, true); applicationCache.addEventListener(progress, function() { mr.innerHTML+=progressbr/; }, true); applicationCache.addEventListener(updateready, function() { mr.innerHTML+=updatereadybr/; }, true); applicationCache.addEventListe