二十五讲ajax技术入门.pptx
文本预览下载声明
第二十五讲 AJAX技术佘向飞 、柯洪昌长春工程学院软件学院AJAX 定义AJAX(Asynchronous JavaScript and XML)其实是多种技术的综合,包括Javascript、XHTML 和CSS、DOM(文档对象模型)、XML 和XSTL、XMLHttpRequest。其中:使用XHTML 和CSS 标准化呈现,使用DOM 实现动态显示和交互,使用XML 和XSTL 进行数据交换与处理,使用XMLHttpRequest 对象进行异步数据读取,使用Javascript 绑定和处理所有数据。在AJAX 提出之前,业界对于上述技术都只是单独的使用,没有综合使用,也是由于之前的技术需求所决定的。随着应用的广泛,AJAX 也成为香饽饽了。/36/36 Ajax的工作原理相当于在用户和服务器之间加了一个中间层,称为Ajax引擎,该引擎使用户操作与服务器响应异步化。在这种模式下,用户请求不是全部都提交给服务器。部分请求,如一些数据验证和简单的数据处理请求等就交给Ajax引擎完成,只有那些确实需要由服务器来完成的请求,才由Ajax引擎代为向服务器提交。 /36实例:传统的请求响应方式 以下是SayHello.jsp页面代码: form action=SayHello.jsp 姓名:input type=text name=name/ input type=submit value=提交/ /form %if(request.getParameter(name)!=null request.getParameter(name).length()0) out.print(Hello “ +request.getParameter(name)); %/36现状与需要解决的问题传统的Web 应用采用同步交互过程,这种情况下,用户首先向HTTP 服务器触发一个行为或请求的呼求。反过来,服务器执行某些任务,再向发出请求的用户返回一个页面。这是一种不连贯的用户体验,服务器在处理请求的时候,用户多数时间处于等待的状态,屏幕内容也是一片空白。/36为什么使用AJAX与传统的Web 应用不同,AJAX 采用异步交互过程。AJAX 在用户与服务器之间引入一个中间媒介,从而消除了网络交互过程中的处理—等待—处理—等待缺点。用户的浏览器在执行任务时即装载了AJAX 引擎。AJAX 引擎用JavaScript 语言编写,通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。/36为什么使用AJAXAJAX 引擎允许用户与应用软件之间的交互过程异步进行,独立于用户与网络服务器间的交流。现在,可以用Javascript 调用AJAX引擎来代替产生一个HTTP 的用户动作,内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX 来执行。/36使用AJAX好处 1.减轻服务器的负担。AJAX 的原则是“按需取数据”,可以最大程度的减少冗余请求和响应对服务器造成的负担。2.无刷新更新页面,减少用户心理和实际的等待时间带来更好的用户体验。3.可以把以前一些服务器负担的工作转加到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。4.可以调用外部数据。5.基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。6.进一步促进页面呈现和数据的分离。/36实例:Ajax请求方式 //创建XMLHttpRequest对象 function createXMLHttpRequest() { if (window.XMLHttpRequest) { //Mozilla 浏览器 XMLHttpReq = new XMLHttpRequest(); } else{ // IE浏览器if (window.ActiveXObject) { try { XMLHttpReq = new ActiveXObject(Msxml2.XMLHTTP); }catch (e) { try { XMLHttpReq = new ActiveXObject(Microsoft.XMLHTTP); }catch (e) { } }} } } /36实例:Ajax请求方式 //处理服务器响应结果 function handleResponse() { // 判断对象状态 if (XMLHttpReq.readyState == 4) { // 信息已经成功返回,开始处理信息 if (XMLHttpReq.status == 200) { var out = ; var res = XMLHttpReq.responseXML; var response= res.getElementsByTagNam
显示全部