移动互联网之页面数据离线处理_第1页
移动互联网之页面数据离线处理_第2页
移动互联网之页面数据离线处理_第3页
移动互联网之页面数据离线处理_第4页
移动互联网之页面数据离线处理_第5页
已阅读5页，还剩38页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

目录离线应用根底检测本地缓存的更新状态实例11-4：开发一个离线留言系统实例11-1：简单的离线应用程序实例11-2：检测网络的当前状态实例11-3：online、offline事件检测当前网络状态综合实例——开发一个离线式日历提醒系统1离线应用根底离线Web应用程序可以在无法连接Web效劳器时运行，它的工作原理如下：当应用程序与效劳器建立联系时，浏览器会在本地缓存所有URL清单中的资源文件。当应用与效劳器失去联系时，浏览器会调用缓存的文件来支撑Web应用程序的正常运行。离线Web应用程序核心元素如右图所示。右图中的DB并不是指效劳器端的数据库，而是指本地数据库，例如SQLite、IndexedDB等。Manifest是一个文件，是离线Web应用程序的强制性部署描述符组件，它列举了需要加载的文件。离线Web应用程序核心元素1离线应用根底11.1.1开发离线应用程序在开发支持离线Web的应用程序时，开发者通常需要完成下面几项工作：离线资源缓存：需要一种方式来指明应用程序离线工作时所需的资源文件。这样，浏览器才能在在线状态时，将这些文件缓存到本地。此后，当用户离线访问应用程序时，这些资源文件会自动加载，从而让用户正常使用。HTML5中，通过cachemanifest文件指明需要缓存的资源，并支持自动和手动两种缓存更新方式，将在11.2节中进行介绍。在线状态检测：开发者需要知道浏览器是否在线，这样才能够针对在线或离线的状态，做出对应的处理。在HTML5中，提供了两种检测当前网络是否在线的方式，将在实例11-1和实例11-2中进行介绍。本地数据存储：离线时，需要能够把数据存储到本地，以便在线时同步到效劳器上。为了满足不同的存储需求，HTML5提供了DOMStorage和WebSQLDatabase两种存储机制。前者提供了易用的key/value对存储方式，而后者提供了根本的关系数据库存储功能。1离线应用根底11.1.1开发离线应用程序具体实现根本流程如下：编写一个manifest类型的文件，列出需要通过浏览器缓存至本地的资源性文件。开发一个Web页面，通过<html>元素的“manifest〞属性将manifest文件与页面绑定。对效劳器端进行配置，使其能读取manifest类型的文件。1离线应用根底11.1.2manifest文件详解在移动Web页面应用中，为了能在离线状态下继续访问Web应用，需要将缓存文件的URL写入manifest文件中。当浏览器与效劳器建立联系后，浏览器就会根据manifest文件所列的缓存清单，将相应的资源文件缓存在本地。manifest文件可以实现如下管理功能：需要保存哪些文件不需要保存哪些文件在线与离线时需要调用哪些文件在具体应用时，使用文本文件的编辑器就可以新建一个manifest文件，在保存时需要将扩展名设置为“.manifest〞即可。1离线应用根底例如，以下代码新建了一个manifest文件。CACHEMANIFESTCACHE:#下面列出了带有相对路径的资源文件Js0.jscss0.cssImages/img0.jpgImages/img1.pngNETWORK:#下面列出了在线时需要访问的资源文件Index.jspOnline.doFALLBACK:#以成对形式列出不可访问文件的替补资源文件/Project/Index.jsp/BkProject/Index.jsp1离线应用根底对上述代码的具体说明如下所示。“CACHE:〞标记：表示离线时浏览器需要缓存到本地的效劳器资源文件列表。当为某个页面编写manifest类型文件时，不需要将该页面放入列表中，因为浏览器在进行本地资源缓存时会自动缓存这个页面。“NETWORK:〞标记：表示在线时需要访问的资源文件列表，这些文件只有在浏览器与效劳器之间建立联系时才能访问。如果设置为“*〞，表示除了在“CACHE：〞标记中标明需要缓存的文件之外都不进行本地缓存。“FALLBACK:〞标记：表示以成对方式列出不访问文件的替补文件。其中前者是不可访问的文件，后者是替补文件，即当“/Project/Index.jsp〞文件不可访问时，浏览器会尝试访问“/BkProject/Index.jsp〞文件。1离线应用根底在编写manifest文件的代码时，需要注意以下几点：〔1〕在manifest文件中，第一行必须是“CACHEMANIFEST〞，说明这是一个通过浏览器将效劳器资源进行本地缓存的格式文件。〔2〕在编写注释时需要另起一行，并且以“#〞开头。〔3〕manifest文件的内容允许重复编写分类标记，即可以写多个“CACHE：〞标记或另外两种标记。〔4〕如果没有找到分类的标记，那么都被视为“CACHE：〞标记下的资源文件。〔5〕建议通过注释的方式标明每一个manifest类型文件的版本号，以便于更新文件时使用。例如在上面的演示代码中，“〞表示内定的版本号。1离线应用根底在创立完manifest类型文件后，就可以通过页面中<html>元素的“manifest〞属性，将页面与manifest类型文件绑定起来。代码如下：<htmlmanifest="tmp.manifest">这样在浏览器中查看页面时，会自动将manifest类型文件中所涉及的资源文件缓存在本地。1离线应用根底11.1.3配置IIS效劳器完成manifest文件的创立并将该文件与Web页进行了绑定后，接下来需要设置效劳器支持扩展名为“.mainfest〞的文件，否那么效劳器无法读取mainfest类型的文件。接下来以Windows7系统为例，介绍配置IIS效劳器选项的过程。〔1〕进入Win7的控制面板，单击“程序和功能〞选项，在弹出的对话框中单击左侧的“翻开或关闭Windows功能〞项。〔2〕在安装Windows功能的选项菜单，将Internet信息效劳的所有组件全部勾起来。〔3〕安装完成后，再次翻开控制面板，翻开管理工具，单击Internet信息效劳〔IIS〕管理器。〔4〕在弹出的对话框中，依次单击左边的“网站〞→“默认网站〞选项，然后双击右侧IIS组的“MIME〞类型图标。查看是否存在“.manifest〞类型，如果已经存在将其值改为“text/cache-manifest〞即可。1离线应用根底〔5〕如果不存在“.manifest〞类型那么在空白处右击鼠标，在弹出的快捷菜单中选择“添加〞选项，会弹出新建文件类型的对话框。在对应的“文件扩展名〞文本框中输入“.manifest〞，在“MIME类型〞文本框中输入“text/cache-manifest〞。单击“确定〞按钮，此时便完成了扩展名为“.manifest〞文件类型的创立。通过上述实现步骤，成功为IIS创立了一个扩展名为“.manifest〞的文件类型，使效劳器能够支持manifest文件，实现对应站点下Web页离线访问的功能。2检测本地缓存的更新状态浏览器第一次访问Web应用程序时将manifest文件中指定的文件保存在本地缓存中，并在manifest文件内容变化时更新缓存，而需要缓存的资源文件的内容变化时，那么需要手动更新缓存。在HTML5标记语言中，applicationCache对象表示本地缓存。开发离线应用程序时，通过调用该对象的onUpdateReady事件来监测本地缓存是否更新完成。在当前有如下两种手动更新本地缓存的方法：直接调用applicationCache对象的update()方法具体调用格式如下：window.applicationCache.update()2检测本地缓存的更新状态在onUpdateReady事件中调用swapCache()方法如果与页面绑定的manifest文件的内容发生变化时，将会引起本地缓存的更新而触发updateready事件。基于此特征，可以在updateready事件中编写实时监测本地缓存是否完成更新的代码。swapCache()方法与update()方法的功能都是更新本地缓存，两者有一些不同：更新本地缓存的时间不一样：swapCache()方法要早于update()方法将本地的缓存进行更新，swapCache()方法是将本地缓存立即更新。在移动Web页面应用中，无论是使用哪种方法，当前执行的页面都不会立即显示本地缓存更新后的页面效果，都要重新加载一次或手动刷新页面后才能发挥作用。触发事件不一样：必须在updateready事件中才能调用swapCache()方法，而update()方法随时可以调用。3实

例11-1

简

单

的

离

线

应

用

程

序在本实例的具体实现流程如下：〔1〕新建一个HTML5页面，当浏览该页面时，通过JS文件js1.js来获取效劳器时间，并按照指定的时间格式动态地显示在页面中。〔2〕当中断与效劳器的联系再次浏览该页面时，仍然可以在页面中动态地显示时间。实例文件11-1.html的具体实现代码如下：<!DOCTYPEhtml><htmlmanifest="1.manifest"><head><metacharset="utf-8"/><title>开发一个简单离线应用</title><scripttype="text/JavaScript"language="jscript"src="js1.js"/>3实

例11-1

简

单

的

离

线

应

用

程

序</script></head><body><fieldset><legend>简单离线例如</legend><outputid="time">正在获取当前时间...</output></fieldset></body></html>3实

例11-1

简

单

的

离

线

应

用

程

序function$$(id){returndocument.getElementById(id);}//获取当前格式化后的时间并显示在页面上functiongetCurTime(){ vardt=newDate(); varstrHTML="当前时间是"; strHTML+=RuleTime(dt.getHours(),2)+":"+ RuleTime(dt.getMinutes(),2)+":"+ RuleTime(dt.getSeconds(),2); $$("time").value=strHTML;}JS文件js1.js自定义了两个函数，分别用于获取系统时间与格式化显示的时间。其具体实现代码如下：3实

例11-1

简

单

的

离

线

应

用

程

序//转换时间显示格式functionRuleTime(num,n){ varlen=num.toString().length; while(len<n){ num="0"+num; len++; } returnnum;}//定时执行setInterval(getCurTime,1000);3实

例11-1

简

单

的

离

线

应

用

程

序CACHEMANIFESTCACHE:js1.js另外，在11-1.html页面中通过<html>元素的“manifest〞属性绑定了一个“manifest〞类型文件l.manifest，在此文件中列举了效劳器需要缓存至本地的代码。其具体代码如下：在上述代码中缓存了两个资源文件，分别是jsl.js和11-l.html本身。因为使用了本地缓存，所以使浏览器与效劳器之间的数据交互按照如下步骤进行：〔1〕浏览器：请求访问文件11-l.html。〔2〕效劳器：返回文件11-l.html。3实

例11-1

简

单

的

离

线

应

用

程

序〔3〕浏览器：解析返回的文件11-l.html，请求效劳器返回文件11-l.html所包含的全部资源性文件，包括文件l.manifest。〔4〕效劳器：返回浏览器所请求的所有资源文件。〔5〕浏览器：解析返回的文件l.manifest，请求返回URL清单中的资源文件。〔6〕效劳器：再次返回URL清单中的资源文件。〔7〕浏览器：更新本地缓存，将新获取的URL清单中的资源文件更新至本地缓存中。在进行更新过程中会触发onUpdateReady事件，表示完本钱地缓存的更新工作。〔8〕浏览器再次查看访问文件11-l.html的页面，如果文件l.manifest没有发生变化，那么直接调用本地的缓存以响应用户的请求，从而实现离线访问页面的功能。3实

例11-1

简

单

的

离

线

应

用

程

序本实例执行后的效果如以下图所示。执行效果4实例11-2

检测网络的当前状态开发浏览器与效劳器在数据交互时的离线应用程序，必须获取应用的在线状态。只有检测出页面的在线状态，才能在离线后将数据保存在本地，在上线时将本地数据同步至效劳器，从而实现离线数据交互功能。在HTML5标记语言中，可以通过访问onLine属性和触发online事件的方法分别检测应用是否在线。onLine属性是一个布尔值，当值为true时表示在线，否那么表示离线。如果当前的网络状态发生了变化，属性onLine的值就会随之发生变动。基于此，可以通过获取属性onLine的值来检测当前网络的状态，确定应用是否在线或离线，从而可以编写出不同的代码。4实例11-2

检测网络的当前状态在移动Web页面应用中，navigator是一个独立的对象，用于向用户返回浏览器和操作系统的相关信息，所有信息都是以navigator对象的属性方式进行调用的。在日常的代码开发过程中，除使用onLine属性检测当前浏览器的在线模式外，navigator对象还有其他一些常用的属性，如下表所示。navigator对象中常用属性4实例11-2

检测网络的当前状态在本实例的实现文件是11-2.html，具体实现流程如下：〔1〕新建一个HTML5页面，设置在页面加载时调用onLine属性。〔2〕如果属性onLine的值为true，那么在页面中显示“在线〞字样，否那么显示“离线〞字样。实例文件11-2.html的具体实现代码如下：<!DOCTYPEhtml><htmlmanifest="2.manifest"><head><metacharset="utf-8"/><title>通过onLine属性检测网络的当前状态</title><scripttype="text/JavaScript"language="jscript"src="js2.js"/>4实例11-2

检测网络的当前状态</script></head><bodyonLoad="pageload();"><fieldset><legend>通过onLine属性检测网络的当前状态</legend><pid="pStatus"></p></fieldset></body></html>4实例11-2

检测网络的当前状态function$$(id){returndocument.getElementById(id);}//自定义页面加载时调用的函数functionpageload(){if(navigator.onLine){Status_Handle("在线");}else{Status_Handle("离线");}}JavaScript文件js2.js中自定义了函数pageload()。其功能是根据“onLine〞属性检测当前网络的状态，在页面加载时调用。文件js2.js的具体实现代码如下：4实例11-2

检测网络的当前状态//自定义显示执行过程中状态的函数functionStatus_Handle(message){$$("pStatus").style.display="block";$$("pStatus").innerHTML=message;}在上述代码中，通过调用navigator对象的属性onLine来检测当前浏览器的在线模式。如果为“true〞表示在线，否那么表示离线。4实例11-2

检测网络的当前状态CACHEMANIFESTCACHE:js2.js再看manifest文件2.manifest，功能是列举效劳器需要缓存至本地的文件清单，具体实现代码如下：执行后的效果如以下图所示。执行效果5实

例

11-3

o事

n件

l检

I测

n当

e前

、网

o络

f状

f态

l大

I大

n大e大使用navigator对象中的onLine属性来检测当前网络的状态时，因为该属性有滞后性，所以不能及时反响当前网络的变化状态。为了解决这个问题，在HTML5中可以调用online与offline事件及时侦测网络在线与离线的状态。这两个事件是基于body对象触发的，以冒泡的方式传递给document、window对象，因此这两个事件可以准确及时地捕获当前浏览器的在线状态。在本实例的实现文件是11-3.html，具体实现流程如下：〔1〕新建一个HTML5页面，在浏览页面的过程中，如果用户有切换网络连接状态的操作，页面将自动触发online或offline事件。〔2〕如果是连接网络，那么在页面中显示“在线〞提示，否那么显示“离线〞提示。5实

例

11-3

o事

n件

l检

I测

n当

e前

、网

o络

f状

f态

l大

I大

n大e大实例文件11-3.html的具体实现代码如下：<!DOCTYPEhtml><htmlmanifest="she7.manifest"><head><metacharset="utf-8"/><title>通过online与offline事件检测网络的当前状态</title><scripttype="text/JavaScript"language="jscript"src="js3.js"/></script></head><body><fieldset><legend>通过online与offline事件检测网络的当前状态</legend><pid="pStatus">连接已经断开</p></fieldset></body></html>5实

例

11-3

o事

n件

l检

I测

n当

e前

、网

o络

f状

f态

l大

I大

n大e大再看JavaScript文件js3.js，设置当页面加载时调用函数pageload()为window对象添加“online〞事件和“offline〞事件。文件js3.js的具体实现的代码如下所示。//JavaScriptDocumentfunction$$(id){returndocument.getElementById(id);}//自定义页面加载时调用的函数functionpageload(){window.addEventListener("online",function(){Status_Handle("网络连接正常");},false);5实

例

11-3

o事

n件

l检

I测

n当

e前

、网

o络

f状

f态

l大

I大

n大e大

window.addEventListener("offline",function(){Status_Handle("连接已经断开");},false);}//自定义显示执行过程中状态的函数functionStatus_Handle(message){$$("pStatus").style.display="block";$$("pStatus").innerHTML=message;}因为本实例是通过事件机制捕获网络状态的，所以只有在触发online事件和offline事件时才能在页面中展现提示信息。通常在手动或异常使网络断开后会触发offline事件，翻开的页面将自动侦测，无需刷新，并在页面中显示“连接已断开〞的提示。在手动或自动重试的方式使网络连接成功后，翻开的页面也无需刷新，自动在页面中显示“网络连接正常〞的提示。如果不触发网络断开与连接的事件，那么不会在页面中展示任何提示信息。5实

例

11-3

o事

n件

l检

I测

n当

e前

、网

o络

f状

f态

l大

I大

n大e大再看manifest文件she3.manifest，功能列举效劳器需要缓存至本地的文件清单，具体实现代码如下：CACHEMANIFESTCACHE:js3.js本实例执行后的效果如以下图所示。执行效果6实

例11-4

开

发

一

个

离

线

留

言

系

统在HTML5网页开发过程中，如果目标对象仅仅是是简单的静态页面，那么使用CacheManifest处理方法就可以实现离线页面的访问。但如果是数据交互型的离线应用，不仅需要在离线时访问页面，而且还要支持数据在离线时的传输功能。要想数据在离线时也能与效劳器发生交互功能，通常的处理方式如下：用onLine属性来检测当前的网络状态，如果是离线，那么先将交互的数据暂时存储至本地，例如保存到localStorage对象或WebSQL数据库中。在上线时将存储的数据同步至效劳器，从而实现数据在离线时的交互功能。6实

例11-4

开

发

一

个

离

线

留

言

系

统下面通过一个演示实例来讲解离线留言系统的开发方法。本实例的功能是创立一个HTML5页面，无论是网络在线或离线时都可以访问页面，并在文本框中输入留言内容。单击“发表〞按钮时，如果是在线状态，将向效劳器与本地存储对象同时写入数据；如果是离线那么将数据保存在本地，等上线时再将存储的数据同步至效劳器中。具体实现代码如下：<!DOCTYPEhtml><htmlmanifest="4.manifest"><head><metacharset="utf-8"/><title>离线留言系统</title><linkhref="css.css"rel="stylesheet"type="text/css"><scripttype="text/JavaScript"language="jscript"src="js4.js"/></script></head>6实

例11-4

开

发

一

个

离

线

留

言

系

统<bodyonLoad="SynclocalData();"><ulid="ulMessage">

亲，请稍等，正在读取数据中...</ul><pclass="p4"><textareaid="txtContent"class="inputtxt"cols="37"rows="5"></textarea><br><inputid="btnAdd"type="button"value="发表"class="inputbtn"onClick="btnAdd_Click();"></p></body></html>6实

例11-4

开

发

一

个

离

线

留

言

系

统function$$(id){returndocument.getElementById(id);}//点击"发表"按钮时调用functionbtnAdd_Click(){//获取文本框中的内容varstrContent=$$("txtContent").value;//如果不为空，那么保存if(strContent.length>0){varstrKey=RetRndNum(4);varstrVal=strContent;然后编写脚本文件js4.js，具体代码如下所示。6实

例11-4

开

发

一

个

离

线

留

言

系

统if(navigator.onLine){ //如果在线向效劳器端增加数据AddServerData(strKey,strVal);}localStorage.setItem(strKey,strVal);}//重新加载SynclocalData();//清空原先内容$$("txtContent").value="";}6实

例11-4

开

发

一

个

离

线

留

言

系

统//获取保存数据并显示在页面中functionSynclocalData(){//标题局部varstrHTML="<liclass='li_h'>";strHTML+="<spanclass='spn_a'>ID</span>";strHTML+="<spanclass='spn_b'>内容</span>";strHTML+="</li>";//内容局部for(varintI=0;intI<localStorage.length;intI++){//获取Key值varstrKey=localStorage.key(intI);//过滤键名内容6实

例11-4

开

发

一

个

离

线

留

言

系

统varstrVal=localStorage.getItem(strKey);strHTML+="<liclass='li_c'>";strHTML+="<spanclass='spn_a'>"+strKey+"</span>";strHTML+="<spanclass='spn_b'>"+strVal+

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论