客户端与服务器端通信

1、客户端及服务器端通信 cookieCookie是网景公司开发，便于服务器端程序通过它可以存储和检索客户端 机器上信息，一个Cookie就是一些简单变量，用于存储客户端机器上web 页面所需要信息。Cookie以Cookie文件形式将一些简单记录存储在用户机器上，这些 Cookie文件可以由CGI或客户端Javascript创建，然后将被保存直到过 期，它是由服务器端程序发送，用于相应浏览器URL请求信息组成。 当浏览器向web服务器发出一个URL请求时，首先检查请求URL是否可以 和本地Cookie匹配，那么浏览港将这个Cookie作为HTTP请求URL 一部分 发送给web服务器。如果用户是

2、第一次访问网站，CGI程序(或其他服务 器端程序)将通过HTTP响应创建并向浏览器发送Cookie,当服务器端程 序向浏览器发送Cookie以响应URL请求并时，客户端机器上Cookie将被 更新，这样，当服务器端程序被调用时候就实现了客户端机器状态信息更 新。使用Cookie,网站可以识别该客户端是第一次访问，还是多次访问，还可 以得到客户端访问信息。Cookie还可以为浏览器提供方便服务，例如在安全性要求不高场合避免重 复输入账号和密码，针对性地投放广告等。但是由于Cookie可以记录客户端信息，一些恶意代码可以收集客户端信 息，例如芯片类型等，还可以随意修改客户段系统设置，发送广告或者垃

3、 圾邮件等。javascript主要在两个方面使用Cookie第一个是记录访客信息，例如上次登陆用户名和密码，光临网站次数等。 第二个是在页面间传递变量。如果需要在页面间传递信息，方法之一就是 将变量用Cookie形式保存下来，需要获取变量页面通过读取Cookie来获 得变量值。(1) name ： Cookie 唯一标志。(2) value：保存在Cookie中值，在存入之前要进行编码。(3) empires：是时间类型，单位是毫秒。记录Cookie在客户端保留时 间。当系统时间大于Empires属性时，Cookie将被删除。(4) path：用来确定Cookie对象传送位置。(5) dom

4、ain：指定关联web服务器或域，值是域名。(6) secure： Cookie安全性标志,取值范围为true/false。如果这个属 性被设置为true, Cookie会在一个安全方式“SSL连接”下发送到客户 端。通过JavaScript可以设置Cookie、读取Cookie及删除Cookie,但由于接 口函数比较少，在JavaScript中操作Cookie比较麻烦。利用document. Cookie属性可以获得计算机中存储Cookie名字和值。 document. Cookie属性显小方法是： =Cookie 值；对document. Cookie赋值可以创建一个Cookie,并且不会

5、删除原有 Cookieo 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, cook

6、ie. length0) ( begin=document. cookie. indexOf(name+=); if(begin!=-l) ( begin二begin+name. length+1;end=document, cookie. indexOf(;， begin); if (end=-l) end=document, cookie, length;return unescape(document, cookie, substring(begin, end) ) return null;) return null;)function delcookie(name)var exp=ne

7、w Date ();exp. setTime (exp. getTime ()-1);if (readcookie(name)!=null) (document, cookie=name+=”+；expires=+exp. toGMTString();)xmlhttp多数浏览支持在JavaScript中直接建立HTTP请求，实现向服务器发送数据 及接收从服务器返回数据等操作,达到客户端和服务器商通信目，实现这些 功能核心技术就是微软所建立XMLHttp对象。在JavaScript脚本中，通过XMLHttp对象可以方便建立客户及服务器端通 信,完成所需要数据交互,最主要交互方式为GET和post

8、方法。XMLHttp对象实质是一组API函数集，可以被脚本语言或编程语言调用， 通过HTTP请求在浏览器和服务器之间收发XML或其他数据。要使用XMLHttp对象，首先要创建XMLHttp对象实例。不同浏览器创建和 使用方法稍有不同。在IE中，微软通过ActiveX控件方式获得XMLHttp对象实例：var XMLHttpRquest=new ActiveXObject( MSXML2. XMLHTTP )var XMLHttpRquest=new ActiveXObject ( MSXML. XMLHTTP )使用哪种方法创建，取决于客户端所安装MSXML版本，参数可以是 “MSXML2.

9、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;i

10、0) sParams+= & ； returnsParams+encodeURIComponent(sName)=enencodeURIComponent(sValu e) ; post请求HTTP头部比GET请求HTTP头部复杂XMLHttpRequest. setRequestHeader( Content-Type” , “ application/x- );var XMLHttpRequest=createXMLHTTP();var sParams= ” ;sParams =addURLParamPost (sParams, “ name , yournamev ;sParams =a

11、ddURLParamGet(sParams, “ sex , “ maleM ;XMLHttpRequest. open( post , search, aspn , false);XMLHttpRequest. setRequestHeader( Content-Type” , “ application/x- );XMLHttpRequest. send (sParams);Ajax对web应用来说，有很多不适合其发挥特长应用领域，如对实时要求比较 高电话系统、银行系统等。此外由于网速、硬件配置等原因，在一些web应用本应发挥特长领域也表 现得不尽如意，如浏览网页在页面跳转时等待较长时间，

12、局部页面数据提 交造成整个页面刷新等。传统WEB应用模型采用同步交互模式,如图所示：browser clientuser irtterfaccI 1HTTP requesthttf (s) trans)ortHTML4css data uIweb server4processing, legacy systems.server-side systemsAjax WEB应用模式，如图所示：browser clientidct interfaceJavaScript call4 HTML-iCSS dataAjax engitncI 八HTTP requesthttp（5）trans ort| X

13、ML data iwrt and/or XML servwdatastores, backend processing, legacy systemsserver-side systemsclient收 f aetjtr血Mtr必timesystem prrceisirgU6f Activitysystem processingserverAjax米用异步交互模式,可以仅向服务器发送并取回必需数据，并在客户端米用JavaScript处理来自服务器响应。使用Ajax Web应用模式优势： 无刷新更新页面,减少用户等待时间减轻服务器负担带来更好用户体验Ajax可以把以前一些服务港负担工作转给客户端

14、,利用客户端能力来处理, 减轻服务器和带宽负担Ajax可以调用外部数据,增加了 Ajax灵活性基于标准化并被广泛支持技术促进页面呈现和数据分离Ajax出现揭开了无刷新更新页面序幕,并有代替传统web开发中采用表单 递交方式来更新web页面趋势。Ajax最早认为是异步JavaScript和XML缩写，更深理解是Ajax为一种结 合了 Java、XML及JavaScript等编程技术创建交互式网页应用web开发 技术。Ajax是使用客户端脚本及web服务器异步交换数据web应用开发方法。使 用Ajax,可以在不中断交互流程情况下，重新加载web页面，从而实现动 态更新；使用Ajax,可以创建接近本

15、地桌面应用、直接、易用、更丰富、 更动态web用户接口界面。Ajax不是一种新技术，而几种技术组合，这些技术主要包含：XHTML和CSS：使用XHTML和CSS标准化呈现；D0M：使用D0M实现动态显示和交互；XML和XSLT：使用XML和XSLT进行数据交换和处理；XMLHttpRequest:使用XMLHttpRequest进行异步数据读取client browser UIuser acxiYty OB Ajax enginedient-slcie pcckcssoqR 32 serverdot.寻serve r-sewcdpwoer-sweserver-sideJavaScript：使用

16、JavaScript绑定和处理所有数据JavaScript:编写Ajax引擎脚本语言，同时负责绑定和处理所有数据，起到 纽带作用.XMLHttpRequest:主要通信代理,实现客户端和服务器端异步数 据交互.D0M:对已载入页面进行动态更新，实现动态显示和交互.XML：数据交互格式，随着XML浒其将成为Ajax 一部分随着Ajax技术流行,越来越多商业网站使用Ajax技术来改进其用户体验， 并获得了很好效果,受到广大用户欢迎。成功案例：Google主页、Google Maps等Ajax特点在于异步通信、按需读取数据、动态地更新Web页面，适用于频 繁交互、频繁读取数据、需要动态更新Web应用

17、。主要应用场景有：数据验证按需读取数据自动实时更新页面使用GET()方法异步取得本地文件dl2. txt,则要用onreadystatechange 来附加判断readyState属性是否达到4 (完成状态)。var XMLHttpRequest=createXMLHTTP();XMLHttpRequest, open(get”, dl2. 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);高级形式$ (ttresText). load (，zget2. asp，username : $ (*usernanie). val (),content : $(#content)val() , functio