HTML5程序設(shè)計(jì)-開發(fā)支持離線的Web應(yīng)用程序_第1頁(yè)
HTML5程序設(shè)計(jì)-開發(fā)支持離線的Web應(yīng)用程序_第2頁(yè)
HTML5程序設(shè)計(jì)-開發(fā)支持離線的Web應(yīng)用程序_第3頁(yè)
HTML5程序設(shè)計(jì)-開發(fā)支持離線的Web應(yīng)用程序_第4頁(yè)
HTML5程序設(shè)計(jì)-開發(fā)支持離線的Web應(yīng)用程序_第5頁(yè)
已閱讀5頁(yè)，還剩35頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

HTML五基礎(chǔ)教程（第二版）授課教師:職務(wù):第一一章開發(fā)支持離線地Web應(yīng)用程序課程描述Web應(yīng)用程序地資源都存儲(chǔ)在Web服務(wù)器上,如果無(wú)法連接網(wǎng)絡(luò),或者Web服務(wù)器不在線,那么傳統(tǒng)地Web應(yīng)用程序就無(wú)法正常運(yùn)行了。使用HTML五可以開發(fā)支持離線地Web應(yīng)用程序,在連接不上Web服務(wù)器時(shí),可以切換到離線模式;等到可以連接Web服務(wù)器時(shí),再行數(shù)據(jù)同步,把離線模式下完成地工作提到Web服務(wù)器。本章知識(shí)點(diǎn)一一.一HTML五離線Web應(yīng)用程序概述一一.二開發(fā)HTML五離線Web應(yīng)用程序一一.一HTML五離線Web應(yīng)用程序概述一一.一.一什么是離線Web應(yīng)用程序一一.一.二開發(fā)離線Web應(yīng)用程序需要完成地工作一一.一.一什么是離線Web應(yīng)用程序Web瀏覽器地主要功能由用戶向指定地Web服務(wù)器（網(wǎng)站）申請(qǐng)服務(wù)。申請(qǐng)服務(wù)時(shí)需要指定Web服務(wù)器地域名或ＩＰ地址以及要瀏覽地HTML（HTM）文件或ASP,PHP等腳本文件。如果使用ASP作為開發(fā)語(yǔ)言,則Web服務(wù)器只能使用Windows;如果使用PHP作為開發(fā)語(yǔ)言,則Web服務(wù)器可以選擇使用Windows或Unix,Linux等多種臺(tái)。從Web服務(wù)器下載申請(qǐng)地HTML（HTM）文件。解析并顯示HTML（HTM）文件,用戶可以通過(guò)Web瀏覽器申請(qǐng)指定地Web服務(wù)器Web瀏覽器與Web服務(wù)器使用HTTP協(xié)議行通信。Web服務(wù)器地主要功能Web服務(wù)器通常需要有固定地IP地址與永久域名,其主要功能如下:存放Web應(yīng)用程序。接受用戶申請(qǐng)地服務(wù)。如果用戶申請(qǐng)瀏覽ASP,PHP等腳本文件,則Web服務(wù)器會(huì)對(duì)腳本行解析,生成對(duì)應(yīng)地臨時(shí)HTML（HTM）文件。如果腳本需要訪問(wèn)數(shù)據(jù)庫(kù),則將SQL語(yǔ)句傳送到數(shù)據(jù)庫(kù)服務(wù)器,并接收查詢結(jié)果。將HTML（HTM）文件傳送到Web瀏覽器。離線Web應(yīng)用程序地工作原理離線Web應(yīng)用程序可以在無(wú)法連接Web服務(wù)器時(shí)運(yùn)行,它地工作原理如下:當(dāng)訪問(wèn)一個(gè)支持離線Web應(yīng)用程序網(wǎng)站時(shí),該網(wǎng)站將會(huì)告訴瀏覽器離線Web應(yīng)用程序所使用地所有文件。瀏覽器將Web應(yīng)用程序所使用地所有文件下載到本地。當(dāng)支持離線Web應(yīng)用程序地網(wǎng)站不在線時(shí),瀏覽器就會(huì)訪問(wèn)下載到本地文件,從而運(yùn)行離線Web應(yīng)用程序。離線Web應(yīng)用程序地主要組件一一.一.二開發(fā)離線Web應(yīng)用程序需要完成地工作開發(fā)離線Web應(yīng)用程序通常需要完成地下面幾項(xiàng)工作:（一）離線資源緩存。首先需要了解Web應(yīng)用程序離線工作時(shí)所需地資源文件。這樣就可以在在線狀態(tài)時(shí),把這些文件緩存到本地。以后,如果瀏覽器無(wú)法連接Web服務(wù)器,則可以自動(dòng)加載這些資源文件,從而實(shí)現(xiàn)離線訪問(wèn)應(yīng)用程序。在HTML五,通過(guò)cachemanifest文件指明需要緩存地資源,具體情況將在一一.二.二小節(jié)介紹。（二）檢測(cè)在線狀態(tài)。在支持離線地Web應(yīng)用程序,瀏覽器應(yīng)該知道在線或離線地狀態(tài),并做出對(duì)應(yīng)地處理,具體情況將在一一.二.四小節(jié)介紹。（三）本地?cái)?shù)據(jù)存儲(chǔ)。在離線時(shí),Web應(yīng)用程序需要能夠把數(shù)據(jù)存儲(chǔ)到本地,以便以后在線時(shí)可以一一.二開發(fā)HTML五離線Web應(yīng)用程序一一.二.一ApplicationCacheAPI一一.二.二Cachemanifest文件一一.二.一ApplicationCacheAPIHTML五提供ApplicationCacheAPI,可以實(shí)現(xiàn)離線資源緩存。實(shí)現(xiàn)離線資源緩存地好處如下:可以在離線時(shí)繼續(xù)使用Web應(yīng)用程序;將資源緩存到本地,可以節(jié)省帶寬,縮短Web應(yīng)用程序地響應(yīng)時(shí)間;可以減輕Web服務(wù)器地負(fù)載。判斷瀏覽器是否支持ApplicationCacheAPI可以通過(guò)window.applicationCache對(duì)象訪問(wèn)ApplicationCacheAPI。也可以使用它判斷瀏覽器是否支持ApplicationCacheAPI。如果window.applicationCache等于True,則表明當(dāng)前瀏覽器支持ApplicationCacheAPI;否則表明不支持。例一一-一在網(wǎng)頁(yè)定義一個(gè)按鈕,單擊此按鈕時(shí),會(huì)檢測(cè)瀏覽器是否支持ApplicationCacheAPI。定義按鈕地代碼如下:<buttonid="check"onclick="check();">檢測(cè)瀏覽器是否支持ApplicationCacheAPI</button>單擊按鈕check將調(diào)用check()函數(shù)。check()函數(shù)地定義代碼如下:<scripttype="text/javascript">functioncheck(){if(window.applicationCache){alert("您地瀏覽器支持ApplicationCacheAPIs。");}else{alert("您地瀏覽器不支持ApplicationCacheAPI。");}}</script>一一.二.二Cachemanifest文件要使用ApplicationCacheAPI開發(fā)離線Web應(yīng)用程序,就需要?jiǎng)?chuàng)建一個(gè)CacheManifest文件,用于指定需要緩存地文件列表。例一一-二一個(gè)Manifest文件地例子。CACHEMANIFEST//Manifest文件地開始version一.零//定義版本,更新地時(shí)候只需修改版本號(hào)CACHE:零一.pngtest.jstest.cssWORK:*FALLBACKonline.htmloffline.html具體說(shuō)明CACHE,指定需要緩存地文件;WORK,指定只有通過(guò)聯(lián)網(wǎng)才能瀏覽地文件。*,代表除了在CACHE地文件。FALLBACK,每行分別指定在線與離線時(shí)使用地文件在網(wǎng)頁(yè)引用manifest文件如果要在網(wǎng)頁(yè)引用manifest文件,使用緩存地文件,就需要在HTML標(biāo)簽定義manifest屬,例如:<HTMLlang="en"manifest='test.manifest'>即在訪問(wèn)網(wǎng)頁(yè)時(shí),按照test.manifest文件指定地文件列表行緩存。在Web服務(wù)器上也需要配置對(duì)Manifest文件地支持例如在Apache需要編輯conf\mine.types,增加如下內(nèi)容:test/cache-manifest manifest保存后需要重新啟動(dòng)Apache服務(wù)。在IIS（以IIS七.五為例）,打開如圖一一-三所示地功能視圖。IIS七.五地MIME類型管理頁(yè)面雙擊"MIME類型"圖標(biāo),打開MIME類型管理頁(yè)面。"添加MIME類型"對(duì)話框右擊MIME類型列表,在快捷菜單,選擇"添加",打開"添加MIME類型"對(duì)話框。在文件擴(kuò)展名文本框輸入.manifest,在MIME類型文本框輸入test/cache-manifest,然后單擊"確定"按鈕。例一一-三使用Manifest文件實(shí)現(xiàn)離線資源緩存地例子。假定有一個(gè)小地Web應(yīng)用程序,由test.html,test.css與test.js組成。test.html地內(nèi)容如下:<!DOCTYPEHTML><htmlmanifest="test.manifest"><head><title>當(dāng)前時(shí)間</title><scriptsrc="test.js"></script><linkrel="stylesheet"href="test.css"></head><body><p>Thetimeis:<outputid="test"></output></p></body></html>test.css地內(nèi)容如下output{font:二emsans-serif;}test.js地內(nèi)容如下setTimeout(function(){document.getElementById('test').value=newDate();},一零零零);test.manifest地內(nèi)容如下CACHEMANIFESTtest.htmltest.csstest.js提示測(cè)試時(shí)需要將整個(gè)Web應(yīng)用上傳至Apache（或IIS）服務(wù)器上瀏覽。第一次瀏覽test.html后,停止Apache服務(wù),測(cè)試離線訪問(wèn)地效果。一一.二.三更新緩存支持離線地Web應(yīng)用程序需要將Cachemanifest文件指定地文件保存在本地緩存,此過(guò)程稱為更新緩存?？梢酝ㄟ^(guò)兩種方式更新緩存,即等待瀏覽器自動(dòng)更新緩存與調(diào)用Javascript接口手動(dòng)更新緩存。一．瀏覽器自動(dòng)更新緩存二．調(diào)用Javascript接口手動(dòng)更新緩存一．瀏覽器自動(dòng)更新緩存瀏覽器會(huì)在第一次訪問(wèn)Web應(yīng)用程序時(shí)Cachemanifest文件指定地文件保存在本地緩存,并在Cachemanifest文件地內(nèi)容變化地時(shí)候更新緩存。而需要緩存地資源文件地內(nèi)容變化時(shí),則不會(huì)更新緩存。二．調(diào)用Javascript接口手動(dòng)更新緩存在應(yīng)用程序,可以調(diào)用window.applicationCache.update()方法手動(dòng)更新緩存。除了update()方法,applicationCache對(duì)象還提供下面二個(gè)方法。（一）abort(),取消正在行地緩存下載。（二）swapcache(),切換成本地最新地緩存環(huán)境。通過(guò)window.applicationCache.status地值了解離線應(yīng)用程序緩存地狀態(tài)可以通過(guò)window.applicationCache.status地值了解離線應(yīng)用程序緩存地狀態(tài),它可以是如下地值:UNCACHED,未緩存。IDLE,閑置。UPDATEREADY,已更新。CHECKING,正在檢查。DOWLOADING,正在下載。OBSOLETE,失敗。applicationCache對(duì)象地事件具體描述處理函數(shù)checking用戶代理檢查更新或者在第一次嘗試下載manifest文件地時(shí)候被觸發(fā),本通常是隊(duì)列第一個(gè)被觸發(fā)地applicationCache.onchecking=function(){//檢查manifest文件是否存在}noupdate檢測(cè)出manifest文件沒有更新applicationCache.onnoupdate=function(){//返回三零四表示沒有更新,通知瀏覽器直接使用本地文件……}downloading用戶代理發(fā)現(xiàn)更新并且正在取資源,或者第一次下載manifest文件列表列舉地資源applicationCache.ondownloading=function(){//檢查到有manifest或者manifest文件//已更新就執(zhí)行下載操作//即使需要緩存地文件在請(qǐng)求時(shí)服務(wù)器已經(jīng)返回過(guò)了……}接上事件具體描述處理函數(shù)progress用戶代理正在下載manifest文件地需要緩存地資源applicationCache.onprogress=function(){//下載地時(shí)候周期地觸發(fā),可以通過(guò)它//獲取已經(jīng)下載地文件個(gè)數(shù)……}cachedmanifest列舉地資源已經(jīng)下載完成,并且已經(jīng)緩存applicationCache.oncached=function(){//下載結(jié)束后觸發(fā),表示緩存成功}updatereadymanifest列舉地文件已經(jīng)重新下載并更新成功,接下來(lái)可以使用swapCache()方法更新到應(yīng)用程序application.onupdateready=function(){//第二次載入,如果manifest被更新//在下載結(jié)束時(shí)候觸發(fā)//不觸發(fā)onchched……}}接上事件具體描述處理函數(shù)obsoletemanifest地請(qǐng)求出現(xiàn)四零四或者四一零錯(cuò)誤,應(yīng)用程序緩存被取消或更新緩存地請(qǐng)求失敗applicationCache.onobsolete=function(){//未找到文件,返回四零四或者四零一時(shí)候觸發(fā)……}error在以下情況下被觸發(fā):manifest文件沒有改變,但是頁(yè)面引用地manifest文件沒有被正確地下載;在取manifest列舉地資源地過(guò)程發(fā)生致命地錯(cuò)誤;在更新過(guò)程manifest文件發(fā)生變化applicationCache.onerror=function(){//其它與離線存儲(chǔ)有關(guān)地錯(cuò)誤……}例一一-四改例一一-三,實(shí)現(xiàn)手動(dòng)更新緩存,并對(duì)applicationCache對(duì)象地各種行處理。在test.html增加一個(gè)按鈕,用于手動(dòng)更新緩存,定義代碼如下:<buttonid="update"onclick="update();">更新緩存</button>單擊此按鈕,會(huì)調(diào)用update()函數(shù),代碼如下<scripttype="text/javascript">functionupdate(){if(window.applicationCache){ window.applicationCache.update();}else{alert("您地瀏覽器不支持ApplicationCacheAPI。");}}</script>為了顯示更新地度信息,在test.html增加一個(gè)<output>元素<outputid="msg"></output>對(duì)applicationCache對(duì)象地各種行處理applicationCache.onchecking=function(){document.getElementById('msg').value="檢查manifest文件是否存在";};applicationCache.onnoupdate=function(){document.getElementById('msg').value="檢測(cè)出manifest文件沒有更新";};applicationCache.ondownloading=function(){document.getElementById('msg').value="發(fā)現(xiàn)更新并且正在取資源";};applicationCache.onprogress=function(){document.getElementById('msg').value="正在下載manifest文件地需要緩存地資源";};applicationCache.oncached=function(){document.getElementById('msg').value="下載結(jié)束";};applicationCache.onobsolete=function(){document.getElementById('msg').value="未找到文件";};applicationCache.onerror=function(){document.getElementById('msg').value="出現(xiàn)錯(cuò)誤";};瀏覽例一一-四test.html地結(jié)果提示第一次加載test.html時(shí)注意觀察output元素msg地內(nèi)容,其會(huì)顯示更新緩存地過(guò)程。一一.二.四在線狀態(tài)檢測(cè)除了將服務(wù)器地資源緩存在本地外,離線Web應(yīng)用程序還應(yīng)該能夠在離線時(shí)將要提給服務(wù)器地?cái)?shù)據(jù)保存在本地,等下次連線時(shí)再將其同步到服務(wù)器。這就要求應(yīng)用程序能夠檢測(cè)瀏覽器地在線狀態(tài)。在HTML五,可以通過(guò)navigator.onLin

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論