客户端

ren-页1客户端技术HTMLCSSJavaScriptren-页2AjaxAJAX指异步JavaScript及XML（AsynchronousJavaScriptAndXML）。AJAX是一种在2005年由Google推广开来的编程模式。AJAX不是一种新的编程语言，而是一种使用现有标准的新方法。通过AJAX，你可以创建更好、更快以及更友好的WEB应用程序。AJAX基于JavaScript和HTTP请求（HTTPrequests）。Ajax应用程序是异步地工作的，这意味着可以在用户和服务器之间传送数据而无需加载整个页面，只需替换改变的那部分内容，也称局部刷新。如：google搜索的即时提示：googlesuggest如：google地图在移动地图时，只作局部刷新，这也是，最早应用ajax的应用之一。还有如，视频播放的一些网站，如土豆网，新浪视频等。能够实现异步传输的是javascript中的XMLHttpRequest对象AJAX基于下列Web标准：JavaScriptXMLHTMLCSSren-页3XMLHttpRequestXMLHttpRequest对象最初是在IE5中以ActiveX组件形式实现的。由于只能在IE中使用，大多数开发人员都没有使用它。直到Mozilla1.0和Safari1.2把它作为事实的标准。使用人员才开始增加。XMLHttpRequest并不是一个W3C标准。不过目前已成为事实上的标准。目前，大部分浏览器都以类似的方式实现了XMLHttpRequest对象的行为。如：Firefox,Safari,Opera,IE等。但因为它不是标准，所有，在不同的浏览器上的表现也稍有不同。XMLHttpRequest对象提供了在网页加载后与服务器进行通信的方法(W3C解释)XMLHttpRequest对象是开发者的梦想，因为你使用它可以做到如下几点：1)在不重新加载页面的情况下更新网页2)在页面已加载后从服务器请求数据3)在页面已加载后从服务器接收数据4)在后台向服务器发送数据5)所有现代的浏览器都支持XMLHttpRequest对象。初始化创建方式：根据浏览器不同而不同Mozilla浏览器：newXMLHttpRequesst();IE5.5+：newActiveXObject(Msxml2.XMLHTTP);IE6：newActiveXObject(Microsoft.XMLHTTP);以下是W3C建议使用方法：IE浏览器Google浏览器Opera浏览器ren-页4方法和属性方法说明：voidopen(stringmethod,stringurl,Booleanasynch,stringusername,stringpassword)建立对服务器的调用。前面两个是必选参数，后面三个是可选参数。其中：method表示请求方法，可以是get或post，一般使用get。url表示请求的地址。asnych表示请求是同步调用还是异步调用。默认为true，即异步调用。如果为false，处理就会等待，指定服务器返回相应为止。voidsend(content)向服务器发送请求。如果请求时异步的，这个方法或立即返回，否则或等待直到接收到相为止。参数可以是对象的实例，输入流，或者串。参数或作为请求体的一部分发送。voidsetRequestHead(stringheader,stringvalue)HTTP请求的头部。必须在open()之后才能调用。stirnggetAllResponseHeaders()获取HTTP请求的所有头信息。stringgetResponseHeader(stringheader)指定头部，获取头信息。属性如下：ren-页5常见status如下：Ajax交互原理如图：1.客户端触发事件。如onchange,onclick等2.创建XMLHttpRequest对象的一个实例，使用open()方法建立调用，然后通过send()方法调用触发。可能代码如下：3.向服务器做出请求。可能调用servlet,CGI脚本，或任何服务器端技术。4.服务器端调用业务代码，访问数据库，调用webservice等。5.请求返回浏览器。Content-type设置为text/htmlXMLHttpRequest对象只能处理text/html类型的结果。还要设置浏览器不做缓存。如：6.配置回调函数。在这个函数中，会检查XMLHttpRequest对象的readyState属性，然后查看服务器返回的状态码。如果一切正常。Callback()会在客户端执行任务。典型callback()方法如下：100Continue101--Switchingprotocols200OK201Created202--Accepted203--Non-AuthoritativeInformation204NoContent205--ResetContent206--PartialContent300MultipleChoices301--MovedPermanently302--Found303--SeeOther304--NotModified305--UseProxy307--TemporaryRedirect400--BadRequest401--Unauthorized402--PaymentRequired403--Forbidden404NotFound405--MethodNotAllowed406--NotAcceptable407--ProxyAuthenticationRequired408--RequestTimeout409--Conflict410--Gone411--LengthRequired412--PreconditionFailed413--RequestEntityTooLarge414--Request-URITooLong415--UnsupportedMediaType416--RequestedRangeNotSuitable417--ExpectationFailed500InternalServerError501--NotImplemented502--BadGateway503--ServiceUnavailable504--GatewayTimeout505--HTTPVersionNotSupportedren-页6由此可见，事件的处理步骤为：1．创建xmlHttpRequest对象2．根据状态改变的事件进行回调（即：xmlHttp.onreadystatechange=callback;）3．调用对象的open()方法。4．发送请求。测试：1．表单：2．Javascript代码：注意，此处使用的xmlHttp.responseText，这种情况适用于返回内容比较少的情况下，如果返回内容比较多，可以使用XML或更好是使用JSON。其中使用的是get方法提交，如果使用post方法提交，如下代码XMLHttpReq.open(POST,/formservlet,false);content='Id='+Id+'&Name='+Name+'&No='+No;//要发送的内容XMLHttpReq.setRequestHeader(Content-Type,application/x-);//需要设置头信息XMLHttpReq.setRequestHeader(Content-Length,content.length);XMLHttpReq.onreadystatechange=function(){//回调if(XMLHttpReq.readyState==4){if(XMLHttpReq.status==200){alert(XMLHttpReq.responseText);}}}XMLHttpReq.send(content);ren-页73．服务器（此处使用servlet）代码：（需要设置不缓存）如果返回的内容比较多，则使用XML形式返回。然后对XML文件作解析。如：ren-页8JSONJSON即JavaScriptObjectNotation，它是一种轻量级的数据交换格式，非常适合于服务器与JavaScript的交互。本文将快速讲解JSON格式，并通过代码示例演示如何分别在客户端和服务器端进行JSON格式数据的处理。尽管有许多宣传关于XML如何拥有跨平台，跨语言的优势，然而，除非应用于WebServices，否则，在普通的Web应用中，开发者经常为XML的解析伤透了脑筋，无论是服务器端生成或处理XML，还是客户端用JavaScript解析XML，都常常导致复杂的代码，极低的开发效率。实际上，对于大多数Web应用来说，他们根本不需要复杂的XML来传输数据，XML的扩展性很少具有优势，许多AJAX应用甚至直接返回HTML片段来构建动态Web页面。和返回XML并解析它相比，返回HTML片段大大降低了系统的复杂性，但同时缺少了一定的灵活性。现在，JSON为Web应用开发者提供了另一种数据交换格式。让我们来看看JSON到底是什么，同XML或HTML片段相比，JSON提供了更好的简单性和灵活性。JSON数据格式1.String数据格式2.Number数据格式如：JSON注意用于使用键值对对对象进行定义：再比如复杂一点的JSON的定义：Json规则很简单：“键”:”值”，中间以”,”分割。其中，值又可以使用键值对表示，用[…]包含即可。键，我们也称为对象的属性也可以对对象的属性赋值ren-页9Xml格式是数据和json格式的数据对比如下：左边是xml格式，右边是对应的json格式：如你所看到的，JSON有结构化的嵌套数据元素，这一点和XML相似。JSON也是基于文本的，XML也是如此。两者都使用Unicode。JSON和XML都很容易阅读。主观上，JSON更清晰，冗余更少。JSONWEB站点严格地描述了JSON语法，目前就是这样的。它确实是一个简单的小语言！XML确实适合标记文档，但是JSON是数据交互的理想格式。每个JSON文档描述了一个这样一个对象，该对象包含有：嵌套对象、数组、字符串、数字、布尔值或空值。在这些地址卡例子代码中，JSON版本是更轻量级的，只占用了682字节的空间，而XML版本需要744字节空间。尽管这不是一个可观的节省。而实际的好处则来自解析过程。ren-页10Json+ajax下面使用prototype写一个JSON的ajax例子。先写一个servlet(我的是servlet.ajax.JSONTest1.java)就写一句话java代码1.response.getWriter().print({\name\:\Violet\,\occupation\:\character\});再在页面中写一个ajax的请求js代码1.functionsendRequest(){2.varurl=/MyWebApp/JSONTest1;3.varmailAjax=newAjax.Request(4.url,5.{6.method:'get',7.onComplete:jsonResponse8.}9.);10.}11.12.functionjsonResponse(originalRequest){13.alert(originalRequest.responseText);14.varmyobj=originalRequest.responseText.parseJSON();15.alert(myobj.name);16.}prototype-1.5.1.js中提供了JSON的方法，String.evalJSON(),可以不使用json.js,修改上面的方法js代码1.functionjsonResponse(origi