HTML5 & CSS3初學者指南(3) – HTML5新特性

標籤：重新整理   電腦桌   element   dem   活動   代碼實現   cat   header   訪問   

介紹

本文介紹了 HTML5 的一些新特性。主要包含以下幾個方面:

• Web 儲存

• 地理位置

• 拖放

• 伺服器發送事件

 

Web儲存

HTML5 Web 儲存的設計與構想是一個更好的機制來儲存用戶端的網路資料。它是通過一個網路瀏覽器作為用戶端資料庫實現的，它允許網頁以索引值對的形式來儲存資料。

它具有以下特徵：

• 每個原始網站/域最多可儲存 5MB 的資料。

• 你可以通過屬性和方法來使用 JavaScript 操作 web 儲存空間中的資料實現訪問。

• 就像 cookies，你可以選擇將保持資料（維持），即使你已經離開了該網站，關閉了瀏覽器選項卡，退出了瀏覽器或關閉了電腦。

• 不像 cookies 這種由伺服器端指令碼建立的，web儲存是由用戶端指令碼如 JavaScript 建立。

• 不像 cookies，web 儲存中的資料不會自動伴隨伺服器端每一次 HTTP 要求。

• Web 儲存在主流的 網頁瀏覽器中都是原生支援的，如 Chrome，Opera，Firefox，Safari 和 IE8 +。換句話說，不需要第三方外掛程式。

網路儲存提供了2種不同的儲存地區- 會話儲存和本機存放區 –它們在範圍和時限有所不同，需要在不同情況下使用。

 會話儲存

會話儲存，資料以字串的形式進行儲存，只會持續在當前的會話。當瀏覽器視窗關閉時，資料將會被刪除。會話儲存是專門用於同一個使用者在不同的瀏覽器中使用相同的網站同時進行多個事務的情況。每一個瀏覽器視窗中的事務會擷取它們自己會話儲存的備份，這些會話備份是和其它瀏覽器視窗中的另一個事務不同的。當使用者關閉瀏覽器視窗時，隸屬於這個視窗的會話儲存資料將會繼續存在。以這種方式，交易資料不會從一個瀏覽器視窗泄露到另一個視窗。會話儲存就是cookies確定的解決方案，正如 HTML5 Web儲存規格 陳述的：

引用：

“如果使用者使用相同的網站在兩個不同的視窗購買了飛機票。如果網站使用 Cookie 來跟蹤使用者已購買的票據，則當使用者從兩個視窗點擊頁面跳轉時，當前正在購買的票將會從一個視窗“泄漏”到另一個，從而可能導致使用者在沒意識到的情況下，為同一個航班夠買了兩張票。

會話儲存必須用於處理機密和敏感資訊的網路活動，如信用卡號碼，社會保險號碼和登入認證。這些資訊很容易受到“DNS欺騙”的攻擊，所以不應該儲存超過一個單個會話。”

如何建立並訪問一個 sessionStorage：

<script type="text/javascript">sessionStorage.lastname="Smith";document.write(sessionStorage.lastname);</script>

 

本機存放區

本機存放區，資料以字串的形式進行儲存，並且會一直持續下去（除非你明確地刪除它）。即使瀏覽器視窗關閉了資料也會一直存在，同時如果接下來對相同 origin 的訪問使用的是相同的瀏覽器，那麼資料也是可用的。本機存放區是專為儲存跨越多個瀏覽器視窗和持續的時間超過當前會話的資料。

不像案頭系統，Web 應用程式一直缺乏離線工作的能力。現在不一樣了，HTML5 本機存放區的出現，已經使離線工作成為了可能。試想一下你正在填寫一份多頁的 Web 表單，或者撰寫一篇文章時，到期日已經迫在眉睫，突然發生網路故障中斷。你將會失去你精心建立的所有資料。因為有了本機存放區，你就可以繼續離線工作，而 Web 應用程式會使用一些用戶端指令碼如 JavaScript 間歇性地將你的工作儲存到本機存放區。

一個網站可以讓使用者自訂網頁的主題和布局，並在本機存放區中儲存這些設定。以這種方式，使用者可以在後續訪問中看到自己個人的網頁。

如何建立和訪問 localStorage：

<script type="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname);</script>

 

地理定位

HTML geolocation API 只有一個對象，就是 navigator.geolocation 對象。你可以將 navigator.geolocation 比作瀏覽器中的指南針。瀏覽器是否支援這個 API，還有待確認。你可以通過將以下的 if-else 寫入到自己的代碼中，來檢測瀏覽器是否支援。

// Check whether browser supports Geolocation API or notif (navigator.geolocation) // Supported{    // place the geolocation code here}else // Not supported{    alert("Oop! This browser does not support HTML5 Geolocation.");}

navigator.geolocation 對象公開了3中方法 getCurrentPosition（），watchPosition（），和clearWatch（）。

• getCurrentPosition（）

getCurrentPosition（）方法用來獲得使用者的當前位置。

navigator.geolocation.getCurrentPosition(getPosition);

• watchPosition（）

watchPosition（）方法與 getCurrentPosition（）方法是幾乎相同的。它們都返回當前位置資訊並具有相同的方法簽名 - 一個成功的回呼函數，一個錯誤的回呼函數和一個位置選項對象。唯一的區別在於， 一旦啟用了點擊按鈕，getCurrentPosition（）方法會返回位置資訊；而 watchPosition（）方法將繼續獲得位置資訊，一旦使用者裝置的位置發生變化並在初始話啟用之後。

該 watchPosition（）方法會返回一個 watch ID，當不再需要擷取位置時，可以用 watch ID 來停止 watchPositon（）方法。

• clearWatch（）

clearWatch（）方法以 watchPosition（）方法的 watch ID 作為參數，用於停止執行 watchPosition（）方法。

 

拖放

我們已經很熟悉拖放電腦案頭上的檔案、檔案夾和表徵圖了。拖放是一種任何的案頭應用具有的強有力的也是理所當然應該具備的使用者互動。使用像滑鼠這樣的指標裝置，通過拖放來實現拷貝，插入和刪除任何電腦案頭上的檔案和對象。

HTML5 Drag and Drop API 提供了對瀏覽器拖放操作原生的支援，使得代碼實現拖放變得更容易。

• 設定元素為可拖放

首先，為了使元素可拖動，把 draggable 屬性設定為 true ：

<img draggable="true" />

• 拖動什麼

然後，規定當元素被拖動時，會發生什麼。

在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的資料。

dataTransfer.setData( ) 方法設定被拖資料的資料類型和值：

function drag(ev){    ev.dataTransfer.setData("Text",ev.target.id);}

• 放到何處

ondragover 事件規定在何處放置被拖動的資料。

預設地，無法將資料/元素放置到其他元素中。如果需要設定允許放置，我們必須阻止對元素的預設處理方式。

這要通過調用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

• 進行放置

當放置被拖資料時，會發生 drop 事件。

在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：

function drop(ev){    ev.preventDefault();    var data=ev.dataTransfer.getData("Text");    ev.target.appendChild(document.getElementById(data));}

 

伺服器發送事件

傳統的使用者和網站之間的互動模式是使用者發起的請求和應答類型。使用者通過瀏覽器主動發起請求，並且等待伺服器的應答。為了檢查某個特定的網頁上是否有更新，使用者需要通過點擊瀏覽器上更新/重新登入按鈕來向伺服器發送新的請求。換言之，伺服器必須不間斷的將伺服器側的更新推送出去。當資訊不間斷的無法預測的變化時，通過這種方式來擷取一些關鍵的做決定的資訊，就不是特別有用了。例如股票價格更新，新聞傳遞，天氣預報等。

當資訊到達時，HTML 伺服器發送事件（SSE）使得伺服器能夠將資訊發送（推送）到用戶端，避免了伺服器持續推送的需要。這也使得網站在不需要任何第三方外掛程式的情況下，能夠為用戶端提供推送服務。

• Server-Sent 事件 - 單向訊息傳遞

Server-Sent 事件指的是網頁自動擷取來自伺服器的更新。

以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過伺服器發送事件，更新能夠自動到達。

• 接收 Server-Sent 事件通知

EventSource 對象用於接收伺服器發送事件通知：

var source=new EventSource("demo_sse.php");source.onmessage=function(event){   document.getElementById("result").innerHTML+=event.data + "<br />";};

代碼解釋：  

• 建立一個新的 EventSource 對象，然後規定發送更新的頁面的 URL（本例中是 "demo_sse.php"）
• 每接收到一次更新，就會發生 onmessage 事件
• 當 onmessage 事件發生時，把已接收的資料推入 id 為 "result" 的元素中

 

• 檢測 Server-Sent 事件支援

在上面的 TIY 執行個體中，我們編寫了一段額外的代碼來檢測伺服器發送事件的瀏覽器支援情況：

if(typeof(EventSource)!=="undefined"){   // Yes! Server-sent events support!   // Some code.....}else{    // Sorry! No server-sent events support..}

• 伺服器端代碼執行個體

為了讓上面的例子可以運行，您還需要能夠發送資料更新的伺服器（比如 PHP 和 ASP）。

伺服器端事件流的文法是非常簡單的。把 "Content-Type" 前序設定為 "text/event-stream"。現在，您可以開始發送事件流了。

PHP 代碼 (demo_sse.php)：

<?phpheader(‘Content-Type: text/event-stream‘);header(‘Cache-Control: no-cache‘);$time = date(‘r‘);echo "data: The server time is: {$time}\n\n";flush();?>

ASP 代碼 (VB) (demo_sse.asp):

<%Response.ContentType="text/event-stream"Response.Expires=-1Response.Write("data: " & now())Response.Flush()%>

代碼解釋：

• 把前序 "Content-Type" 設定為 "text/event-stream"
• 規定不對頁面進行緩衝
• 輸出發送日期（始終以 "data: " 開頭）
• 向網頁重新整理輸出資料

總結

本文介紹的 HTML5 一些新特性就到這裡，在後面一篇文章中，我們將會學習到 HTML5 的 Canvas 知識。

HTML5 & CSS3初學者指南(3) – HTML5新特性