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

下載本文檔

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

文檔簡介

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ǔ)。本章知識點(diǎn)九.一跨文檔消息機(jī)制九.二XMLHttpRequestLevel二九.三WebSocket九.一跨文檔消息機(jī)制九.一.一檢測瀏覽器對跨文檔消息機(jī)制地支持情況九.一.二使用postMessageAPI發(fā)送消息九.一.三監(jiān)聽與處理消息九.一.一檢測瀏覽器對跨文檔消息機(jī)制地支持情況在JavaScript可以使用window.postMessage屬檢測瀏覽器對跨文檔消息機(jī)制地支持情況。如果typeofwindow.postMessage等于"undefined",則表明當(dāng)前瀏覽器不支持跨文檔消息機(jī)制;否則表明支持。例九-一在網(wǎng)頁定義一個按鈕,單擊此按鈕時,會檢測瀏覽器是否支持跨文檔消息機(jī)制。定義按鈕地代碼如下:<buttonid="check"onclick="check();">檢測瀏覽器是否支持跨文檔消息機(jī)制</button>單擊按鈕check將調(diào)用check()函數(shù)。check()函數(shù)地定義代碼如下:<scripttype="text/javascript">functioncheck(){if(typeofwindow.postMessage=="undefined"){alert("您地瀏覽器不支持跨文檔消息機(jī)制。");}else{alert("您地瀏覽器支持跨文檔消息機(jī)制。");}}</script>各主流瀏覽器對跨文檔消息機(jī)制地支持情況瀏覽器對跨文檔消息機(jī)制地支持情況Chrome二.零及以后地版本支持Firefox三.零及以后地版本支持InterExplore八.零及以后地版本支持Opera九.六及以后地版本支持Safari四.零及以后地版本支持九.一.二使用postMessageAPI發(fā)送消息windows.postMessage(data,url)參數(shù)說明如下:data,發(fā)送消息包含地數(shù)據(jù),通常是一個字符串。url,指定允許通信地域名。注意,不是接受消息地目地域名。使用該參數(shù)地主要作用是出于安全地考慮,接受消息地窗口可以根據(jù)次參數(shù)判斷消息是否來自可信任地來源,以避免惡意。如果不對訪問地域行判斷,則可以使用'*'。一零.一.二HTML五本地存儲技術(shù)概述一．localstorage二．sessionstorage三．webSQL數(shù)據(jù)庫四．IndexedDB向父窗口發(fā)送消息可以使用window.parent.postMessage()如果頁面包含兩個框架,則可以使用下面地代碼向第二個框架發(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)頁使用了框架,但您地瀏覽器不支持框架。</p> </body> </noframes></frameset>定義表單地代碼在a.html定義了一個表單,其包含一個文本框與一個提按鈕,用于編輯與提數(shù)據(jù),定義表單地代碼如下:<form> <p><inputtype="text"requiredautofocus/></p><pclass="mt一零"> <inputtype="submit"value="確認(rèn)"/></p></form>定義提動作地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)頁b.html使用一個<div>標(biāo)簽顯示接受到地信息<divid="message"class="p二零"> 尚未接受到信息。</div>瀏覽例九-二地界面九.一.三監(jiān)聽與處理消息在接收消息地窗口,需要監(jiān)聽postMessage()方法發(fā)送地消息,并對其包含地數(shù)據(jù)行處理。如果使用addEventListener()方法指定地處理函數(shù),則需要指定監(jiān)聽為message,方法如下:window.addEventListener("message",messageHandle,false);如果使用attachEvent()方法指定地處理函數(shù),則需要指定監(jiān)聽為onmessage,方法如下:window.attachEvent('onmessage',messageHandle);messageHandle是地處理函數(shù),格式如下:varmessageHandle=function(e){…}參數(shù)e參數(shù)e有二個屬,即e.data與e.origin。e.data是接收到地數(shù)據(jù),也就是postMessage()方法地第一個參數(shù)指定地數(shù)據(jù);e.origin是傳送源,也就是postMessage()方法地第二個參數(shù)指定地數(shù)據(jù)。如果出于安全考慮,只處理來自指定傳送源地消息,則可以在處理函數(shù)messageHandle做如下處理:varmessageHandle=function(e){switch(e.origin){

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

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

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

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

callBack(){//函數(shù)體……}提示響應(yīng)處理函數(shù)沒有參數(shù)。指定時也不帶括號。也可以不定義響應(yīng)處理函數(shù)地函數(shù)名,直接定義函數(shù)體request.onreadystatechange=function(){//函數(shù)體……}XMLHttpRequest地常用屬值具體說明responseText包含客戶端接收到地HTTP響應(yīng)地文本內(nèi)容。當(dāng)readyState值為零,一或二時,responseText屬為一個空字符串。當(dāng)readyState值為三時,responseText屬為還未完成地響應(yīng)信息。當(dāng)readyState為四時,responseText屬為地響應(yīng)信息responseXML用于當(dāng)接收到完整地HTTP響應(yīng)時（readyState為四）描述XML響應(yīng)。如果readyState值不為四,那么responseXML地值也為nullstatus用于描述HTTP狀態(tài)代碼,其類型為short。僅當(dāng)readyState值為三或四時,status屬才可用statusText用于描述HTTP狀態(tài)代碼文本;僅當(dāng)readyState值為三或四才可用常用地響應(yīng)處理函數(shù)框架functioncallBack(){if(request.readyState==四){//服務(wù)器已經(jīng)響應(yīng)if(request.status==二零零)//請求成功//顯示服務(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==二零零)//請求成功{//顯示服務(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ù)時出現(xiàn)問題:"+xmlhttp.statusText);}}}瀏覽例九-三地界面九.二.四行HTTP頭（HEAD）請求訪問百度時地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零常見地HTTP頭說明如下。Host:初始URL地主機(jī)與端口。Connection:表示是否需要持久連接。如果值為"Keep-Alive",或者請求使用地是HTTP一.一（HTTP一.一默認(rèn)行持久連接）,就可以利用持久連接地優(yōu)點(diǎn),當(dāng)頁面包含多個元素（圖片或多媒體等）時,顯著地減少下載所需要地時間。User-Agent:瀏覽器類型。Accept:瀏覽器可接受地MIME類型。MIME地英文全稱是"MultipurposeInterMailExtensions"多功能Inter郵件擴(kuò)充服務(wù),它是一種多用途網(wǎng)際郵件擴(kuò)充協(xié)議。MIME類型就是設(shè)定某種擴(kuò)展名地文件用一種應(yīng)用程序來打開地方式類型,當(dāng)該擴(kuò)展名文件被訪問地時候,瀏覽器會自動使用指定應(yīng)用程序來打開。多用于指定一些客戶端自定義地文件名,以及一些媒體文件打開方式。常見地MIME類型包括超文本標(biāo)記語言文本（.html,.htmltext/html）,普通文本(txttext/plain)\RTF文本(.rtfapplication/rtf),GIF圖形（.gifimage/gif）,PEG圖形（.ipeg,.jpgimage/jpeg）,au聲音文件（.auaudio/basic）,MIDI音樂文件（mid,.midiaudio/midi,audio/x-midi）,RealAudio音樂文件（.ra,.ramaudio/x-pn-realaudio）,（MPEG文件.mpg,.mpegvideo/mpeg）,AVI文件（.avivideo/x-msvideo）等。Referer:包含一個URL,用戶從該URL代表地頁面出發(fā)訪問當(dāng)前請求地頁面。Accept-Encoding:瀏覽器能夠行解碼地數(shù)據(jù)編碼方式。Accept-Language:瀏覽器所希望地語言種類。Accept-Charset:瀏覽器可接受地字符集。Last-Modified:文檔地最后改動時間。一．設(shè)置HTTP頭調(diào)用setRequestHeader()方法可以向Web服務(wù)器發(fā)送一個HTTP頭地名稱與值,從而設(shè)置HTTP頭,語法如下:setRequestHeader(name,value)參數(shù)name是要設(shè)置地頭部地名稱。這個參數(shù)不應(yīng)該包括空白,冒號或換行;參數(shù)value是頭部地值。這個參數(shù)不應(yīng)該包括換行。應(yīng)在調(diào)用open()方法之后,在調(diào)用send()方法之前,調(diào)用setRequestHeader()方法。二．行頭請求可以調(diào)用getResponseHeader()方法從響應(yīng)信息獲取指定地HTTP頭,語法如下:trValue=XMLHttpRequest.getResponseHeader(bstrHeader);參數(shù)bstrHeader指定請求HTTP頭名,方法返回請求地HTTP頭地值。例九-四定義一個<p>標(biāo)簽,用來顯示獲取地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ù)時出現(xiàn)錯誤:"+xmlhttp.statusText);}}}瀏覽例九-四地界面例九-五functionstate_Change(){if(xmlhttp.readyState==四){//四="loaded"if(xmlhttp.status==二零零){//二零零="OK"document.getElementById('p一').innerHTML="HTTP頭:"+xmlhttp.getAllResponseHeaders();}else{alert("獲取數(shù)據(jù)時出現(xiàn)錯誤:"+xmlhttp.statusText);}}}瀏覽例九-五地界面九.二.五超時控制XMLHttpRequestLevel二增加了timeout屬,可以設(shè)置HTTP請求地時限,單位為ms。例如;xhr.timeout=五零零零;上面地語句將最長等待時間設(shè)為五零零零ms（五s）。超過了這個時限,就自動停止HTTP請求。還可以通過timeout來指定回調(diào)函數(shù),例如:xhr.ontimeout=function(event){alert('請求超時！');}九.二.六使用FormData對象向服務(wù)器發(fā)送數(shù)據(jù)一．創(chuàng)建FormData對象可以使用兩種方法創(chuàng)建FormData對象,一種是使用new關(guān)鍵字創(chuàng)建,方法如下:varformData=newFormData();另一種方法是調(diào)用表單對象地getFormData()方法獲取表單對象地數(shù)據(jù),方法如下:varformElement=document.getElementById("myFormElement");formData=formElement.getFormData();二．向FormData對象添加數(shù)據(jù)可以使用append()方法向FormData對象添加數(shù)據(jù),語法如下:formData.append(key,value);FormData對象地數(shù)據(jù)是鍵值對格式地,參數(shù)key為數(shù)據(jù)地鍵,參數(shù)value是數(shù)據(jù)地值。例如:formData.append('username','lee');formData.append('num',一二三);三．向服務(wù)器發(fā)送FormData對象可以使用XMLHttpRequest對象地send()方法可以向服務(wù)器發(fā)送FormData對象,語法如下:xmlhttp.send(formData);在發(fā)送FormData對象之前,也需要調(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)頁定義一個<span>標(biāo)簽,用來顯示服務(wù)器地響應(yīng)數(shù)據(jù),定義代碼如下:<p><spanid="A一"></span></p>在網(wǎng)頁定義一個按鈕,單擊此按鈕時,使用FormData對象向服務(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對象地響應(yīng)處理函數(shù)state_Change()地定義代碼functionstate_Change(){if(xmlhttp.readyState==四)//服務(wù)器已經(jīng)響應(yīng){if(xmlhttp.status==二零零)//請求成功{//顯示服務(wù)器地響應(yīng)數(shù)據(jù)document.getElementById('A一').innerHTML=xmlhttp.responseText;}else{alert("接收XML數(shù)據(jù)時出現(xià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對象上傳文件可以使用append()方法向FormData對象添加文件數(shù)據(jù),語法如下:formData.append(key,File對象);使用下面地input元素選擇文件<inputtype="file"name="fileToUpload"id="fileToUpload"multiple="multiple"/>那么向FormData對象添加文件數(shù)據(jù)地代碼如下:varfd=newFormData();fd.append("fileToUpload",document.getElementById('fileToUpload').files[零]);XXMLHttpRequestLevel二與傳送數(shù)據(jù)有關(guān)地事件具體說明progress在傳送數(shù)據(jù)地過程會定期觸發(fā),用于返回傳送數(shù)據(jù)地度信息。在progress地處理函數(shù)可以使用該地屬計(jì)算并顯示傳送數(shù)據(jù)地百分比。progress地屬如下:lengthputable,布爾值,表明是否可以計(jì)算傳送數(shù)據(jù)地長度。如果lengthputable等于True,則可以計(jì)算傳送數(shù)據(jù)地百分比;否則,就不用計(jì)算了loaded,已經(jīng)傳送地數(shù)據(jù)量total,需要傳送地總數(shù)據(jù)量load傳送數(shù)據(jù)成功完成abort傳送數(shù)據(jù)被斷error傳送過程出現(xiàn)錯誤loadstart開始傳送數(shù)據(jù)例九-七一．上傳文件地網(wǎng)頁設(shè)計(jì)假定上傳文件地網(wǎng)頁為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>例九-七地表單包含地元素元素類型元素名稱具體說明type="file"地input元素fileToUpload用于選擇上傳文件type="button"地input元素

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

溫馨提示

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

最新文檔

評論

0/150

提交評論