客户端与服务器端通信

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

2、P请求 URL的一部分发 送给 web 服务器。如果用户是第一次访问网站， CGI 程序（或其他的服务器端程 序）将通过 HTTP 响应创建并向浏览器发送 Cookie，当服务器端程序向浏览器发 送 Cookie以响应 URL 请求并时，客户端机器上的 Cookie将被更新，这样，当服 务器端程序被调用的时候就实现了客户端机器状态信息的更新。使用 Cookie，网站可以识别该客户端是第一次访问，还是多次访问，还可以得到 客户端的访问信息。Cookie 还可以为浏览器提供方便的服务，例如在安全性要求不高的场合避免重复 输入账号和密码，针对性地投放广告等。但是由于 Cookie 可以记录客户端信息

3、，一些恶意代码可以收集客户端信息，例如 芯片类型等，还可以随意修改客户段的系统设置，发送广告或者垃圾邮件等。 javascript 主要在两个方面使用 Cookie 第一个是记录访客的信息，例如上次登陆的用户名和密码，光临网站的次数等。 第二个是在页面间传递变量。如果需要在页面间传递信息，方法之一就是将变量 用 Cookie 的形式保存下来，需要获取变量的页面通过读取 Cookie 来获得变量的 值。（1）name ：Cookie 的唯一标志。（2）value：保存在 Cookie 中的值，在存入之前要进行编码。（3）empires：是时间类型的，单位是毫秒。记录 Cookie 在客户端保留的

4、时间。 当系统时间大于 Empires属性时， Cookie 将被删除。（4）path：用来确定 Cookie 对象传送的位置。（5）domain：指定关联的 web 服务器或域，值是域名。（6）secure：Cookie 的安全性标志，取值范围为 true/false。如果这个属性被设置 为 true，Cookie 会在一个安全的方式 “SSL连接”下发送到客户端。通过 JavaScript可以设置 Cookie、读取 Cookie 及删除 Cookie，但由于接口函数比 较少，在 JavaScript中操作 Cookie 比较麻烦。利用 document.Cookie属性可以获得计算机中存

5、储的 Cookie 的名字和值。 document.Cookie属性的显示方法是：Cookie名字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

6、 = name +“ =” + escape(value) + expire;/escape()将字符串按照 URL 编码方式进行编码function readCookie(name)if(begin!=-1)begin=begin+name.length+1;if(end=-1)return null;return null;function delcookie(name)var exp=new Date();exp.setTime(exp.getTime()-1); if(readcookie(name)!=null)document.cookie=name+"="+&

7、quot;expires="+exp.toGMTString(); xmlhttp 多数浏览支持在 JavaScript中直接建立 HTTP 请求,实现向服务器发送数据及接收 从服务器返回的数据等操作 ,达到客户端和服务器商通信的目的 ,实现这些功能的 核心技术就是微软所建立的 XMLHttp 对象。在 JavaScript 脚本中 , 通过 XMLHttp 对象可以方便的建立客户与服务器端的通信 , 完成所需要的数据交互 ,最主要的交互方式为 GET 和 post方法。XMLHttp 对象实质是一组 API 函数集，可以被脚本语言或编程语言调用，通过 HTTP 请求在浏览器和服务器

8、之间收发 XML 或其他数据。要使用 XMLHttp 对象，首先要创建 XMLHttp 对象的实例。不同浏览器创建和使 用的方法稍有不同。在 IE 中，微软通过 ActiveX 控件方式获得 XMLHttp 对象实例： var XMLHttpRquest=new ActiveXObject(“ MSXML2.XMLHTT”P)var XMLHttpRquest=new ActiveXObject(“ MSXML.XMLHTT”P)使用哪种方法创建，取决于客户端所安装的 MSXML 版本，参数可以是 “ 、 、 、MSXML2.XMLHTTP 和 Microsoft.XMLHttp 为方便开发者

9、找到客户端的最新 MSXML 版本，可以利用函数创建 XMLHttp 对 象实例 function createXMLHTTP( ) var arrVersions=“ ”, “ , ” ” , ” MSXML2.XMLHTT”P, ” Microsoft.XMLHttp ” ; for (var i=0;i<arrVersions.length;i+)tryvar request=new ActiveObject(arrVersionsi); return; catch(exception) alert( 系“统没有安装 MSXML”! );XMLHttp 对象的 8 个属性和 6 个

10、方法。XMLHttp 对象的两种执行模式：同步模式和异步模式。使用 XMLHttp 对象实现客户端与服务器端通信，通常分两大部分：发送请求和 处理响应。 使用 XMLHttp 对象实现通信的过程一般分五步： 创建 XMLHttp 对象，一般可以用创建函数来完成。建立客户端与服务器端的连接，同时定义指令发送方式，设置服务网页( URL ) 和请求权限。向服务器发送请求，使用 send()方法发送指令 等待并接收服务器端响应，并处理返回结果。释放 XMLHttp 对象。使用 GET()方法同步取得本地文件 d12.txt，并提示相应信息。var XMLHttpRequest=createXMLHT

11、TP(); XMLHttpRequest.open("get","d12.txt",false);XMLHttpRequest.send(null); if(XMLHttpRequest.status=200) alert("服务器返回的数据为 :"+XMLHttpRequest.responseText);else alert("错误代码 :"+XMLHttpRequest.status+" 错误描 述:"+XMLHttpRequest.statusText); 使用 GET()方法异步取得本

12、地文件 d12.txt，则 要用 onreadystatechange来附加判断 readyState属性是否达到 4(完成状态 )。var XMLHttpRequest=createXMLHTTP(); XMLHttpRequest.open("get","d12.txt",true);XMLHttpRequest.onreadstatechange=function() if (XMLHttpRequest.readyState=4) alert (" 服务器返回的数据为 :"+XMLHttpRequest.responseTex

13、t); XMLHttpRequest.send(null);if(XMLHttpRequest.status=200) alert("服务器返回的数据为 :"+XMLHttpRequest.responseText);else alert("错误代码 :"+XMLHttpRequest.status+" 错误描 述:"+XMLHttpRequest.statusText); GET 请求使用最普遍，浏览器将创建一个请 求，该请注包含页面 URL、一个问号及参数。浏览器会将该该请求返回给 URL 中指定的脚本。GET 请求 URL 参数

14、对表示形式：open 方法参数 URL 后面，用？开头，以 name/value参数对的方式出现，当有多 个参数对时，参数对之间用 & 隔开XMLHttpRequest.open( “get ” ,mle1=value&na me2=value,false);GET 请求中 URL 最大字符为 2MB ，参数对要使用 encodeURIComponent()函数来 进行编码。 在写 URL 时，有时不能一次性确定所有参数对，则需要对已有的 URL 添加新参数对。 参数对添加函数 function addURLParamGet(sURL,sName,sValue)/sURL: 原

15、有的 URL sName:新参数名 sValue:新参数的值 sURL+=(sURL.indexOf( “?”-)1= =? “?”:;” &”) sURL+=encodeURIComponent(sName)+” =“ enencodeURIComponent(sValue); return sURL;var XMLHttpRequest=createXMLHTTP();var sURL= “ ”;sURL=addURLParamGet(sURL”, name” , ” yourname” ); sURL=addURLParamGet(sURL”, sex ”, ”male”); X

16、MLHtt pRequest.open( “get ” ,sURL,false);XMLHttpRequest.send(null);if (XMLHttpRequest.status=200)alert( 服“务器返回的数据为： ” :XMLHttpRequest.responseText);elsealert( 出“错！ ” + XMLHttpRequest.statusText);post 请求的参数 URL 中不直接包含参数对。参数对作为 send( )方法参数发送出去 参数对添加函数function addURLParamPost(sParams,sName,sValue) /sPa

17、rams原: 有参数字符 sName:新参数名 sValue:新参数的值if (sParams.length>0) sParams+= “ &” ; return sParams+encodeURIComponent(sName)+ ” =“ enencodeURIComponent(sValue); post请求的 HTTP 头部比 GET 请求的 HTTP 头部复杂XMLHttpRequest.setRequestHeader( “nCt-oTnytepe” , ” applicatio-nw/xww-form- urlencoded ” ); var XMLHttpRequ

18、est=createXMLHTTP();var sParams= “”;sParams =addURLParamPost(sParams, ” name” , ” yourname” ); sParams =addURLParamGet(sParams, ” sex ”, ”male”); XMLHttpRequest.open( “ post ” , ” search.asp ” ,false);XMLHttpRe quest.setRequestHeader( “ C-oTnytpeen”t , ” applicatio-nw/xww-form- urlencoded ” ); XMLHt

19、tpRequest.send(sParams);Ajax对 web 应用来说，有很多不适合其发挥特长的应用领域，如对实时要求比较高的 电话系统、银行系统等。此外由于网速、硬件配置等原因，在一些 web 应用本应发挥特长的领域也表现得 不尽如意，如浏览网页在页面跳转时等待较长时间，局部页面数据提交造成整个 页面的刷新等。传统的 WEB 应用模型采用同步交互模式 ,如图所示：Ajax WEB 应用模式 ,如图所示：Ajax 采用异步交互模式 ,可以仅向服务器发送并取回必需的数据 ,并在客户端采用 JavaScript处理来自服务器的响应。使用 Ajax Web 应用模式的优势： 无刷新更新页面 ,

20、减少用户等待时间 减轻服务器的负担 带来更好的用户体验Ajax 可以把以前一些服务器负担的工作转给客户端 ,利用客户端的能力来处理 ,减 轻服务器和带宽的负担Ajax 可以调用外部数据 ,增加了 Ajax 的灵活性 基于标准化的并被广泛支持的技术 促进页面呈现和数据的分离Ajax 的出现揭开了无刷新更新页面的序幕 ,并有代替传统 web 开发中采用表单递 交方式来更新 web 页面的趋势。Ajax 最早认为是异步 JavaScript和 XML 的缩写 ,更深的理解是 Ajax 为一种结合了 Java、XML 与 JavaScript 等编程技术的创建交互式网页应用的 web 开发技术。 Aj

21、ax 是使用客户端脚本与 web 服务器异步交换数据的 web应用开发方法。使用 Ajax ，可以在不中断交互流程的情况下，重新加载 web 页面，从而实现动态更 新；使用 Ajax ，可以创建接近本地桌面应用的、直接的、易用的、更丰富的、更 动态的 web 用户接口界面。Ajax 不是一种新技术，而几种技术的组合，这些技术主要包含：XHTML 和 CSS：使用 XHTML 和 CSS 标准化呈现；DOM ：使用 DOM 实现动态显示和交互；XML 和XSLT ：使用 XML 和 XSLT进行数据交换和处理； XMLHttpRequest:使用 XMLHttpRequest 进行异步数据读取J

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

23、于异步通信、按需读取数据、动态地更新 Web 页面，适用于频繁 交互、频繁读取数据、需要动态更新的 Web 应用。主要应用场景有：数据验证按需读取数据自动实时更新页面使用 GET()方法异步取得本地文件 d12.txt，则要用 onreadystatechange来附加判断 readyState属性是否达到 4(完成状态 )。var XMLHttpRequest=createXMLHTTP(); XMLHttpRequest.open("get","d12.txt",true); XMLHttpRequest.onreadstatechange=function() if (XMLHttpRequest.rea