HTML5與CSS3權威指南.pdf5

標籤：style   http   java   使用   os   io   strong   檔案   

第9章 通訊API

跨文檔訊息傳輸

HTML5提供了網頁文檔之間互相接收與發送資訊的功能，不僅同源（域+連接埠號碼）的Web網頁之間可以互相通訊，甚至可以實現跨域通訊

想要接受從其他視窗發過來的資訊，要對視窗對象的message事件進行監視

window.addEventListener("message",function(){...},false);

使用window對象的postMessage方法向其他視窗發送訊息

otherWindow.postMessage(message,targetOrigin);

第一個參數為所發送的訊息文本，也可以是任何的Javascript對象（通過JSON轉換對象為文本）；第二個參數為接受訊息的對象視窗的URL地址（例如http://localhost:8080/），可以使用萬用字元“*”指定全部地址。otherWindow為要發送視窗對象的引用，可以通過window.open返回該對象，或通過對window.frames數組指定序號返回單個frame所屬的視窗對象

1）通過訪問message事件的origin屬性，可以擷取訊息的發送源（發送源與網站的URL地址不是同一概念，發送源只包括網域名稱與連接埠號碼，最好檢查發送源）

2）message事件的data屬性，可以擷取訊息內容（可以是任何Javascript對象）

3）postMessage方法發送訊息

4）通過訪問message事件的source屬性，可以擷取訊息發送源的視窗對象（準確的說是視窗的代理對象）

JSON對象的stringify方法將Javascript對象轉換成文本，使用parse方法將文本還原為Javascript對象，任何Javascript對象可以通過這種方式在網頁文檔、連接埠、域之間傳遞訊息

Web Sockets通訊

Web Sockets是HTML5提供的在應用程式中用戶端與伺服器端之間進行的非HTTP通訊機制，它實現了用HTTP不容易實現的伺服器端的資料推送等智能通訊技術

建立一個非HTTP的雙向串連（即時永久，除非被顯式關閉），用戶端只要有一個被開啟的通訊端與伺服器建立了串連，伺服器就可以把資料推送過來，從被動到主動

使用Web Socket API

將URL字串作為參數，然後調用構造器

var webSocket=new WebSocket("ws://localhost:8005/socket");

URL字串必須以“ws”、“wss（加密通訊時）”文字作為開頭，javascript指令碼中可以通過訪問WebSocket對象的url屬性來重新擷取，使用WebSocket對象的send方法對伺服器發送資料

webSocket.send("data");

通過擷取onmessage事件控制代碼來接收伺服器傳過來的資料

webSocket.onmessage=function(event){

　　　　var data=event.data;

　　　　...

　　}

通過擷取onopen事件控制代碼來監聽socket的開啟事件

webSocket.onopen=function(event){

　　　　//開始通訊時的處理

　　};

擷取onclose事件控制代碼來監聽socket的關閉事件

webSocket.onclose=function(event){

　　　　//通訊結束時的處理

　　};

通過使用close方法來關閉socket，切斷通訊串連

webSocket.close();

另外還可以通過讀取readyState屬性值來擷取WebSocket對象的狀態

CONNECTING（數字為0）表示正在串連　　OPEN（數字為1）表示正在建立串連　　CLOSING（數字為2）表示正在關閉串連　　CLOSED（數字為2）表示已關閉串連

第10章 使用Web Workers處理線程

var worker=new Worker("worker.js");

需要注意的是，後台線程中不能訪問頁面或視窗對象，如果使用到則會引發錯誤

在後台線程中接收訊息

worker.onmessage=function(event){

　　　　//處理接收到的訊息

　　}

對後台線程發送訊息

work.postMessage(message);　　//文本資料

線程嵌套：線程中可以嵌套子線程，把一個較大的後台線程切成幾個子線程，在每個子線程中完成相對獨立的一部分

在多個子線程中進行資料的互動，步驟如下

1）先建立發送資料的子線程

2）子線程執行任務，再傳給主線程

3）再建立一個子線程，將主線程中的資料傳給新的子線程

4）新的子線程執行代碼

線程中可用的變數、函數與類

self：本線程範圍內的範圍

postMessage(message)：向建立的源視窗發送資訊

onmessage：接收訊息的事件控制代碼

importScript(urls)：匯入其他Javascript指令檔，可以是多個，匯入的檔案與使用該線程檔案的頁面必須是同一個域、同一個連接埠中

importScripts(‘script1.js‘,‘scripts\script2.js‘);

navigator對象：與window.navigator對象類似

sessionStorage/localStorage：可以線上程中使用WebStorage

XMLHttpRequest：可以線上程中使用Ajax請求

Web Workers：可以線上程中嵌套線程

setTimeout()/setInterval():線程中實現定時處理

close：結束本線程

eval()、isNan()等：可以使用Javascript核心函數

object：可以建立和使用本機物件

WebSockets：可以使用WebSocketsAPI向伺服器發送和接收資訊