Category Archives: HTML5

HTML5 教程-HTML5 Server-Sent 事件

Leave a reply

HTML Server-Sent 事件

Server-Sent 事件允許網頁從服務器獲得更新。

Server-Sent 事件- One Way Messaging

Server-Sent 事件指的是網頁自動從服務器獲得更新。

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

例如：Facebook/Twitter 更新、股價更新、新的博文、賽事結果，等等。

瀏覽器支持

表格中的數字指示完全支持server-sent 事件的首個瀏覽器。

API
SSE	6.0	不支持	6.0	5.0	11.5

接收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") {
    // 是的！支持服務器發送事件！
    // 一些代碼.....
} else {
    // 抱歉！不支持服務器發送事件！
}

服務器端代碼實例

為了使上例運行，您需要能夠發送數據更新的服務器（比如PHP 或ASP）。

服務器端事件流的語法非常簡單。請把」Content-Type」報頭設置為」text/event-stream」。現在，您可以開始發送事件流了。

PHP 中的代碼(demo_sse.php)：

<?php
header('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 = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

代碼解釋：

把報頭」Content-Type」設置為」text/event-stream」
規定不對頁面進行緩存
輸出要發送的日期（始終以」data: 」開頭）
向網頁刷新輸出數據

EventSource 對象

在上例中，我們使用onmessage 事件來獲取消息。不過還可以使用其他事件：

事件	描述
onopen	當通往服務器的連接被打開
onmessage	當接收到消息
onerror	當發生錯誤

HTML5 教程-HTML5 Web Workers

Leave a reply

HTML5 Web Workers

Web worker 是运行在后台的 JavaScript，不会影响页面的性能。

什么是 Web Worker？

当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。

Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。

浏览器支持

表格中的数字指示完全支持 Web Worker 的首个浏览器版本。

API
Web Worker	4.0	10.0	3.5	4.0	11.5

HTML Web Workers 实例

下面的例子创建了一个简单的 web worker，在后台计数：

计数：

亲自试一试

检测 Web Worker 支持

在创建 web worker 之前，请检测用户浏览器是否支持它：

if (typeof(Worker) !== "undefined") {
    // 是的！支持 Web worker！
    // 一些代码.....
} else {
    // 抱歉！不支持 Web Worker！
}

创建 Web Worker 文件

现在，让我们在一个外部 JavaScript 文件中创建我们的 web worker。

在此处，我们创建了计数脚本。该脚本存储于「demo_workers.js」文件中：

var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

以上代码中重要的部分是 postMessage() 方法 – 它用于向 HTML 页面传回一段消息。

注释: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。

创建 Web Worker 对象

现在我们已经有了 web worker 文件，我们需要从 HTML 页面调用它。

下面的代码行检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行「demo_workers.js」中的代码：

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

然后我们就可以从 web worker 发生和接收消息了。

向 web worker 添加一个「onmessage」事件监听器：

w.onmessage = function(event){ document.getElementById("result").innerHTML = event.data; };

当 web worker 传送消息时，会执行事件监听器中的代码。来自 web worker 的数据会存储于 event.data 中。

终止 Web Worker

当创建 web worker 后，它会继续监听消息（即使在外部脚本完成后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

复用 Web Worker

如果您把 worker 变量设置为 undefined，在其被终止后，可以重复使用该代码：

w = undefined;

完整的 Web Worker 实例代码

我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：

实例

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}

function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>

亲自试一试

Web Worker 和 DOM

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

window 对象
document 对象
parent 对象

HTML5 教程-HTML Server-Sent 事件

Leave a reply

HTML Server-Sent 事件

Server-Sent 事件允許網頁從服務器獲得更新。

Server-Sent 事件- One Way Messaging

Server-Sent 事件指的是網頁自動從服務器獲得更新。

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

例如：Facebook/Twitter 更新、股價更新、新的博文、賽事結果，等等。

瀏覽器支持

表格中的數字指示完全支持server-sent 事件的首個瀏覽器。

API
SSE	6.0	不支持	6.0	5.0	11.5

接收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") {
    // 是的！支持服務器發送事件！
    // 一些代碼.....
} else {
    // 抱歉！不支持服務器發送事件！
}

服務器端代碼實例

為了使上例運行，您需要能夠發送數據更新的服務器（比如PHP 或ASP）。

服務器端事件流的語法非常簡單。請把」Content-Type」報頭設置為」text/event-stream」。現在，您可以開始發送事件流了。

PHP 中的代碼(demo_sse.php)：

<?php
header('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 = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

代碼解釋：

把報頭」Content-Type」設置為」text/event-stream」
規定不對頁面進行緩存
輸出要發送的日期（始終以」data: 」開頭）
向網頁刷新輸出數據

EventSource 對象

在上例中，我們使用onmessage 事件來獲取消息。不過還可以使用其他事件：

事件	描述
onopen	當通往服務器的連接被打開
onmessage	當接收到消息
onerror	當發生錯誤

HTML5 教程-HTML Web Workers

Leave a reply

HTML Web Workers

Web worker 是运行在后台的 JavaScript，不会影响页面的性能。

什么是 Web Worker？

当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。

浏览器支持

表格中的数字指示完全支持 Web Worker 的首个浏览器版本。

API
Web Worker	4.0	10.0	3.5	4.0	11.5

HTML Web Workers 实例

下面的例子创建了一个简单的 web worker，在后台计数：

计数：

亲自试一试

检测 Web Worker 支持

在创建 web worker 之前，请检测用户浏览器是否支持它：

if (typeof(Worker) !== "undefined") {
    // 是的！支持 Web worker！
    // 一些代码.....
} else {
    // 抱歉！不支持 Web Worker！
}

创建 Web Worker 文件

现在，让我们在一个外部 JavaScript 文件中创建我们的 web worker。

在此处，我们创建了计数脚本。该脚本存储于「demo_workers.js」文件中：

var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

以上代码中重要的部分是 postMessage() 方法 – 它用于向 HTML 页面传回一段消息。

注释: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。

创建 Web Worker 对象

现在我们已经有了 web worker 文件，我们需要从 HTML 页面调用它。

下面的代码行检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行「demo_workers.js」中的代码：

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

然后我们就可以从 web worker 发生和接收消息了。

向 web worker 添加一个「onmessage」事件监听器：

w.onmessage = function(event){ document.getElementById("result").innerHTML = event.data; };

当 web worker 传送消息时，会执行事件监听器中的代码。来自 web worker 的数据会存储于 event.data 中。

终止 Web Worker

当创建 web worker 后，它会继续监听消息（即使在外部脚本完成后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

复用 Web Worker

如果您把 worker 变量设置为 undefined，在其被终止后，可以重复使用该代码：

w = undefined;

完整的 Web Worker 实例代码

我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：

实例

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}

function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>

亲自试一试

Web Worker 和 DOM

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

window 对象
document 对象
parent 对象

HTML5 教程-HTML5 應用程序緩存

Leave a reply

HTML5 應用程序緩存

使用應用程序緩存，通過創建cache manifest 文件，可輕鬆創建web 應用的離線版本。

什麼是應用程序緩存？

HTML5 引入了應用程序緩存（Application Cache），這意味著可對web 應用進行緩存，並可在沒有因特網連接時進行訪問。

應用程序緩存為應用帶來三個優勢：

離線瀏覽- 用戶可在應用離線時使用它們
速度- 已緩存資源加載得更快
減少服務器負載- 瀏覽器將只從服務器下載更新過或更改過的資源

瀏覽器支持

表格中的數字指示完全支持應用程序緩存的首個瀏覽器版本。

API
Application Cache	4.0	10.0	3.5	4.0	11.5

HTML Cache Manifest 實例

下例展示了帶有cache manifest 的HTML 文檔（供離線瀏覽）：

實例

<!DOCTYPE HTML>
<html manifest="demo.appcache">  <body> 文檔內容...... </body>  </html>

親自試一試

Cache Manifest 基礎

如需啟用應用程序緩存，請在文檔的<html> 標籤中包含manifest 屬性：

<!DOCTYPE HTML>
<html >manifest="demo.appcache" ... </html>

每個指定了manifest 的頁面在用戶對其訪問時都會被緩存。如果未指定manifest 屬性，則頁面不會被緩存（除非在manifest 文件中直接指定了該頁面）。

manifest 文件的建議文件擴展名是：」.appcache」。

注意： manifest文件需要設置正確的MIME-type，即」text/cache-manifest」。必須在web服務器上進行配置。

Manifest 文件

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。

manifest 文件有三個部分：

CACHE MANIFEST – 在此標題下列出的文件將在首次下載後進行緩存
NETWORK – 在此標題下列出的文件需要與服務器的連接，且不會被緩存
FALLBACK – 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如404 頁面）

CACHE MANIFEST

第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST /theme.css /logo.gif /main.js

上面的manifest 文件列出了三個資源：一個CSS 文件，一個GIF 圖像，以及一個JavaScript 文件。當manifest 文件被加載後，瀏覽器會從網站的根目錄下載這三個文件。然後，無論用戶何時與因特網斷開連接，這些資源依然可用。

NETWORK

下面的NETWORK 部分規定文件」login.php」永遠不會被緩存，且離線時是不可用的：

NETWORK: login.asp

可以使用星號來指示所有其他其他資源/文件都需要因特網連接：

NETWORK:
 *

FALLBACK

下面的FALLBACK 部分規定如果無法建立因特網連接，則用」offline.html」替代/html/ 目錄中的所有文件：

FALLBACK: /html/ /offline.html

註釋：第一個URI是資源，第二個是替補。

更新緩存

一旦應用被緩存，它就會保持緩存直到發生下列情況：

用戶清空瀏覽器緩存
manifest 文件被修改（參閱下面的提示）
由程序來更新應用緩存

實例- 完整的Cache Manifest 文件

CACHE MANIFEST
# 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js  NETWORK: login.asp  FALLBACK: /html/ /offline.html

提示：以」#」開頭的是註釋行，但也可滿足其他用途。應用的緩存只會在其manifest文件改變時被更新。如果您編輯了一幅圖像，或者修改了一個JavaScript函數，這些改變都不會被重新緩存。更新註釋行中的日期和版本號是一種使瀏覽器重新緩存文件的辦法。

關於應用程序緩存的注意事項

請留心緩存的內容。

一旦文件被緩存，則瀏覽器會繼續展示已緩存的版本，即使您修改了服務器上的文件。為了確保瀏覽器更新緩存，您需要更新manifest 文件。

註釋：瀏覽器對緩存數據的容量限制可能不太一樣（某些瀏覽器的限制是每個站點5MB）。