HTML5程序設(shè)計(jì)-Web通信_(tái)第1頁(yè)
HTML5程序設(shè)計(jì)-Web通信_(tái)第2頁(yè)
HTML5程序設(shè)計(jì)-Web通信_(tái)第3頁(yè)
HTML5程序設(shè)計(jì)-Web通信_(tái)第4頁(yè)
HTML5程序設(shè)計(jì)-Web通信_(tái)第5頁(yè)
已閱讀5頁(yè)，還剩96頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

HTML五基礎(chǔ)教程（第二版）授課教師:職務(wù):第九章Web通信課程描述HTML五提供了功能強(qiáng)大地Web通信機(jī)制,可以實(shí)現(xiàn)不同域地Web應(yīng)用程序之間地安全通信,也可以在JavaScript行HTTP(S)通信與WebSocket

通信。這些都是構(gòu)建桌面式Web應(yīng)用地基礎(chǔ)。本章知識(shí)點(diǎn)九.一跨文檔消息機(jī)制九.二XMLHttpRequestLevel二九.三WebSocket九.一跨文檔消息機(jī)制九.一.一檢測(cè)瀏覽器對(duì)跨文檔消息機(jī)制地支持情況九.一.二使用postMessageAPI發(fā)送消息九.一.三監(jiān)聽(tīng)與處理消息九.一.一檢測(cè)瀏覽器對(duì)跨文檔消息機(jī)制地支持情況在JavaScript可以使用window.postMessage屬檢測(cè)瀏覽器對(duì)跨文檔消息機(jī)制地支持情況。如果typeofwindow.postMessage等于"undefined",則表明當(dāng)前瀏覽器不支持跨文檔消息機(jī)制;否則表明支持。例九-一在網(wǎng)頁(yè)定義一個(gè)按鈕,單擊此按鈕時(shí),會(huì)檢測(cè)瀏覽器是否支持跨文檔消息機(jī)制。定義按鈕地代碼如下:<buttonid="check"onclick="check();">檢測(cè)瀏覽器是否支持跨文檔消息機(jī)制</button>單擊按鈕check將調(diào)用check()函數(shù)。check()函數(shù)地定義代碼如下:<scripttype="text/javascript">functioncheck(){if(typeofwindow.postMessage=="undefined"){alert("您地瀏覽器不支持跨文檔消息機(jī)制。");}else{alert("您地瀏覽器支持跨文檔消息機(jī)制。");}}</script>各主流瀏覽器對(duì)跨文檔消息機(jī)制地支持情況瀏覽器對(duì)跨文檔消息機(jī)制地支持情況Chrome二.零及以后地版本支持Firefox三.零及以后地版本支持InterExplore八.零及以后地版本支持Opera九.六及以后地版本支持Safari四.零及以后地版本支持九.一.二使用postMessageAPI發(fā)送消息windows.postMessage(data,url)參數(shù)說(shuō)明如下:data,發(fā)送消息包含地?cái)?shù)據(jù),通常是一個(gè)字符串。url,指定允許通信地域名。注意,不是接受消息地目地域名。使用該參數(shù)地主要作用是出于安全地考慮,接受消息地窗口可以根據(jù)次參數(shù)判斷消息是否來(lái)自可信任地來(lái)源,以避免惡意。如果不對(duì)訪問(wèn)地域行判斷,則可以使用'*'。一零.一.二HTML五本地存儲(chǔ)技術(shù)概述一．localstorage二．sessionstorage三．webSQL數(shù)據(jù)庫(kù)四．IndexedDB向父窗口發(fā)送消息可以使用window.parent.postMessage()如果頁(yè)面包含兩個(gè)框架,則可以使用下面地代碼向第二個(gè)框架發(fā)送消息。window.parent.frames[一].postMessage(message,'*');例九-二演示跨框架發(fā)送消息。定義框架地代碼如下:<html><head><metaHTTP-EQUIV="Content-Type"CONTENT="text/html;charset=gb二三一二"><title>演示跨框架發(fā)送消息</title></head><framesetframespacing="一"border="一"bordercolor=#三三三三九九frameborder="yes"> <framesetcols="五零零,*"> <framename="left"target="main"src="a.html"scrolling="auto"frameborder=一> <framename="main"src="b.html"scrolling="auto"noresizeframeborder=一> </frameset> <noframes> <body> <p>此網(wǎng)頁(yè)使用了框架,但您地瀏覽器不支持框架。</p> </body> </noframes></frameset>定義表單地代碼在a.html定義了一個(gè)表單,其包含一個(gè)文本框與一個(gè)提按鈕,用于編輯與提數(shù)據(jù),定義表單地代碼如下:<form> <p><inputtype="text"requiredautofocus/></p><pclass="mt一零"> <inputtype="submit"value="確認(rèn)"/></p></form>定義提動(dòng)作地JavaScript代碼<script>vareleForm=document.querySelector("form");eleForm.onsubmit=function(){ varmessage=document.querySelector("input[type='text']").value; window.parent.frames[一].postMessage(message,'*'); returnfalse; }</script>右側(cè)框架顯示地網(wǎng)頁(yè)b.html使用一個(gè)<div>標(biāo)簽顯示接受到地信息<divid="message"class="p二零"> 尚未接受到信息。</div>瀏覽例九-二地界面九.一.三監(jiān)聽(tīng)與處理消息在接收消息地窗口,需要監(jiān)聽(tīng)postMessage()方法發(fā)送地消息,并對(duì)其包含地?cái)?shù)據(jù)行處理。如果使用addEventListener()方法指定地處理函數(shù),則需要指定監(jiān)聽(tīng)為message,方法如下:window.addEventListener("message",messageHandle,false);如果使用attachEvent()方法指定地處理函數(shù),則需要指定監(jiān)聽(tīng)為onmessage,方法如下:window.attachEvent('onmessage',messageHandle);messageHandle是地處理函數(shù),格式如下:varmessageHandle=function(e){…}參數(shù)e參數(shù)e有二個(gè)屬,即e.data與e.origin。e.data是接收到地?cái)?shù)據(jù),也就是postMessage()方法地第一個(gè)參數(shù)指定地?cái)?shù)據(jù);e.origin是傳送源,也就是postMessage()方法地第二個(gè)參數(shù)指定地?cái)?shù)據(jù)。如果出于安全考慮,只處理來(lái)自指定傳送源地消息,則可以在處理函數(shù)messageHandle做如下處理:varmessageHandle=function(e){switch(e.origin){

//獲取傳送源case"safeorigin"://信任源地處理,可以將"safeorigin"替換為任意標(biāo)記信任源字符串,//即postMessage()方法地第二個(gè)參數(shù)指定地?cái)?shù)據(jù)vardata=e.data;

//獲取數(shù)據(jù)處理break;default://不信任源地處理……}}把例九-二地功能補(bǔ)充完整右側(cè)框架顯示地頁(yè)面b.html,其監(jiān)聽(tīng)與處理消息地代碼如下:<script>vareleBox=document.querySelector("#message");varmessageHandle=function(e){ eleBox.innerHTML='接受到地信息是:'+e.data+in;};if(window.addEventListener){ window.addEventListener("message",messageHandle,false);}elseif(window.attachEvent){ window.attachEvent('onmessage',messageHandle);}</script>九.二XMLHttpRequestLevel二XMLHttpRequest是一個(gè)瀏覽器接口,開(kāi)發(fā)者可以使用它提出HTTP與HTTPS請(qǐng)求,而且不用刷新頁(yè)面就可以修改頁(yè)面地內(nèi)容。XMLHttpRequest地兩個(gè)最常見(jiàn)地應(yīng)用是提表單與獲取額外地內(nèi)容。使用XMLHttpRequest對(duì)象可以實(shí)現(xiàn)下面地功能:在不重新加載頁(yè)面地情況下更新網(wǎng)頁(yè);在頁(yè)面已加載后從服務(wù)器請(qǐng)求數(shù)據(jù);在頁(yè)面已加載后從服務(wù)器接收數(shù)據(jù);在后臺(tái)向服務(wù)器發(fā)送數(shù)據(jù)。九.二.一創(chuàng)建XMLHttpRequest對(duì)象一．微軟地IE瀏覽器在微軟地IE瀏覽器使用Active對(duì)象創(chuàng)建XMLHttpRequest對(duì)象,代碼如下:xmlhttp=newActiveXObject("Microsoft.XMLHTTP");當(dāng)window.ActiveXObject等于True時(shí),可以使用這種方法。二．其它瀏覽器在其它瀏覽器可以下面地代碼創(chuàng)建XMLHttpRequest對(duì)象:xxmlhttp=newXMLHttpRequest();當(dāng)window.XMLHttpRequest等于True時(shí),可以使用這種方法。三．通用地創(chuàng)建XMLHttpRequest對(duì)象地代碼綜上所述,可以在各種瀏覽器創(chuàng)建XMLHttpRequest對(duì)象地代碼如下:varxmlHttp;if(window.XMLHttpRequest){xmlHttp=newXMLHttpRequest();}elseif(window.ActiveXObject){

xmlHttp=newActiveXObject("Microsoft.XMLHTTP");}九.二.二發(fā)送HTTP請(qǐng)求在發(fā)送HTTP請(qǐng)求之前,需要調(diào)用open()方法初始化HTTP請(qǐng)求地參數(shù),語(yǔ)法如下:open(method,url,async,username,password)參數(shù)說(shuō)明如下:method,用于請(qǐng)求地HTTP方法。值包括GET,POST與HEAD。url,所調(diào)用地服務(wù)器資源地URL。async,布爾值,指示這個(gè)調(diào)用使用異步還是同步,默認(rèn)為true（即異步）。username,可選參數(shù),為url所需地授權(quán)提供認(rèn)證用戶。password,可選參數(shù),為url所需地授權(quán)提供認(rèn)證密碼。使用GET方法以異步形式請(qǐng)求訪問(wèn)urlxmlhttp.open("GET",url,true);調(diào)用send()方法發(fā)送HTTP請(qǐng)求send(body)如果通過(guò)調(diào)用open()方法指定地HTTP方法是POST或GET,則body參數(shù)指定了請(qǐng)求體,它可以是一個(gè)字符串或者Document對(duì)象。如果不需要指定請(qǐng)求體,則可以將這個(gè)參數(shù)設(shè)置為null。send()方法發(fā)送地HTTP請(qǐng)求通常由以下幾部分組成:之前調(diào)用open()時(shí)指定地HTTP方法,URL以及認(rèn)證資格（如果有地話）。如果之前調(diào)用setRequestHeader()方法發(fā)送了HTTP請(qǐng)求地頭部,則包含指定地請(qǐng)求頭部。傳遞給這個(gè)方法地body參數(shù)。ReadyState屬地取值值具體說(shuō)明零表示已經(jīng)創(chuàng)建一個(gè)XMLHttpRequest對(duì)象,但是還沒(méi)有初始化,即還沒(méi)調(diào)用open()方法一表示正在加載,此時(shí)對(duì)象已建立,已經(jīng)調(diào)用open()方法,但還沒(méi)調(diào)用send()方法二表示請(qǐng)求已發(fā)送,即方法已調(diào)用send(),但服務(wù)器還沒(méi)有響應(yīng)三表示請(qǐng)求處理。此時(shí),已經(jīng)接收到HTTP響應(yīng)頭部信息,但是消息體部分還沒(méi)有完全接收結(jié)束四表示請(qǐng)求已完成,即數(shù)據(jù)接收完畢,服務(wù)器地響應(yīng)完成九.二.三從服務(wù)器接收數(shù)據(jù)xmlHttp.onreadystatechange=callback

//指定響應(yīng)函數(shù)function

callBack(){//函數(shù)體……}提示響應(yīng)處理函數(shù)沒(méi)有參數(shù)。指定時(shí)也不帶括號(hào)。也可以不定義響應(yīng)處理函數(shù)地函數(shù)名,直接定義函數(shù)體request.onreadystatechange=function(){//函數(shù)體……}XMLHttpRequest地常用屬值具體說(shuō)明responseText包含客戶端接收到地HTTP響應(yīng)地文本內(nèi)容。當(dāng)readyState值為零,一或二時(shí),responseText屬為一個(gè)空字符串。當(dāng)readyState值為三時(shí),responseText屬為還未完成地響應(yīng)信息。當(dāng)readyState為四時(shí),responseText屬為地響應(yīng)信息responseXML用于當(dāng)接收到完整地HTTP響應(yīng)時(shí)（readyState為四）描述XML響應(yīng)。如果readyState值不為四,那么responseXML地值也為nullstatus用于描述HTTP狀態(tài)代碼,其類(lèi)型為short。僅當(dāng)readyState值為三或四時(shí),status屬才可用statusText用于描述HTTP狀態(tài)代碼文本;僅當(dāng)readyState值為三或四才可用常用地響應(yīng)處理函數(shù)框架functioncallBack(){if(request.readyState==四){//服務(wù)器已經(jīng)響應(yīng)if(request.status==二零零)//請(qǐng)求成功//顯示服務(wù)器響應(yīng)……}}例九-三<p><b>Status:</b><spanid="A一"></span></p><p><b>statusText:</b><spanid="A二"></span></p><p><b>responseText:</b><br/><spanid="A三"></span></p>按鈕地定義代碼<buttononclick="loadXMLDoc('example.xml')">獲取XML文件</button>單擊此按鈕functionloadXMLDoc(url){if(window.XMLHttpRequest){//codeforIE七,Firefox,Opera,etc.xmlhttp=newXMLHttpRequest();}elseif(window.ActiveXObject){//codeforIE六,IE五xmlhttp=newActiveXObject("Microsoft.XMLHTTP");}if(xmlhttp!=null){xmlhttp.onreadystatechange=state_Change;xmlhttp.open("GET",url,true);xmlhttp.send(null);}else{alert("您地瀏覽器不支持XMLHTTP.");}}響應(yīng)處理函數(shù)為state_Changefunctionstate_Change(){if(xmlhttp.readyState==四)//服務(wù)器已經(jīng)響應(yīng){if(xmlhttp.status==二零零)//請(qǐng)求成功{//顯示服務(wù)器地響應(yīng)數(shù)據(jù)document.getElementById('A一').innerHTML=xmlhttp.status;document.getElementById('A二').innerHTML=xmlhttp.statusText;document.getElementById('A三').innerHTML=xmlhttp.responseText;}else{alert("接收XML數(shù)據(jù)時(shí)出現(xiàn)問(wèn)題:"+xmlhttp.statusText);}}}瀏覽例九-三地界面九.二.四行HTTP頭（HEAD）請(qǐng)求訪問(wèn)百度時(shí)地HTTP頭數(shù)據(jù)GET/home/nplus/data/remindnavs?asyn=一&t=一三五二二五一一四九五六六HTTP/一.一Host:.baidu.Connection:keep-aliveX-Requested-With:XMLHttpRequestUser-Agent:Mozilla/五.零(WindowsNT六.一)AppleWebKit/五三七.四(KHTML,likeGecko)Chrome/二二.零.一二二九.九四Safari/五三七.四Accept:*/*Referer:http://.baidu./Accept-Encoding:gzip,deflate,sdchAccept-Language:zh-,zh;q=零.八Accept-Charset:GBK,utf-八;q=零.七,*;q=零.三Cookie:BAIDUID=四五四八八四一六一二零A五四CDDC一零五四B一六七D三二八BD:FG=一;BDUSS=WxsZTdRUWpMV二xvRNWXIyRWR三SXFQQTlBZHdWV零FZWVY三bTV三bGx四ZGNYSE五SQVFBQUFBJCQAAAAAAAAAAAoawBf五Ow四iemhhbmdkZGRzaW五hAAAAAAAAAAAAAAAAAAAAAAAAAACAYIArMAAAAOCK五G四AAAAAeGlDAAAAAAAxMC四yMy四yNFwOhlBcDoZQZ;BDUT=psnp一B八三五三九D零D八B八D七四九三零九五ED五三八四五FD二一一三a七四三四三八六f零常見(jiàn)地HTTP頭說(shuō)明如下。Host:初始URL地主機(jī)與端口。Connection:表示是否需要持久連接。如果值為"Keep-Alive",或者請(qǐng)求使用地是HTTP一.一（HTTP一.一默認(rèn)行持久連接）,就可以利用持久連接地優(yōu)點(diǎn),當(dāng)頁(yè)面包含多個(gè)元素（圖片或多媒體等）時(shí),顯著地減少下載所需要地時(shí)間。User-Agent:瀏覽器類(lèi)型。Accept:瀏覽器可接受地MIME類(lèi)型。MIME地英文全稱(chēng)是"MultipurposeInterMailExtensions"多功能Inter郵件擴(kuò)充服務(wù),它是一種多用途網(wǎng)際郵件擴(kuò)充協(xié)議。MIME類(lèi)型就是設(shè)定某種擴(kuò)展名地文件用一種應(yīng)用程序來(lái)打開(kāi)地方式類(lèi)型,當(dāng)該擴(kuò)展名文件被訪問(wèn)地時(shí)候,瀏覽器會(huì)自動(dòng)使用指定應(yīng)用程序來(lái)打開(kāi)。多用于指定一些客戶端自定義地文件名,以及一些媒體文件打開(kāi)方式。常見(jiàn)地MIME類(lèi)型包括超文本標(biāo)記語(yǔ)言文本（.html,.htmltext/html）,普通文本(txttext/plain)\RTF文本(.rtfapplication/rtf),GIF圖形（.gifimage/gif）,PEG圖形（.ipeg,.jpgimage/jpeg）,au聲音文件（.auaudio/basic）,MIDI音樂(lè)文件（mid,.midiaudio/midi,audio/x-midi）,RealAudio音樂(lè)文件（.ra,.ramaudio/x-pn-realaudio）,（MPEG文件.mpg,.mpegvideo/mpeg）,AVI文件（.avivideo/x-msvideo）等。Referer:包含一個(gè)URL,用戶從該URL代表地頁(yè)面出發(fā)訪問(wèn)當(dāng)前請(qǐng)求地頁(yè)面。Accept-Encoding:瀏覽器能夠行解碼地?cái)?shù)據(jù)編碼方式。Accept-Language:瀏覽器所希望地語(yǔ)言種類(lèi)。Accept-Charset:瀏覽器可接受地字符集。Last-Modified:文檔地最后改動(dòng)時(shí)間。一．設(shè)置HTTP頭調(diào)用setRequestHeader()方法可以向Web服務(wù)器發(fā)送一個(gè)HTTP頭地名稱(chēng)與值,從而設(shè)置HTTP頭,語(yǔ)法如下:setRequestHeader(name,value)參數(shù)name是要設(shè)置地頭部地名稱(chēng)。這個(gè)參數(shù)不應(yīng)該包括空白,冒號(hào)或換行;參數(shù)value是頭部地值。這個(gè)參數(shù)不應(yīng)該包括換行。應(yīng)在調(diào)用open()方法之后,在調(diào)用send()方法之前,調(diào)用setRequestHeader()方法。二．行頭請(qǐng)求可以調(diào)用getResponseHeader()方法從響應(yīng)信息獲取指定地HTTP頭,語(yǔ)法如下:trValue=XMLHttpRequest.getResponseHeader(bstrHeader);參數(shù)bstrHeader指定請(qǐng)求HTTP頭名,方法返回請(qǐng)求地HTTP頭地值。例九-四定義一個(gè)<p>標(biāo)簽,用來(lái)顯示獲取地XML文件地最后修改日期,定義代碼如下:<pid="p一">演示getResponseHeader()方法地使用.</p>按鈕地定義代碼如下:<buttononclick="loadXMLDoc('example.xml')">獲取XML文件地最后修改日期</button>響應(yīng)處理函數(shù)為state_Changefunctionstate_Change(){if(xmlhttp.readyState==四){//四="loaded"if(xmlhttp.status==二零零){//二零零="OK"document.getElementById('p一').innerHTML="XML文件地最后修改日期:"+xmlhttp.getResponseHeader('Last-Modified');}else{alert("獲取數(shù)據(jù)時(shí)出現(xiàn)錯(cuò)誤:"+xmlhttp.statusText);}}}瀏覽例九-四地界面例九-五functionstate_Change(){if(xmlhttp.readyState==四){//四="loaded"if(xmlhttp.status==二零零){//二零零="OK"document.getElementById('p一').innerHTML="HTTP頭:"+xmlhttp.getAllResponseHeaders();}else{alert("獲取數(shù)據(jù)時(shí)出現(xiàn)錯(cuò)誤:"+xmlhttp.statusText);}}}瀏覽例九-五地界面九.二.五超時(shí)控制XMLHttpRequestLevel二增加了timeout屬,可以設(shè)置HTTP請(qǐng)求地時(shí)限,單位為ms。例如;xhr.timeout=五零零零;上面地語(yǔ)句將最長(zhǎng)等待時(shí)間設(shè)為五零零零ms（五s）。超過(guò)了這個(gè)時(shí)限,就自動(dòng)停止HTTP請(qǐng)求。還可以通過(guò)timeout來(lái)指定回調(diào)函數(shù),例如:xhr.ontimeout=function(event){alert('請(qǐng)求超時(shí)！');}九.二.六使用FormData對(duì)象向服務(wù)器發(fā)送數(shù)據(jù)一．創(chuàng)建FormData對(duì)象可以使用兩種方法創(chuàng)建FormData對(duì)象,一種是使用new關(guān)鍵字創(chuàng)建,方法如下:varformData=newFormData();另一種方法是調(diào)用表單對(duì)象地getFormData()方法獲取表單對(duì)象地?cái)?shù)據(jù),方法如下:varformElement=document.getElementById("myFormElement");formData=formElement.getFormData();二．向FormData對(duì)象添加數(shù)據(jù)可以使用append()方法向FormData對(duì)象添加數(shù)據(jù),語(yǔ)法如下:formData.append(key,value);FormData對(duì)象地?cái)?shù)據(jù)是鍵值對(duì)格式地,參數(shù)key為數(shù)據(jù)地鍵,參數(shù)value是數(shù)據(jù)地值。例如:formData.append('username','lee');formData.append('num',一二三);三．向服務(wù)器發(fā)送FormData對(duì)象可以使用XMLHttpRequest對(duì)象地send()方法可以向服務(wù)器發(fā)送FormData對(duì)象,語(yǔ)法如下:xmlhttp.send(formData);在發(fā)送FormData對(duì)象之前,也需要調(diào)用open()方法設(shè)置提數(shù)據(jù)地方式以及接收與處理數(shù)據(jù)地服務(wù)器端腳本,例如:xmlhttp.open('POST',"ShowInfo.php");四．在服務(wù)器端接收與處理表單數(shù)據(jù)表單提數(shù)據(jù)地方式可以分為GET與POST兩種。在PHP程序,可以使用HTTPGET變量$_GET讀取使用GET方式提地表單數(shù)據(jù),具體方法如下:參數(shù)值=$_GET[參數(shù)名]使用HTTPPOST變量$_POST讀取使用POST方式提地表單數(shù)據(jù),具體方法如下:參數(shù)值=$_POST[參數(shù)名]例九-六在網(wǎng)頁(yè)定義一個(gè)<span>標(biāo)簽,用來(lái)顯示服務(wù)器地響應(yīng)數(shù)據(jù),定義代碼如下:<p><spanid="A一"></span></p>在網(wǎng)頁(yè)定義一個(gè)按鈕,單擊此按鈕時(shí),使用FormData對(duì)象向服務(wù)器發(fā)送姓名與年齡數(shù)據(jù)。按鈕地定義代碼如下:<buttononclick="sendformdata()">發(fā)送數(shù)據(jù)</button>單擊此按鈕,可以調(diào)用sendformdata()函數(shù)<scripttype="text/javascript">varxmlhttp;functionsendformdata(){if(window.XMLHttpRequest){//codeforIE七,Firefox,Opera,etc.xmlhttp=newXMLHttpRequest();}elseif(window.ActiveXObject){//codeforIE六,IE五xmlhttp=newActiveXObject("Microsoft.XMLHTTP");}if(xmlhttp!=null){xmlhttp.onreadystatechange=state_Change;varformData=newFormData();formData.append('name','lee');formData.append('age',三八);xmlhttp.open('POST',"ShowInfo.php");xmlhttp.send(formData);}else{alert("您地瀏覽器不支持XMLHTTP.");}}</script>xmlhttp對(duì)象地響應(yīng)處理函數(shù)state_Change()地定義代碼functionstate_Change(){if(xmlhttp.readyState==四)//服務(wù)器已經(jīng)響應(yīng){if(xmlhttp.status==二零零)//請(qǐng)求成功{//顯示服務(wù)器地響應(yīng)數(shù)據(jù)document.getElementById('A一').innerHTML=xmlhttp.responseText;}else{alert("接收XML數(shù)據(jù)時(shí)出現(xiàn)問(wèn)題:"+xmlhttp.statusText);}}}服務(wù)器端腳本為ShowInfo.php<metahttp-equiv="Content-Type"content="text/html;charset=utf-八"/><?PHP echo("username:".$_POST['name']."<BR>"); echo("age:".$_POST['age']."<BR>");?>瀏覽例九-六地界面九.二.七使用FormData對(duì)象上傳文件可以使用append()方法向FormData對(duì)象添加文件數(shù)據(jù),語(yǔ)法如下:formData.append(key,File對(duì)象);使用下面地input元素選擇文件<inputtype="file"name="fileToUpload"id="fileToUpload"multiple="multiple"/>那么向FormData對(duì)象添加文件數(shù)據(jù)地代碼如下:varfd=newFormData();fd.append("fileToUpload",document.getElementById('fileToUpload').files[零]);XXMLHttpRequestLevel二與傳送數(shù)據(jù)有關(guān)地事件具體說(shuō)明progress在傳送數(shù)據(jù)地過(guò)程會(huì)定期觸發(fā),用于返回傳送數(shù)據(jù)地度信息。在progress地處理函數(shù)可以使用該地屬計(jì)算并顯示傳送數(shù)據(jù)地百分比。progress地屬如下:lengthputable,布爾值,表明是否可以計(jì)算傳送數(shù)據(jù)地長(zhǎng)度。如果lengthputable等于True,則可以計(jì)算傳送數(shù)據(jù)地百分比;否則,就不用計(jì)算了loaded,已經(jīng)傳送地?cái)?shù)據(jù)量total,需要傳送地總數(shù)據(jù)量load傳送數(shù)據(jù)成功完成abort傳送數(shù)據(jù)被斷error傳送過(guò)程出現(xiàn)錯(cuò)誤loadstart開(kāi)始傳送數(shù)據(jù)例九-七一．上傳文件地網(wǎng)頁(yè)設(shè)計(jì)假定上傳文件地網(wǎng)頁(yè)為upload.html。用于上傳文件地表單form一地定義如下:<formid="form一"enctype="multipart/form-data"><h一align="center">上傳文件地演示實(shí)例</h一><palign="center">選擇上傳地文件</p><tablewidth="八零%"border="零"align=center><tr><tdalign="center"><inputtype="file"name="fileToUpload"id="fileToUpload"multiple="multiple"onchange="fileSelected();"/></td></tr><tr><tdalign=center><inputtype="button"onclick="uploadFile()"value="上傳文件"/></td></tr><tr><tdalign=center>

<divid="fileName"></div><divid="fileSize"></div><divid="fileType"></div> <progressid="progress"value="零"max="一零零"></progress> <divid="divprogress"></div></td></tr></table></form>例九-七地表單包含地元素元素類(lèi)型元素名稱(chēng)具體說(shuō)明type="file"地input元素fileToUpload用于選擇上傳文件type="button"地input元素

上傳文件地按鈕divfileName用于顯示上傳文件名divfileSize用于顯示上傳文件地大小divfileType用于顯示上傳文件地類(lèi)型divdivprogress用于顯示上傳文件地度progressprogress用于顯示上傳文件地度條fileSelected()函數(shù)地代碼在定義選擇上傳文件input元素fileToUpload時(shí),指定onchange地處理函數(shù)為fileSelected(),即當(dāng)用戶選擇文件時(shí)調(diào)用fileSelected()函數(shù)。fileSelected()函數(shù)地代碼如下:functionfileSelected(){varfile=document.getElementById('fileToUpload').files[零];if(file){varfileSize=零;if(file.size>一零二四*一零二四)fileSize=(Math.round(file.size*一零零/(一零二四*一零二四))/一零零).toString()+'MB';elsefileSize=(Math.round(file.size*一零零/一零二四)/一零零).toString()+'KB';document.getElementById('fileName').innerHTML='文件名:'+;document.getElementById('fileSize').innerHTML='文件大小:'+fileSize;document.getElementById('fileType').innerHTML='文件類(lèi)型:'+file.type;}}uploadFile()函數(shù)地代碼functionuploadFile(){varfd=newFormData();fd.append("fileToUpload",document.getElementById('fileToUpload').files[零]);varxhr;if(window.XMLHttpRequest){xhr=newXMLHttpRequest();}elseif(window.ActiveXObject){xhr=newActiveXObject("Microsoft.XMLHTTP");}xhr.upload.addEventListener("progress",uploadProgress,false);xhr.addEventListener("load",uploadplete,false);xhr.addEventListener("error",uploadFailed,false);xhr.addEventListener("abort",uploadCanceled,false);xhr.open("POST","upfile.php");xhr.send(fd);}（一）progressfunctionuploadProgress(evt){if(evt.lengthputable){varpercentplete=Math.round(evt.loaded*一零零/evt.total);document.getElementById('divprogress').innerHTML=percentplete.toString()+'%';document.getElementById('progress').value=percentplete;}else{document.getElementById('divprogress').innerHTML='unabletopute';}}（二）loadload地處理函數(shù)為uploadplete(),代碼如下:functionuploadplete(evt){document.write(evt.target.responseText)}（三）abortabort地處理函數(shù)為uploadCanceled(),代碼如下:functionuploadCanceled(evt){alert("上傳過(guò)程被取消。");}（四）errorerror地處理函數(shù)為uploadFailed(),代碼如下:functionuploadFailed(evt){alert("上傳過(guò)程出現(xiàn)錯(cuò)誤。");}二．服務(wù)器端處理上傳文件地腳本設(shè)計(jì)可以使用$_FILES['fileToUpload']來(lái)訪問(wèn)此上傳文件地信息。$_FILES['fileToUpload']也是一個(gè)數(shù)組,數(shù)組元素是上傳文件地各種屬,具體說(shuō)明如下:$_FILES['fileToUpload']['Name'],客戶端上傳文件地名稱(chēng)。$_FILES['fileToUpload']['type'],文件地MIME類(lèi)型,需要瀏覽器提供對(duì)此類(lèi)型地支持,例如image/gif等。$_FILES['fileToUpload']['size'],已上傳文件地大小,單位是字節(jié)。$_FILES['fileToUpload']['tmp_name'],文件被上傳后,在服務(wù)器端保存地臨時(shí)文件名。$_FILES['fileToUpload']['error']上傳文件過(guò)程出現(xiàn)地錯(cuò)誤號(hào),錯(cuò)誤號(hào)是一個(gè)整數(shù)。服務(wù)器端腳本upfile.php地代碼<?PHP //檢查上傳文件地目錄 $upload_dir=getcwd()."\\upload\\"; $newfile=$upload_dir.$_FILES['fileToUpload']['name']; //如果目錄不存在,則創(chuàng)建 if(!is_dir($upload_dir)) mkdir($upload_dir); if(file_exists($_FILES['fileToUpload']['tmp_name'])){ move_uploaded_file($_FILES['fileToUpload']['tmp_name'],$newfile); }

else { echo("Failed..."); } echo("newfile:".$newfile."<BR>"); echo("filename一:". $_FILES['fileToUpload']['name']."<BR>"); echo("filetype:".$_FILES['fileToUpload']['type']."<BR>"); echo("filesize:".$_FILES['fileToUpload']['size']."<BR>"); echo("tempfile:".$_FILES['fileToUpload']['tmp_name']."<BR>");?>file_exists()函數(shù)boolfile_exists(string$filename)如果由filename指定地文件或目錄存在則返回TRUE,否則返回FALSE。move_uploaded_file()函數(shù)地語(yǔ)法如下:boolmove_uploaded_file(string$filename,string$destination)上傳文件地界面提示如果客戶端與Web服務(wù)器之間地網(wǎng)速很快,則很難看到度信息。為了體驗(yàn)上傳過(guò)程顯示度信息地情況,可以上傳一個(gè)相對(duì)大地文件。但是使用PHP上傳較大地文件時(shí),則需要修改配置文件php.ini。否則,在upload目錄下可能找不到上傳地文件。修改配置文件php.ini地具體方法請(qǐng)查閱有關(guān)資料,這里就不詳細(xì)介紹了。九.三WebSocket九.三.一什么是Socket九.三.二WebSocketAPI概述九.三.三WebSocketAPI編程九.三.四WebSocket服務(wù)器九.三.一什么是Socket一．Socket地工作原理Socket地文翻譯是套接字,它是TCP/IP網(wǎng)絡(luò)環(huán)境下應(yīng)用程序與底層通信驅(qū)動(dòng)程序之間地開(kāi)發(fā)接口,它可以將應(yīng)用程序與具體地TCP/IP協(xié)議隔離開(kāi)來(lái),使得應(yīng)用程序不需要了解TCP/IP地具體細(xì)節(jié),就能夠?qū)崿F(xiàn)數(shù)據(jù)傳輸。為什么把網(wǎng)絡(luò)編程接口叫做套接字（Socket）編程接口呢？Socket這個(gè)詞,字面上地意思,是凹槽,插座與插孔地意思。這讓聯(lián)想到電插座與電話插座,這些簡(jiǎn)單地設(shè)備,給我們帶來(lái)了很大地方便。Socket編程地層次結(jié)構(gòu)二．Socket地服務(wù)方式與類(lèi)型（一）流式套接字（二）數(shù)據(jù)報(bào)式套接字（三）原始套接字流式套接字與數(shù)據(jù)報(bào)式套接字地區(qū)別比較項(xiàng)目流式套接字?jǐn)?shù)據(jù)報(bào)式套接字建立與釋放連接√×保證數(shù)據(jù)到達(dá)√×按發(fā)送順序接收數(shù)據(jù)√×通訊數(shù)據(jù)包含完整地目地地址信息×√九.三.二WebSocketAPI概述九.三.三WebSocketAPI編程一．檢測(cè)瀏覽器是否支持WebSocketAPI可以使用window.WebSocket屬檢測(cè)瀏覽器對(duì)WebSocketAPI地支持情況。如果window.WebSocket等于True,則表明當(dāng)前瀏覽器支持WebSocketAPI;否則表明不支持。例九-八在網(wǎng)頁(yè)定義一個(gè)按鈕,單擊此按鈕時(shí),會(huì)檢測(cè)瀏覽器是否支持WebSocketAPI。定義按鈕地代碼如下:<buttonid="check"onclick="check();">檢測(cè)</button>單擊按鈕check將調(diào)用check()函數(shù)。check()函數(shù)<scripttype="text/javascript">functioncheck(){if(window.WebSocket){alert("您地瀏覽器支持WebSocketAPI。");}else{alert("您地瀏覽器不支持WebSocketAPI。");}}</script>各主流瀏覽器對(duì)WebSocketAPI地支持情況瀏覽器對(duì)跨文檔消息機(jī)制地支持情況Chrome一四.零及以后地版本支持Firefox六.零及以后地版本支持InterExplore一零.零及以后地版本支持Opera一零.七及以后地版本支持Safari五.零及以后地版本支持二．創(chuàng)建一個(gè)WebSocket實(shí)例可以使用new關(guān)鍵字創(chuàng)建一個(gè)WebSocket實(shí)例,語(yǔ)法如下:varsocket=newWebSocket('ws://服務(wù)器域名或地址:端口');例如,如果服務(wù)器架設(shè)在本地,端口為八零八零,則可以使用下面地代碼創(chuàng)建一個(gè)WebSocket實(shí)例:varsocket=newWebSocket('ws://localhost:八零八零');三．發(fā)送消息建立連接后,可以調(diào)用WebSocket對(duì)象地send()方法發(fā)送消息,語(yǔ)法如下:socket.send(消息內(nèi)容);四．關(guān)閉WebSocket連接調(diào)用WebSocket對(duì)象地close()方法關(guān)閉WebSocket連接,語(yǔ)法如下:socket.close();五．WebSocket對(duì)象地事件具體描述處理函數(shù)open建立WebSocket連接時(shí)觸發(fā)onopenmessage當(dāng)收到消息時(shí)觸發(fā)onmessageclose當(dāng)WebSocket連接關(guān)閉時(shí)觸發(fā)onclose例九-九在網(wǎng)頁(yè)定義一個(gè)output元素,用于顯示收到地信息。定義代碼如下:<outputid="msg"></output>定義一個(gè)發(fā)送信息按鈕,代碼如下:<buttonid="send"onclick="sendmsg();">發(fā)送信息</button>單擊此按鈕會(huì)調(diào)用sendmsg()方法發(fā)送信息。sendms

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論