【HTML5初探之通信API】跨域門檻不再高、資料推送不是夢

導航

【初探HTML5之使用新标簽布局】用html5布局我的部落格頁！

【HTML5初探之form标簽】解放表單驗證、增加檔案上傳、內建拖放

【HTML5初探之繪制圖像（上）】看我canvas元素引領下一代web頁面

【HTML5初探之繪制圖像（下）】看我canvas元素引領下一代web頁面

【HTML5初探之多媒體元素】視訊播放HTML5、Flash誰才是王道？

【HTML5初探之本地存儲】如果沒有資料庫。。。

【HTML5初探之離線應用】如何打造零請求、無流量的網站？

【HTML5初探之通信API】跨域門檻不再高、資料推送不是夢

【HTML5初探之Web Workers】網頁也能多線程

【HTML5初探之Geolocation API】讓我們來回去地理資訊

前言

HTML5新增通信相關兩個API，跨文檔消息傳輸與WEB Sockets API，

跨文檔消息傳輸功能，可以在不同網頁文檔，不同端口（跨域情況下）進行消息傳遞。

使用web sockets api 可以讓用戶端與伺服器端通過socket端口傳遞資料，這樣便可以使用資料推送技術。

跨文檔消息傳輸

在之前我們若想跨域擷取資訊會花很多功夫，現在隻要擷取網頁所在視窗對象執行個體變可以實作互相通信。

首先要想從其他視窗接受發過來的消息需要對其視窗對象進行監聽：

window.addevntListener('message', function () {}, false)

使用windows對象的postMessage方法向其他視窗發生資訊：

otherWindow.postMessage(message, targetOrigin)

第一個參數為發送文本，也可以是js對象（json）

第二個參數為接收消息對象視窗的URL，可以使用通配符

簡單示例：

post資訊

在以上基礎上我們做一點修改，我們在子頁面給出高寬按鈕，用于告訴父視窗怎麼改變iframe高寬：

父層代碼

子層代碼

最後為我們的e截個圖：

更加靈活的運用，該api還可以更厲害的運用，我們可以傳遞函數名什麼的，反正可做很多事情了。

web sockets 通信

web sockets 是HTML5提供的在web應用程式中用戶端與伺服器端之間進行非HTTP的通信機制

他實作了http不容易實作的伺服器的資料推送等智能通信技術，是以受到了很高的關注。

使用web sockes api 可以在伺服器端與用戶端建立非HTTP的雙向連接配接，這個連接配接是實時的也是永久的，除非顯式關閉

這意味着當伺服器想向用戶端發送資料時，可以立即将資料推送到客戶浏覽器中，無需重建立立連接配接。

隻要用戶端有一個被打開的socket并且與伺服器建立了連接配接，伺服器就可以将資料推送到這個socket上，伺服器不再需要輪詢用戶端請求，化被動為主動。

web sockets api

 web sockets api 本身非常簡單，将url作為參數，然後調用websocket對象的構造器來建立于伺服器的通信：

複制代碼

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

url必須使用ws或者wss（加密）作為頭,這個url設定好後，在javascript腳本中可以通過通路websocket對象的url來重新擷取

通信建立連接配接後，就可以雙向通信了，使用websocket對象的send方法加json資料便可将任何形式資料傳往伺服器：

webSocket.send(msg);

通過onmessage事件來接收伺服器傳送過來資料：

webSocket.onmessage = function (e) {

　　var data = e.data;

};

通過onopern事件監聽socket打開事件：

webSocket.onopen = function (e) { };

通過onclose監聽socket關閉事件：

webSocket.onclose = function (e) {};

通過webSocket.close()方法關閉socket連接配接；

通過readyState屬性擷取websocket對象狀态：

CONNECTION 0 正在連接配接

OPEN 1 已經連接配接

CLOSING 2 正在關閉

CLOSE 2 已經關閉

PS：，因為我不會配置伺服器塊的socket相關，是以暫時不能進行測試，該問題留待二次學習時解決。

整個代碼還是很簡單的:

// 建立一個Socket執行個體

var socket = new WebSocket('ws://localhost:8080'); 

// 打開Socket 

socket.onopen = function(event) { 

  // 發送一個初始化消息

  socket.send('I am the client and I\'m listening!'); 

  // 監聽消息

  socket.onmessage = function(event) { 

    console.log('Client received a message',event); 

  }; 

  // 監聽Socket的關閉

  socket.onclose = function(event) { 

    console.log('Client notified socket has closed',event); 

  // 關閉Socket.... 

  //socket.close() 

結語

這章東西其實還是非常有用的，但真要問我有什麼用，我還确實說不出來。。。。。。

本文轉自葉小钗部落格園部落格，原文連結http://www.cnblogs.com/yexiaochai/archive/2013/04/20/3032548.html如需轉載請自行聯系原作者