客户端与服务器端通信.docx
- 文档编号:6605012
- 上传时间:2023-05-10
- 格式:DOCX
- 页数:11
- 大小:130.26KB
客户端与服务器端通信.docx
《客户端与服务器端通信.docx》由会员分享,可在线阅读,更多相关《客户端与服务器端通信.docx(11页珍藏版)》请在冰点文库上搜索。
客户端与服务器端通信
客户端与服务器端通信
cookie
Cookie是网景公司开发的,便于服务器端程序通过它可以存储和检索客户端机器上的信息,一个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。
functionwriteCookie(name,value,day)
{
expire="";
expire=newDate((newDate()).getTime()+(day*24*60*60*1000));
expire=";expires="+expire.toGMTString();
document.cookie=name+“=”+escape(value)+expire;
//escape()将字符串按照URL编码方式进行编码
}
functionreadCookie(name)
{
if(document.cookie.length>0)
{
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;
returnunescape(document.cookie.substring(begin,end))
}
returnnull;
}
returnnull;
}
functiondelcookie(name)
{
varexp=newDate();
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对象实例:
varXMLHttpRquest=newActiveXObject(“MSXML2.XMLHTTP”)
varXMLHttpRquest=newActiveXObject(“MSXML.XMLHTTP”)
使用哪种方法创建,取决于客户端所安装的MSXML版本,参数可以是
“MSXML2.XMLHTTP.5.0、MSXML2.XMLHTTP.4.0、MSXML2.XMLHTTP.3.0、MSXML2.XMLHTTP和Microsoft.XMLHttp
为方便开发者找到客户端的最新MSXML版本,可以利用函数创建XMLHttp对象实例functioncreateXMLHTTP()
{vararrVersions=[“MSXML2.XMLHTTP.5.0”,“MSXML2.XMLHTTP.4.0“,”MSXML2.XMLHTTP.3.0”,”MSXML2.XMLHTTP”,”Microsoft.XMLHttp”];
for(vari=0;i { try { varrequest=newActiveObject(arrVersions[i]); return; } catch(exception) {} } alert(“系统没有安装MSXML! ”); } XMLHttp对象的8个属性和6个方法。 XMLHttp对象的两种执行模式: 同步模式和异步模式。 使用XMLHttp对象实现客户端与服务器端通信,通常分两大部分: 发送请求和处理响应。 使用XMLHttp对象实现通信的过程一般分五步: 创建XMLHttp对象,一般可以用创建函数来完成。 建立客户端与服务器端的连接,同时定义指令发送方式,设置服务网页(URL)和请求权限。 向服务器发送请求,使用send()方法发送指令 等待并接收服务器端响应,并处理返回结果。 释放XMLHttp对象。 使用GET()方法同步取得本地文件d12.txt,并提示相应信息。 varXMLHttpRequest=createXMLHTTP(); XMLHttpRequest.open("get","d12.txt",false); XMLHttpRequest.send(null); if(XMLHttpRequest.status==200) alert("服务器返回的数据为: "+XMLHttpRequest.responseText); else alert("错误代码: "+XMLHttpRequest.status+"错误描述: "+XMLHttpRequest.statusText);使用GET()方法异步取得本地文件d12.txt,则要用onreadystatechange来附加判断readyState属性是否达到4(完成状态)。 varXMLHttpRequest=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); else alert("错误代码: "+XMLHttpRequest.status+"错误描述: "+XMLHttpRequest.statusText);GET请求使用最普遍,浏览器将创建一个请求,该请注包含页面URL、一个问号及参数。 浏览器会将该该请求返回给URL中指定的脚本。 GET请求URL参数对表示形式: open方法参数URL后面,用? 开头,以name/value参数对的方式出现,当有多个参数对时,参数对之间用&隔开 XMLHttpRequest.open(“get”, GET请求中URL最大字符为2MB,参数对要使用encodeURIComponent()函数来进行编码。 在写URL时,有时不能一次性确定所有参数对,则需要对已有的URL添加新参数对。 参数对添加函数 functionaddURLParamGet(sURL,sName,sValue) //sURL: 原有的URLsName: 新参数名sValue: 新参数的值 { sURL+=(sURL.indexOf(“? ”)==-1? “? ”: ”&”); sURL+=encodeURIComponent(sName)+”=“enencodeURIComponent(sValue); returnsURL; } varXMLHttpRequest=createXMLHTTP(); varsURL=“ sURL=addURLParamGet(sURL,”name”,”yourname”); sURL=addURLParamGet(sURL,”sex”,”male”); XMLHttpRequest.open(“get”,sURL,false); XMLHttpRequest.send(null); if(XMLHttpRequest.status==200) alert(“服务器返回的数据为: ”: XMLHttpRequest.responseText); else alert(“出错! ”+XMLHttpRequest.statusText); post请求的参数URL中不直接包含参数对。 参数对作为send()方法参数发送出去参数对添加函数 functionaddURLParamPost(sParams,sName,sValue) //sParams: 原有参数字符sName: 新参数名sValue: 新参数的值 { if(sParams.length>0) {sParams+=“&”;} returnsParams+encodeURIComponent(sName)+”=“enencodeURIComponent(sValue);} post请求的HTTP头部比GET请求的HTTP头部复杂 XMLHttpRequest.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);varXMLHttpRequest=createXMLHTTP(); varsParams=“”; 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应用模型采用同步交互模式,如图所示: AjaxWEB应用模式,如图所示: Ajax采用异步交互模式,可以仅向服务器发送并取回必需的数据,并在客户端采用JavaScript处理来自服务器的响应。 使用AjaxWeb应用模式的优势: 无刷新更新页面,减少用户等待时间 减轻服务器的负担 带来更好的用户体验 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主页、GoogleMaps等 Ajax的特点在于异步通信、按需读取数据、动态地更新Web页面,适用于频繁交互、频繁读取数据、需要动态更新的Web应用。 主要应用场景有: 数据验证 按需读取数据 自动实时更新页面 使用GET()方法异步取得本地文件d12.txt,则要用onreadystatechange来附加判断readyState属性是否达到4(完成状态)。 varXMLHttpRequest=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); else alert("错误代码: "+XMLHttpRequest.status+"错误描述: "+XMLHttpRequest.statusText); 高级形式 $("#resText").load("get2.asp", {username: $("#username").val(), content: $("#content").val()},function(data,textStatus,xmlhttprequest){ }); 中级形式 $.post("backend.asp",{ username: $("#username").val(),content: $("#content").val()},function(data,textStatus){ show(data);//把返回的数据添加到页面上}); 低级形式 $.ajax({ type: "GET", url: "test.js", data: {}, dataType: "script", success: function(data){} });
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 客户端 服务器端 通信