1、,HTML5基礎(chǔ)教程,授課教師： 職務(wù)：,第9章 Web通信,課程描述 HTML5 提供了功能強(qiáng)大的Web通信機(jī)制，可以實現(xiàn)不同域的Web應(yīng)用程序之間的安全通信，也可以在JavaScript進(jìn)行HTTP(S)通信和WebSocket通信。這些都是構(gòu)建桌面式Web應(yīng)用的基礎(chǔ)。,本章知識點(diǎn),9.1 跨文檔消息機(jī)制 9.2 XMLHttpRequest Level 2 9.3 WebSocket,9.1 跨文檔消息機(jī)制,9.1.1 檢測瀏覽器對跨文檔消息機(jī)制的支持情況 9.1.2 使用postMessage API發(fā)送消息 9.1.3 監(jiān)聽和處理消息事件,9.1.1 檢測瀏覽器對跨文檔消息機(jī)制的支持

2、情況,在JavaScript中可以使用window.postMessage屬性檢測瀏覽器對跨文檔消息機(jī)制的支持情況。如果typeof window.postMessage等于undefined，則表明當(dāng)前瀏覽器不支持跨文檔消息機(jī)制；否則表明支持。,【例9-1】,在網(wǎng)頁中定義一個按鈕，單擊此按鈕時，會檢測瀏覽器是否支持跨文檔消息機(jī)制。定義按鈕的代碼如下： 檢測瀏覽器是否支持跨文檔消息機(jī)制 單擊按鈕check將調(diào)用check()函數(shù)。check()函數(shù)的定義代碼如下： function check() if(typeof window.postMessage = undefined) alert(

3、您的瀏覽器不支持跨文檔消息機(jī)制。); else alert(您的瀏覽器支持跨文檔消息機(jī)制。); ,各主流瀏覽器對跨文檔消息機(jī)制的支持情況,9.1.2 使用postMessage API發(fā)送消息,windows.postMessage(data,url) 參數(shù)說明如下： data，發(fā)送消息中包含的數(shù)據(jù)，通常是一個字符串。 url，指定允許通信的域名。注意，不是接受消息的目標(biāo)域名。使用該參數(shù)的主要作用是出于安全的考慮，接受消息的窗口可以根據(jù)次參數(shù)判斷消息是否來自可信任的來源，以避免惡意攻擊。如果不對訪問的域進(jìn)行判斷，則可以使用*。,10.1.2 HTML5本地存儲技術(shù)概述,1localstorag

4、e 2sessionstorage 3web SQL數(shù)據(jù)庫 4IndexedDB,向父窗口發(fā)送消息可以使用window.parent. postMessage(),如果頁面中包含兩個框架，則可以使用下面的代碼向第2個框架中發(fā)送消息。 window.parent.frames1.postMessage(message, *);,【例9-2】,演示跨框架發(fā)送消息。定義框架的代碼如下： 演示跨框架發(fā)送消息 此網(wǎng)頁使用了框架，但您的瀏覽器不支持框架。 ,定義表單的代碼,在a.html中定義了一個表單，其中包含一個文本框和一個提交按鈕，用于編輯和提交數(shù)據(jù)，定義表單的代碼如下： ,定義提交動作的JavaS

5、cript代碼, var eleForm = document.querySelector(form); eleForm.onsubmit = function() var message = document.querySelector(inputtype=text).value; window.parent.frames1.postMessage(message, *); return false; ,右側(cè)框架中顯示的網(wǎng)頁b.html中使用一個標(biāo)簽顯示接受到的信息, 尚未接受到信息。 ,瀏覽【例9-2】的界面,9.1.3 監(jiān)聽和處理消息事件,在接收消息的窗口中，需要監(jiān)聽postMessag

6、e()方法發(fā)送的消息事件，并對其中包含的數(shù)據(jù)進(jìn)行處理。如果使用addEventListener()方法指定事件的處理函數(shù)，則需要指定監(jiān)聽事件為message，方法如下： window.addEventListener(message, messageHandle, false); 如果使用attachEvent()方法指定事件的處理函數(shù)，則需要指定監(jiān)聽事件為onmessage，方法如下： window.attachEvent(onmessage, messageHandle); messageHandle是事件的處理函數(shù)，格式如下： var messageHandle = function(e

7、) ,參數(shù)e,參數(shù)e有2個屬性，即e.data和e.origin。e.data是接收到的數(shù)據(jù)，也就是postMessage()方法的第1個參數(shù)指定的數(shù)據(jù)；e.origin是傳送源，也就是postMessage()方法的第2個參數(shù)指定的數(shù)據(jù)。如果出于安全考慮，只處理來自指定傳送源的消息，則可以在處理函數(shù)messageHandle中做如下處理： var messageHandle = function(e) switch(e.origin) /獲取傳送源 case safeorigin : /信任源的處理，可以將safeorigin替換為任意標(biāo)記信任源字符串， /即postMessage()方法的

8、第2個參數(shù)指定的數(shù)據(jù) var data = e.data ; /獲取數(shù)據(jù)處理 break ; default : /不信任源的處理 ,把【例9-2】的功能補(bǔ)充完整,右側(cè)框架中顯示的頁面b.html，其中監(jiān)聽和處理消息事件的代碼如下： var eleBox = document.querySelector(#message); var messageHandle = function(e) eleBox.innerHTML = 接受到的信息是： + e.data + in; ; if (window.addEventListener) window.addEventListener(m

9、essage, messageHandle, false); else if (window.attachEvent) window.attachEvent(onmessage, messageHandle); ,9.2 XMLHttpRequest Level 2,XMLHttpRequest是一個瀏覽器接口，開發(fā)者可以使用它提出HTTP和HTTPS請求，而且不用刷新頁面就可以修改頁面的內(nèi)容。XMLHttpRequest的兩個最常見的應(yīng)用是提交表單和獲取額外的內(nèi)容。 使用XMLHttpRequest對象可以實現(xiàn)下面的功能： 在不重新加載頁面的情況下更新網(wǎng)頁； 在頁面已加載后從服務(wù)器請求數(shù)據(jù)；

10、 在頁面已加載后從服務(wù)器接收數(shù)據(jù)； 在后臺向服務(wù)器發(fā)送數(shù)據(jù)。,9.2.1 創(chuàng)建XMLHttpRequest對象,1微軟的IE瀏覽器 在微軟的IE瀏覽器中使用Active對象創(chuàng)建XMLHttpRequest對象，代碼如下： xmlhttp=new ActiveXObject(Microsoft.XMLHTTP); 當(dāng)window.ActiveXObject等于True時，可以使用這種方法。 2其他瀏覽器 在其他瀏覽器中可以下面的代碼創(chuàng)建XMLHttpRequest對象： xxmlhttp=new XMLHttpRequest(); 當(dāng)window.XMLHttpRequest等于True時，可以

11、使用這種方法。,3通用的創(chuàng)建XMLHttpRequest對象的代碼,綜上所述，可以在各種瀏覽器中創(chuàng)建XMLHttpRequest對象的代碼如下： var xmlHttp; if(window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); else if(window.ActiveXObject) xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); ,9.2.2 發(fā)送HTTP請求,【例10-3】,在網(wǎng)頁中定義一個按鈕，單擊此按鈕時，從localstorage中獲取鍵名為key的值。按鈕的定義代碼如下：

12、獲取localstorage中的數(shù)據(jù) 單擊按鈕將調(diào)用getItem ()函數(shù)。getItem ()函數(shù)的定義代碼如下： function getItem() if(window.localStorage) var value = localStorage.getItem(key); alert(value); else alert(您的瀏覽器不支持localstorage。); ,【例10-4】, function count() var count / 讀取localstorage數(shù)據(jù)，并轉(zhuǎn)換為int類型 if(localStorage.getItem(count) = null) coun

13、t =1 else count = parseInt(localStorage.getItem(count)+1; / 顯示訪問計數(shù) if(count 1) document.write(您已是第 + count+次訪問本站點(diǎn)了。); else document.write(歡迎您首次訪問本站。); /保存新的訪問計數(shù) localStorage.setItem(count, count); window.addEventListener(load, count, true); ,使用localstorage記錄用戶訪問網(wǎng)頁的次數(shù),10.2.4 刪除localstorage中的數(shù)據(jù),調(diào)用loca

14、lStorage.removeItem()方法可以刪除localstorage中指定鍵的項，語法如下： localStorage.removeItem(key) key為要刪除的指定鍵。 如果要刪除localstorage中所有的數(shù)據(jù)，則可以調(diào)用localStorage.clear()方法。,10.2.5 storage事件,HTML5提供一個storage事件，當(dāng)setItem()、removeItem()或者clear()方法被調(diào)用，并且數(shù)據(jù)真的發(fā)生了改變時，storage事件就會被觸發(fā)。注意，只有數(shù)據(jù)真的發(fā)生了變化，才會觸發(fā)storage事件。也就是說，如果當(dāng)前的存儲區(qū)域是空的，調(diào)用cl

15、ear()是不會觸發(fā)事件的?；蛘咄ㄟ^setItem()來設(shè)置一個與現(xiàn)有值相同的值，storage事件也是不會被觸發(fā)的torage事件的 Event對象包含如下屬性： storageArea，表示存儲類型（localstorage或sessionstorage）； key，發(fā)生改變的項的key oldValue，發(fā)生改變的項的原值 newValue，發(fā)生改變的項的新值 url， key改變發(fā)生的URL,【例10-5】, Your test data: Waiting for data via storage event. ,接上, var addEvent = (function() if (d

16、ocument.addEventListener) return function(el, type, fn) if (el.length) for (var i = 0; i el.length; i+) addEvent(eli, type, fn); else el.addEventListener(type, fn, false); ; else return function(el, type, fn) if (el.length) for (var i = 0; i el.length; i+) addEvent(eli, type, fn); else el.attachEven

17、t(on + type, function() return fn.call(el, window.event); ); ; )();,接上,var dataInput = document.getElementById(data), output = document.getElementById(fromEvent), save = document.getElementById(save); addEvent(window, storage, function (event) if (event.key = storage-event-test) output.innerHTML =ke

18、y:+event.key+ - old:+event.oldValue+ - new:+ event.newValue; ); addEvent(save, click, function () localStorage.setItem(storage-event-test, dataInput.value); ); ,瀏覽【例10-5】的界面,提示,必須將文件上傳到Web服務(wù)器上（或者localhost），才支持storage事件。 不同瀏覽器對storage事件的支持情況不同。經(jīng)測試，Internet Explorer 9可以在當(dāng)前頁面中接收到storage事件，而在firefox和chr

19、ome中，必須同時打開兩個窗口瀏覽【例10-5】，在其中一個窗口中單擊按鈕，在另一個窗口會接收到storage事件。,10.3 sessionstorage,10.3.1 判斷瀏覽器是否支持sessionstorage 10.3.2 使用sessionstorage保存數(shù)據(jù) 10.3.3 獲取sessionstorage中的數(shù)據(jù) 10.3.4 刪除sessionstorage中的數(shù)據(jù),10.3.1 判斷瀏覽器是否支持sessionstorage,在JavaScript中可以使用window. sessionStorage屬性檢測瀏覽器對sessionstorage的支持情況。如果window.

20、 sessionStorage等于True，則表明當(dāng)前瀏覽器支持sessionstorage；否則表明不支持。,【例10-6】,在網(wǎng)頁中定義一個按鈕，單擊此按鈕時，會檢測瀏覽器是否支持sessionstorage。定義按鈕的代碼如下： 檢測瀏覽器是否支持sessionstorage 單擊按鈕check將調(diào)用check()函數(shù)。check()函數(shù)的定義代碼如下： function check() if(window.sessionStorage) alert(您的瀏覽器支持sessionstorage。); else alert(您的瀏覽器不支持sessionstorage。); ,提示,在使用

21、Internet Explore測試時，必須將文件上傳到Web服務(wù)器上（或者localhost），才支持localstorage。如果直接打開本地的HTML文件，則提示不支持localstorage。,10.3.2 使用sessionstorage保存數(shù)據(jù),與localstorage一樣，sessionstorage也使用“鍵值”對保存數(shù)據(jù)，可以使用setItem()方法設(shè)置sessionstorage數(shù)據(jù)，語法如下： sessionStorage.setItem(, ) 也可以通過sessionStorage.和sessionStorage 的形式訪問sessionstorage數(shù)據(jù)。例如，

22、下面3條語句都可以在localstorage中存儲鍵名為key、值為value的數(shù)據(jù)： sessionStorage.setItem(key, value); sessionStorage.key = value; sessionStorage key = value;,【例10-7】,在網(wǎng)頁中定義一個按鈕，單擊此按鈕時，在sessionstorage中存儲鍵名為key、值為value的數(shù)據(jù)。按鈕的定義代碼如下： 使用sessionstorage保存數(shù)據(jù) 單擊按鈕check將調(diào)用setItem()函數(shù)。setItem()函數(shù)的定義代碼如下： function setItem() if(wind

23、ow. sessionStorage) sessionStorage.setItem(key, value); else alert(您的瀏覽器不支持sessionStorage。); ,10.3.3 獲取sessionstorage中的數(shù)據(jù),可以使用getItem()方法設(shè)置sessionstorage數(shù)據(jù)，語法如下： = sessionStorage.getItem(); 也可以通過localStorage.和localStorage的形式訪問sessionstorage數(shù)據(jù)。例如，下面3條語句都可以獲取localstorage中存儲的鍵名為key的數(shù)據(jù)值到變量value中： var va

24、lue = sessionStorage.getItem(key); var value = sessionStorage.key; var value = sessionStorage key;可以使用getItem()方法設(shè)置sessionstorage數(shù)據(jù)，語法如下： = sessionStorage.getItem(); 也可以通過localStorage.和localStorage的形式訪問sessionstorage數(shù)據(jù)。例如，下面3條語句都可以獲取localstorage中存儲的鍵名為key的數(shù)據(jù)值到變量value中： var value = sessionStorage.get

25、Item(key); var value = sessionStorage.key; var value = sessionStorage key;,【例10-8】,在【例10-7】的網(wǎng)頁中增加一個按鈕，單擊此按鈕時，從sessionstorage中獲取鍵名為key的值。按鈕的定義代碼如下： 獲取sessionstorage中的數(shù)據(jù) 單擊按鈕getItem將調(diào)用getItem ()函數(shù)。getItem ()函數(shù)的定義代碼如下： function getItem () if(window. sessionStorage) var value = sessionStorage.getItem(key); alert(value); else alert(您的瀏覽器不支持sessionStorage。); ,10.3.4 刪除sessionstorage中的數(shù)據(jù),調(diào)用sessionSto