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

下載本文檔

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

文檔簡介

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

溫馨提示

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

評論

0/150

提交評論