客户端与服务器端通信.doc

客户端与服务器端通信cookieCookie是网景公司开发的，便于服务器端程序通过它可以存储和检索客户端机器上的信息，一个Cookie就是一些简单的变量，用于存储客户端机器上web页面所需要的信息。Cookie以Cookie文件的形式将一些简单的记录存储在用户机器上，这些Cookie文件可以由CGI或客户端Javascript创建，然后将被保存直到过期，它是由服务器端程序发送的，用于相应浏览器URL请求的信息组成。当浏览器向web服务器发出一个URL请求时，首先检查请求的URL是否可以和本地的Cookie匹配，那么浏览器将这个Cookie作为HTTP请求URL的一部分发送给web服务器。如果用户是第一次访问网站，CGI程序（或其他的服务器端程序）将通过HTTP响应创建并向浏览器发送Cookie，当服务器端程序向浏览器发送Cookie以响应URL请求并时，客户端机器上的Cookie将被更新，这样，当服务器端程序被调用的时候就实现了客户端机器状态信息的更新。使用Cookie，网站可以识别该客户端是第一次访问，还是多次访问，还可以得到客户端的访问信息。Cookie还可以为浏览器提供方便的服务，例如在安全性要求不高的场合避免重复输入账号和密码，针对性地投放广告等。 但是由于Cookie可以记录客户端信息，一些恶意代码可以收集客户端信息，例如芯片类型等，还可以随意修改客户段的系统设置，发送广告或者垃圾邮件等。javascript主要在两个方面使用Cookie第一个是记录访客的信息，例如上次登陆的用户名和密码，光临网站的次数等。第二个是在页面间传递变量。如果需要在页面间传递信息，方法之一就是将变量用Cookie的形式保存下来，需要获取变量的页面通过读取Cookie来获得变量的值。（1）name ：Cookie的唯一标志。（2）value：保存在Cookie中的值，在存入之前要进行编码。（3）empires：是时间类型的，单位是毫秒。记录Cookie在客户端保留的时间。当系统时间大于Empires属性时，Cookie将被删除。（4）path：用来确定Cookie对象传送的位置。（5）domain：指定关联的web服务器或域，值是域名。（6）secure：Cookie的安全性标志，取值范围为true/false。如果这个属性被设置为true，Cookie会在一个安全的方式“SSL连接”下发送到客户端。通过JavaScript可以设置Cookie、读取Cookie及删除Cookie，但由于接口函数比较少，在JavaScript中操作Cookie比较麻烦。利用document.Cookie属性可以获得计算机中存储的Cookie的名字和值。document.Cookie属性的显示方法是： ；对document.Cookie赋值可以创建一个Cookie，并且不会删除原有的Cookie。function writeCookie(name, value, day)expire = ;expire = new Date(new Date().getTime() + (day * 24*60*60*1000);expire = ; expires= + expire.toGMTString();document.cookie = name + “=” + escape(value) + expire;/escape()将字符串按照URL编码方式进行编码function readCookie(name)if(document.cookie.length0)begin=document.cookie.indexOf(name+=);if(begin!=-1)begin=begin+name.length+1;end=document.cookie.indexOf(;,begin);if(end=-1)end=document.cookie.length;return unescape(document.cookie.substring(begin,end)return null; return null;function delcookie(name)var exp=new Date();exp.setTime(exp.getTime()-1);if(readcookie(name)!=null)document.cookie=name+=+;expires=+exp.toGMTString();xmlhttp多数浏览支持在JavaScript中直接建立HTTP请求,实现向服务器发送数据及接收从服务器返回的数据等操作,达到客户端和服务器商通信的目的,实现这些功能的核心技术就是微软所建立的XMLHttp对象。在JavaScript脚本中,通过XMLHttp对象可以方便的建立客户与服务器端的通信,完成所需要的数据交互,最主要的交互方式为GET和post方法。XMLHttp对象实质是一组API函数集，可以被脚本语言或编程语言调用，通过HTTP请求在浏览器和服务器之间收发XML或其他数据。要使用XMLHttp对象，首先要创建XMLHttp对象的实例。不同浏览器创建和使用的方法稍有不同。在IE中，微软通过ActiveX控件方式获得XMLHttp对象实例：var XMLHttpRquest=new ActiveXObject(“MSXML2.XMLHTTP”)var XMLHttpRquest=new ActiveXObject(“MSXML.XMLHTTP”)使用哪种方法创建，取决于客户端所安装的MSXML版本，参数可以是“MSXML2.XMLHTTP.5.0、 MSXML2.XMLHTTP.4.0 、MSXML2.XMLHTTP.3.0 、MSXML2.XMLHTTP和Microsoft.XMLHttp为方便开发者找到客户端的最新MSXML版本，可以利用函数创建XMLHttp对象实例function createXMLHTTP( ) var arrVersions=“MSXML2.XMLHTTP.5.0”, “MSXML2.XMLHTTP.4.0 “,”MSXML2.XMLHTTP.3.0”,”MSXML2.XMLHTTP”,”Microsoft.XMLHttp”; for (var i=0;i0) sParams+= “&”; return sParams+encodeURIComponent(sName)+”=“enencodeURIComponent(sValue);post请求的HTTP头部比GET请求的HTTP头部复杂XMLHttpRequest.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);var XMLHttpRequest=createXMLHTTP();var sParams=“”;sParams =addURLParamPost(sParams,”name”,”yourname”);sParams =addURLParamGet(sParams,”sex”,”male”);XMLHttpRequest.open(“post”,”search.asp”,false);XMLHttpRequest.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);XMLHttpRequest.send(sParams);Ajax对web应用来说，有很多不适合其发挥特长的应用领域，如对实时要求比较高的电话系统、银行系统等。此外由于网速、硬件配置等原因，在一些web应用本应发挥特长的领域也表现得不尽如意，如浏览网页在页面跳转时等待较长时间，局部页面数据提交造成整个页面的刷新等。传统的WEB应用模型采用同步交互模式,如图所示：Ajax WEB应用模式,如图所示：Ajax采用异步交互模式,可以仅向服务器发送并取回必需的数据,并在客户端采用JavaScript处理来自服务器的响应。使用Ajax Web应用模式的优势：无刷新更新页面,减少用户等待时间减轻服务器的负担带来更好的用户体验Ajax可以把以前一些服务器负担的工作转给客户端,利用客户端的能力来处理,减轻服务器和带宽的负担Ajax可以调用外部数据,增加了Ajax的灵活性基于标准化的并被广泛支持的技术促进页面呈现和数据的分离Ajax的出现揭开了无刷新更新页面的序幕,并有代替传统web开发中采用表单递交方式来更新web页面的趋势。Ajax最早认为是异步JavaScript和XML的缩写,更深的理解是Ajax为一种结合了Java、XML与JavaScript 等编程技术的创建交互式网页应用的web开发技术。Ajax是使用客户端脚本与web服务器异步交换数据的web应用开发方法。使用Ajax，可以在不中断交互流程的情况下，重新加载web页面，从而实现动态更新；使用Ajax，可以创建接近本地桌面应用的、直接的、易用的、更丰富的、更动态的web用户接口界面。Ajax不是一种新技术，而几种技术的组合，这些技术主要包含：XHTML和CSS：使用XHTML和CSS标准化呈现；DOM：使用DOM实现动态显示和交互；XML和XSLT：使用XML和XSLT进行数据交换和处理；XMLHttpRequest:使用XMLHttpRequest进行异步数据读取JavaScript： 使用JavaScript绑定和处理所有数据JavaScript:编写Ajax引擎的脚本语言,同时负责绑定和处理所有数据,起到纽带的作用.XMLHttpRequest:主要的通信代理,实现客户端和服务器端的异步数据交互.DOM:对已载入页面进行动态更新,实现动态显示和交互.XML:数据交互格式,随着XML的浒其将成为Ajax的一部分随着Ajax技术的流行,越来越多的商业网站使用Ajax技术来改进其用户体验,并获得了很好的效果,受到广大用户的欢迎。成功案例：Google主页、Google Maps等Ajax的特点在于异步通信、按需读取数据、动态地更新Web页面，适用于频繁交互、频繁读取数据、需要动态更新的Web应用。主要应用场景有：数据验证按需读取数据自动实时更新页面使用GET()方法异步取得本地文件d12.txt，则要用onreadystatechange来附加判断readyState属性是否达到4(完成状态)。var XMLHttpRequest=createXMLHTTP();XMLHttpRequest.open(get,d12.txt,true);XMLHttpRequest.onreadstatechange=function() if (XMLHttpRequest.readyState=4) alert (服务器返回的数据为:+XMLHttpRequest.responseText);XMLHttpRequest.send(null);if(XMLHttpRequest.status=200)alert(服务器返回的数据为:+XMLHttpRequest.responseText);elsealert(错误代码:+XMLHttpRequest.status+错误描述:+XMLHttpRequest.statusText);12122122高级形式$(#resText).load(get2.asp, username : $(#username).val() , content : $(#content).val() , function (data, te