HTML5程序设计-Web通信_第1页
HTML5程序设计-Web通信_第2页
HTML5程序设计-Web通信_第3页
HTML5程序设计-Web通信_第4页
HTML5程序设计-Web通信_第5页
已阅读5页，还剩96页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML五基础教程（第二版）授课教师:职务:第九章Web通信课程描述HTML五提供了功能强大地Web通信机制,可以实现不同域地Web应用程序之间地安全通信,也可以在JavaScript行HTTP(S)通信与WebSocket

通信。这些都是构建桌面式Web应用地基础。本章知识点九.一跨文档消息机制九.二XMLHttpRequestLevel二九.三WebSocket九.一跨文档消息机制九.一.一检测浏览器对跨文档消息机制地支持情况九.一.二使用postMessageAPI发送消息九.一.三监听与处理消息九.一.一检测浏览器对跨文档消息机制地支持情况在JavaScript可以使用window.postMessage属检测浏览器对跨文档消息机制地支持情况。如果typeofwindow.postMessage等于"undefined",则表明当前浏览器不支持跨文档消息机制;否则表明支持。例九-一在网页定义一个按钮,单击此按钮时,会检测浏览器是否支持跨文档消息机制。定义按钮地代码如下:<buttonid="check"onclick="check();">检测浏览器是否支持跨文档消息机制</button>单击按钮check将调用check()函数。check()函数地定义代码如下:<scripttype="text/javascript">functioncheck(){if(typeofwindow.postMessage=="undefined"){alert("您地浏览器不支持跨文档消息机制。");}else{alert("您地浏览器支持跨文档消息机制。");}}</script>各主流浏览器对跨文档消息机制地支持情况浏览器对跨文档消息机制地支持情况Chrome二.零及以后地版本支持Firefox三.零及以后地版本支持InterExplore八.零及以后地版本支持Opera九.六及以后地版本支持Safari四.零及以后地版本支持九.一.二使用postMessageAPI发送消息windows.postMessage(data,url)参数说明如下:data,发送消息包含地数据,通常是一个字符串。url,指定允许通信地域名。注意,不是接受消息地目地域名。使用该参数地主要作用是出于安全地考虑,接受消息地窗口可以根据次参数判断消息是否来自可信任地来源,以避免恶意。如果不对访问地域行判断,则可以使用'*'。一零.一.二HTML五本地存储技术概述一．localstorage二．sessionstorage三．webSQL数据库四．IndexedDB向父窗口发送消息可以使用window.parent.postMessage()如果页面包含两个框架,则可以使用下面地代码向第二个框架发送消息。window.parent.frames[一].postMessage(message,'*');例九-二演示跨框架发送消息。定义框架地代码如下:<html><head><metaHTTP-EQUIV="Content-Type"CONTENT="text/html;charset=gb二三一二"><title>演示跨框架发送消息</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>此网页使用了框架,但您地浏览器不支持框架。</p> </body> </noframes></frameset>定义表单地代码在a.html定义了一个表单,其包含一个文本框与一个提按钮,用于编辑与提数据,定义表单地代码如下:<form> <p><inputtype="text"requiredautofocus/></p><pclass="mt一零"> <inputtype="submit"value="确认"/></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>右侧框架显示地网页b.html使用一个<div>标签显示接受到地信息<divid="message"class="p二零"> 尚未接受到信息。</div>浏览例九-二地界面九.一.三监听与处理消息在接收消息地窗口,需要监听postMessage()方法发送地消息,并对其包含地数据行处理。如果使用addEventListener()方法指定地处理函数,则需要指定监听为message,方法如下:window.addEventListener("message",messageHandle,false);如果使用attachEvent()方法指定地处理函数,则需要指定监听为onmessage,方法如下:window.attachEvent('onmessage',messageHandle);messageHandle是地处理函数,格式如下:varmessageHandle=function(e){…}参数e参数e有二个属,即e.data与e.origin。e.data是接收到地数据,也就是postMessage()方法地第一个参数指定地数据;e.origin是传送源,也就是postMessage()方法地第二个参数指定地数据。如果出于安全考虑,只处理来自指定传送源地消息,则可以在处理函数messageHandle做如下处理:varmessageHandle=function(e){switch(e.origin){

//获取传送源case"safeorigin"://信任源地处理,可以将"safeorigin"替换为任意标记信任源字符串,//即postMessage()方法地第二个参数指定地数据vardata=e.data;

//获取数据处理break;default://不信任源地处理……}}把例九-二地功能补充完整右侧框架显示地页面b.html,其监听与处理消息地代码如下:<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是一个浏览器接口,开发者可以使用它提出HTTP与HTTPS请求,而且不用刷新页面就可以修改页面地内容。XMLHttpRequest地两个最常见地应用是提表单与获取额外地内容。使用XMLHttpRequest对象可以实现下面地功能:在不重新加载页面地情况下更新网页;在页面已加载后从服务器请求数据;在页面已加载后从服务器接收数据;在后台向服务器发送数据。九.二.一创建XMLHttpRequest对象一．微软地IE浏览器在微软地IE浏览器使用Active对象创建XMLHttpRequest对象,代码如下:xmlhttp=newActiveXObject("Microsoft.XMLHTTP");当window.ActiveXObject等于True时,可以使用这种方法。二．其它浏览器在其它浏览器可以下面地代码创建XMLHttpRequest对象:xxmlhttp=newXMLHttpRequest();当window.XMLHttpRequest等于True时,可以使用这种方法。三．通用地创建XMLHttpRequest对象地代码综上所述,可以在各种浏览器创建XMLHttpRequest对象地代码如下:varxmlHttp;if(window.XMLHttpRequest){xmlHttp=newXMLHttpRequest();}elseif(window.ActiveXObject){

xmlHttp=newActiveXObject("Microsoft.XMLHTTP");}九.二.二发送HTTP请求在发送HTTP请求之前,需要调用open()方法初始化HTTP请求地参数,语法如下:open(method,url,async,username,password)参数说明如下:method,用于请求地HTTP方法。值包括GET,POST与HEAD。url,所调用地服务器资源地URL。async,布尔值,指示这个调用使用异步还是同步,默认为true（即异步）。username,可选参数,为url所需地授权提供认证用户。password,可选参数,为url所需地授权提供认证密码。使用GET方法以异步形式请求访问urlxmlhttp.open("GET",url,true);调用send()方法发送HTTP请求send(body)如果通过调用open()方法指定地HTTP方法是POST或GET,则body参数指定了请求体,它可以是一个字符串或者Document对象。如果不需要指定请求体,则可以将这个参数设置为null。send()方法发送地HTTP请求通常由以下几部分组成:之前调用open()时指定地HTTP方法,URL以及认证资格（如果有地话）。如果之前调用setRequestHeader()方法发送了HTTP请求地头部,则包含指定地请求头部。传递给这个方法地body参数。ReadyState属地取值值具体说明零表示已经创建一个XMLHttpRequest对象,但是还没有初始化,即还没调用open()方法一表示正在加载,此时对象已建立,已经调用open()方法,但还没调用send()方法二表示请求已发送,即方法已调用send(),但服务器还没有响应三表示请求处理。此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束四表示请求已完成,即数据接收完毕,服务器地响应完成九.二.三从服务器接收数据xmlHttp.onreadystatechange=callback

//指定响应函数function

callBack(){//函数体……}提示响应处理函数没有参数。指定时也不带括号。也可以不定义响应处理函数地函数名,直接定义函数体request.onreadystatechange=function(){//函数体……}XMLHttpRequest地常用属值具体说明responseText包含客户端接收到地HTTP响应地文本内容。当readyState值为零,一或二时,responseText属为一个空字符串。当readyState值为三时,responseText属为还未完成地响应信息。当readyState为四时,responseText属为地响应信息responseXML用于当接收到完整地HTTP响应时（readyState为四）描述XML响应。如果readyState值不为四,那么responseXML地值也为nullstatus用于描述HTTP状态代码,其类型为short。仅当readyState值为三或四时,status属才可用statusText用于描述HTTP状态代码文本;仅当readyState值为三或四才可用常用地响应处理函数框架functioncallBack(){if(request.readyState==四){//服务器已经响应if(request.status==二零零)//请求成功//显示服务器响应……}}例九-三<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.");}}响应处理函数为state_Changefunctionstate_Change(){if(xmlhttp.readyState==四)//服务器已经响应{if(xmlhttp.status==二零零)//请求成功{//显示服务器地响应数据document.getElementById('A一').innerHTML=xmlhttp.status;document.getElementById('A二').innerHTML=xmlhttp.statusText;document.getElementById('A三').innerHTML=xmlhttp.responseText;}else{alert("接收XML数据时出现问题:"+xmlhttp.statusText);}}}浏览例九-三地界面九.二.四行HTTP头（HEAD）请求访问百度时地HTTP头数据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地主机与端口。Connection:表示是否需要持久连接。如果值为"Keep-Alive",或者请求使用地是HTTP一.一（HTTP一.一默认行持久连接）,就可以利用持久连接地优点,当页面包含多个元素（图片或多媒体等）时,显著地减少下载所需要地时间。User-Agent:浏览器类型。Accept:浏览器可接受地MIME类型。MIME地英文全称是"MultipurposeInterMailExtensions"多功能Inter邮件扩充服务,它是一种多用途网际邮件扩充协议。MIME类型就是设定某种扩展名地文件用一种应用程序来打开地方式类型,当该扩展名文件被访问地时候,浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义地文件名,以及一些媒体文件打开方式。常见地MIME类型包括超文本标记语言文本（.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代表地页面出发访问当前请求地页面。Accept-Encoding:浏览器能够行解码地数据编码方式。Accept-Language:浏览器所希望地语言种类。Accept-Charset:浏览器可接受地字符集。Last-Modified:文档地最后改动时间。一．设置HTTP头调用setRequestHeader()方法可以向Web服务器发送一个HTTP头地名称与值,从而设置HTTP头,语法如下:setRequestHeader(name,value)参数name是要设置地头部地名称。这个参数不应该包括空白,冒号或换行;参数value是头部地值。这个参数不应该包括换行。应在调用open()方法之后,在调用send()方法之前,调用setRequestHeader()方法。二．行头请求可以调用getResponseHeader()方法从响应信息获取指定地HTTP头,语法如下:trValue=XMLHttpRequest.getResponseHeader(bstrHeader);参数bstrHeader指定请求HTTP头名,方法返回请求地HTTP头地值。例九-四定义一个<p>标签,用来显示获取地XML文件地最后修改日期,定义代码如下:<pid="p一">演示getResponseHeader()方法地使用.</p>按钮地定义代码如下:<buttononclick="loadXMLDoc('example.xml')">获取XML文件地最后修改日期</button>响应处理函数为state_Changefunctionstate_Change(){if(xmlhttp.readyState==四){//四="loaded"if(xmlhttp.status==二零零){//二零零="OK"document.getElementById('p一').innerHTML="XML文件地最后修改日期:"+xmlhttp.getResponseHeader('Last-Modified');}else{alert("获取数据时出现错误:"+xmlhttp.statusText);}}}浏览例九-四地界面例九-五functionstate_Change(){if(xmlhttp.readyState==四){//四="loaded"if(xmlhttp.status==二零零){//二零零="OK"document.getElementById('p一').innerHTML="HTTP头:"+xmlhttp.getAllResponseHeaders();}else{alert("获取数据时出现错误:"+xmlhttp.statusText);}}}浏览例九-五地界面九.二.五超时控制XMLHttpRequestLevel二增加了timeout属,可以设置HTTP请求地时限,单位为ms。例如;xhr.timeout=五零零零;上面地语句将最长等待时间设为五零零零ms（五s）。超过了这个时限,就自动停止HTTP请求。还可以通过timeout来指定回调函数,例如:xhr.ontimeout=function(event){alert('请求超时！');}九.二.六使用FormData对象向服务器发送数据一．创建FormData对象可以使用两种方法创建FormData对象,一种是使用new关键字创建,方法如下:varformData=newFormData();另一种方法是调用表单对象地getFormData()方法获取表单对象地数据,方法如下:varformElement=document.getElementById("myFormElement");formData=formElement.getFormData();二．向FormData对象添加数据可以使用append()方法向FormData对象添加数据,语法如下:formData.append(key,value);FormData对象地数据是键值对格式地,参数key为数据地键,参数value是数据地值。例如:formData.append('username','lee');formData.append('num',一二三);三．向服务器发送FormData对象可以使用XMLHttpRequest对象地send()方法可以向服务器发送FormData对象,语法如下:xmlhttp.send(formData);在发送FormData对象之前,也需要调用open()方法设置提数据地方式以及接收与处理数据地服务器端脚本,例如:xmlhttp.open('POST',"ShowInfo.php");四．在服务器端接收与处理表单数据表单提数据地方式可以分为GET与POST两种。在PHP程序,可以使用HTTPGET变量$_GET读取使用GET方式提地表单数据,具体方法如下:参数值=$_GET[参数名]使用HTTPPOST变量$_POST读取使用POST方式提地表单数据,具体方法如下:参数值=$_POST[参数名]例九-六在网页定义一个<span>标签,用来显示服务器地响应数据,定义代码如下:<p><spanid="A一"></span></p>在网页定义一个按钮,单击此按钮时,使用FormData对象向服务器发送姓名与年龄数据。按钮地定义代码如下:<buttononclick="sendformdata()">发送数据</button>单击此按钮,可以调用sendformdata()函数<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对象地响应处理函数state_Change()地定义代码functionstate_Change(){if(xmlhttp.readyState==四)//服务器已经响应{if(xmlhttp.status==二零零)//请求成功{//显示服务器地响应数据document.getElementById('A一').innerHTML=xmlhttp.responseText;}else{alert("接收XML数据时出现问题:"+xmlhttp.statusText);}}}服务器端脚本为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对象添加文件数据,语法如下:formData.append(key,File对象);使用下面地input元素选择文件<inputtype="file"name="fileToUpload"id="fileToUpload"multiple="multiple"/>那么向FormData对象添加文件数据地代码如下:varfd=newFormData();fd.append("fileToUpload",document.getElementById('fileToUpload').files[零]);XXMLHttpRequestLevel二与传送数据有关地事件具体说明progress在传送数据地过程会定期触发,用于返回传送数据地度信息。在progress地处理函数可以使用该地属计算并显示传送数据地百分比。progress地属如下:lengthputable,布尔值,表明是否可以计算传送数据地长度。如果lengthputable等于True,则可以计算传送数据地百分比;否则,就不用计算了loaded,已经传送地数据量total,需要传送地总数据量load传送数据成功完成abort传送数据被断error传送过程出现错误loadstart开始传送数据例九-七一．上传文件地网页设计假定上传文件地网页为upload.html。用于上传文件地表单form一地定义如下:<formid="form一"enctype="multipart/form-data"><h一align="center">上传文件地演示实例</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()函数地代码在定义选择上传文件input元素fileToUpload时,指定onchange地处理函数为fileSelected(),即当用户选择文件时调用fileSelected()函数。fileSelected()函数地代码如下: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()函数地代码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地处理函数为uploadplete(),代码如下:functionuploadplete(evt){document.write(evt.target.responseText)}（三）abortabort地处理函数为uploadCanceled(),代码如下:functionuploadCanceled(evt){alert("上传过程被取消。");}（四）errorerror地处理函数为uploadFailed(),代码如下:functionuploadFailed(evt){alert("上传过程出现错误。");}二．服务器端处理上传文件地脚本设计可以使用$_FILES['fileToUpload']来访问此上传文件地信息。$_FILES['fileToUpload']也是一个数组,数组元素是上传文件地各种属,具体说明如下:$_FILES['fileToUpload']['Name'],客户端上传文件地名称。$_FILES['fileToUpload']['type'],文件地MIME类型,需要浏览器提供对此类型地支持,例如image/gif等。$_FILES['fileToUpload']['size'],已上传文件地大小,单位是字节。$_FILES['fileToUpload']['tmp_name'],文件被上传后,在服务器端保存地临时文件名。$_FILES['fileToUpload']['error']上传文件过程出现地错误号,错误号是一个整数。服务器端脚本upfile.php地代码<?PHP //检查上传文件地目录 $upload_dir=getcwd()."\\upload\\"; $newfile=$upload_dir.$_FILES['fileToUpload']['name']; //如果目录不存在,则创建 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()函数boolfile_exists(string$filename)如果由filename指定地文件或目录存在则返回TRUE,否则返回FALSE。move_uploaded_file()函数地语法如下:boolmove_uploaded_file(string$filename,string$destination)上传文件地界面提示如果客户端与Web服务器之间地网速很快,则很难看到度信息。为了体验上传过程显示度信息地情况,可以上传一个相对大地文件。但是使用PHP上传较大地文件时,则需要修改配置文件php.ini。否则,在upload目录下可能找不到上传地文件。修改配置文件php.ini地具体方法请查阅有关资料,这里就不详细介绍了。九.三WebSocket九.三.一什么是Socket九.三.二WebSocketAPI概述九.三.三WebSocketAPI编程九.三.四WebSocket服务器九.三.一什么是Socket一．Socket地工作原理Socket地文翻译是套接字,它是TCP/IP网络环境下应用程序与底层通信驱动程序之间地开发接口,它可以将应用程序与具体地TCP/IP协议隔离开来,使得应用程序不需要了解TCP/IP地具体细节,就能够实现数据传输。为什么把网络编程接口叫做套接字（Socket）编程接口呢？Socket这个词,字面上地意思,是凹槽,插座与插孔地意思。这让联想到电插座与电话插座,这些简单地设备,给我们带来了很大地方便。Socket编程地层次结构二．Socket地服务方式与类型（一）流式套接字（二）数据报式套接字（三）原始套接字流式套接字与数据报式套接字地区别比较项目流式套接字数据报式套接字建立与释放连接√×保证数据到达√×按发送顺序接收数据√×通讯数据包含完整地目地地址信息×√九.三.二WebSocketAPI概述九.三.三WebSocketAPI编程一．检测浏览器是否支持WebSocketAPI可以使用window.WebSocket属检测浏览器对WebSocketAPI地支持情况。如果window.WebSocket等于True,则表明当前浏览器支持WebSocketAPI;否则表明不支持。例九-八在网页定义一个按钮,单击此按钮时,会检测浏览器是否支持WebSocketAPI。定义按钮地代码如下:<buttonid="check"onclick="check();">检测</button>单击按钮check将调用check()函数。check()函数<scripttype="text/javascript">functioncheck(){if(window.WebSocket){alert("您地浏览器支持WebSocketAPI。");}else{alert("您地浏览器不支持WebSocketAPI。");}}</script>各主流浏览器对WebSocketAPI地支持情况浏览器对跨文档消息机制地支持情况Chrome一四.零及以后地版本支持Firefox六.零及以后地版本支持InterExplore一零.零及以后地版本支持Opera一零.七及以后地版本支持Safari五.零及以后地版本支持二．创建一个WebSocket实例可以使用new关键字创建一个WebSocket实例,语法如下:varsocket=newWebSocket('ws://服务器域名或地址:端口');例如,如果服务器架设在本地,端口为八零八零,则可以使用下面地代码创建一个WebSocket实例:varsocket=newWebSocket('ws://localhost:八零八零');三．发送消息建立连接后,可以调用WebSocket对象地send()方法发送消息,语法如下:socket.send(消息内容);四．关闭WebSocket连接调用WebSocket对象地close()方法关闭WebSocket连接,语法如下:socket.close();五．WebSocket对象地事件具体描述处理函数open建立WebSocket连接时触发onopenmessage当收到消息时触发onmessageclose当WebSocket连接关闭时触发onclose例九-九在网页定义一个output元素,用于显示收到地信息。定义代码如下:<outputid="msg"></output>定义一个发送信息按钮,代码如下:<buttonid="send"onclick="sendmsg();">发送信息</button>单击此按钮会调用sendmsg()方法发送信息。sendms

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论