二十五讲ajax技术入门

《二十五讲ajax技术入门》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第二十五讲AJAX技术佘向飞、柯洪昌长春工程学院软件学院AJAX（AsynchronousJavaScriptandXML）其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM(文档对象模型)、XML和XSTL、XMLHttpRequest。其中：使用XHTML和CSS标准化呈现，使用DOM实现动态显示和交互，使用XML和XSTL进行数据交换与处理，使用XMLHttpRequest对象进行异步数据读取，使用Javascript绑定和处理所有数据。在AJAX提出之前，业界对于上述技术

2、都只是单独的使用，没有综合使用，也是由于之前的技术需求所决定的。随着应用的广泛，AJAX也成为香饽饽了。AJAX定义2/363/36Ajax的工作原理相当于在用户和服务器之间加了一个中间层，称为Ajax引擎，该引擎使用户操作与服务器响应异步化。在这种模式下，用户请求不是全部都提交给服务器。部分请求，如一些数据验证和简单的数据处理请求等就交给Ajax引擎完成，只有那些确实需要由服务器来完成的请求，才由Ajax引擎代为向服务器提交。4/36以下是SayHello.jsp页面代码：

3、ayHello.jsp">姓名：<%if(request.getParameter("name")!=null&&request.getParameter("name").length()>0)out.print("Hello“+request.getParameter("name"));%>实例：传统的请求响应方式5/36现状与需要解决的问题传统的Web应用采用同步交

4、互过程，这种情况下，用户首先向HTTP服务器触发一个行为或请求的呼求。反过来，服务器执行某些任务，再向发出请求的用户返回一个页面。这是一种不连贯的用户体验，服务器在处理请求的时候，用户多数时间处于等待的状态，屏幕内容也是一片空白。6/36为什么使用AJAX与传统的Web应用不同，AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐

5、藏的框架中。它负责编译用户界面及与服务器之间的交互。7/36为什么使用AJAXAJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。8/361.减轻服务器的负担。AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担。2.无刷新更新页面，减少用户心理和实际的等待时间带来更好

6、的用户体验。3.可以把以前一些服务器负担的工作转加到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。4.可以调用外部数据。5.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。6.进一步促进页面呈现和数据的分离。使用AJAX好处9/36//创建XMLHttpRequest对象functioncreateXMLHttpRequest(){if(window.XMLHttpRequest){//Mozilla浏览器XMLHttpReq=newXMLHttpRequ

7、est();}else{//IE浏览器if(window.ActiveXObject){try{XMLHttpReq=newActiveXObject("Msxml2.XMLHTTP");}catch(e){try{XMLHttpReq=newActiveXObject("Microsoft.XMLHTTP");}catch(e){}}}}}实例：Ajax请求方式10/36//处理服务器响应结果functionhandleResponse(){//判断对象状态if(XMLHttpReq.readySta

8、te==4){//信息已经成功返回，开始处理信息if(XMLHttpReq.status==200){varout="";varres=XMLHttpReq.responseXML;varresponse=res.getElementsByTagName("response")[0].firstChild.nodeValue;document.getElementById("hello").innerHTML=response;}}}实例：