二十五讲AJAX技术入门ppt课件

1、1/36第二十五讲第二十五讲 AJAX技术技术佘向飞佘向飞 、柯洪昌、柯洪昌长春工程学院软件学院长春工程学院软件学院AJAXAsynchronous JavaScript and XML其实是多种技术的综合，包括Javascript、XHTML 和CSS、DOM文档对象模型、XML 和XSTL、XML Request。其中：运用XHTML 和CSS 规范化呈现，运用DOM 实现动态显示和交互，运用XML 和XSTL 进展数据交换与处置，运用XML Request 对象进展异步数据读取，运用Javascript 绑定和处置一切数据。在AJAX 提出之前，业界对于上述技术都只是单独的运用，没有综合

2、运用，也是由于之前的技术需求所决议的。随着运用的广泛，AJAX 也成为香饽饽了。AJAX 定义定义 Ajax的任务原理相当于在用户和效力器之间加了一个中间层，称为Ajax引擎，该引擎运用户操作与效力器呼应异步化。在这种方式下，用户恳求不是全部都提交给效力器。部分恳求，如一些数据验证和简单的数据处置恳求等就交给Ajax引擎完成，只需那些确实需求由效力器来完成的恳求，才由Ajax引擎代为向效力器提交。 以下是SayHello.jsp页面代码： 姓名： 0 out.printHello “ +request.getParametername; %实例：传统的恳求呼应方式实例：传统的恳求呼应方式现状与

3、需求处置的问题现状与需求处置的问题传统的传统的Web 运用采用同步交互过程，这种情运用采用同步交互过程，这种情况下，用户首先向况下，用户首先向 效力器触发一个行为或恳效力器触发一个行为或恳求的呼求。反过来，效力器执行某些义务，求的呼求。反过来，效力器执行某些义务，再向发出恳求的用户前往一个页面。这是一再向发出恳求的用户前往一个页面。这是一种不衔接的用户体验，效力器在处置恳求的种不衔接的用户体验，效力器在处置恳求的时候，用户多数时间处于等待的形状，屏幕时候，用户多数时间处于等待的形状，屏幕内容也是一片空白。内容也是一片空白。为什么运用为什么运用AJAX与传统的Web 运用不同，AJAX 采用异步

4、交互过程。AJAX 在用户与效力器之间引入一个中间媒介，从而消除了网络交互过程中的处置等待处置等待缺陷。用户的阅读器在执行义务时即装载了AJAX 引擎。AJAX 引擎用JavaScript 言语编写，通常藏在一个隐藏的框架中。它担任编译用户界面及与效力器之间的交互。为什么运用为什么运用AJAXAJAX 引擎允许用户与运用软件之间的交互过程异步进展，独立于用户与网络效力器间的交流。如今，可以用Javascript 调用AJAX引擎来替代产生一个 的用户动作，内存中的数据编辑、页面导航、数据校验这些不需求重新载入整个页面的需求可以交给AJAX 来执行。 1.减轻效力器的负担。AJAX 的原那么是“

5、按需取数据，可以最大程度的减少冗余恳求和呼应对效力器构成的负担。2.无刷新更新页面，减少用户心思和实践的等待时间带来更好的用户体验。3.可以把以前一些效力器负担的任务转加到客户端，利用客户端闲置的才干来处置，减轻效力器和带宽的负担，节约空间和宽带租用本钱。4.可以调用外部数据。5.基于规范化的并被广泛支持的技术，不需求下载插件或者小程序。6.进一步促进页面呈现和数据的分别。运用运用AJAX益处益处 /创建XML Request对象 function createXML Request if window.XML Request /Mozilla 阅读器 XML Req = new XML Re

6、quest; else / IE阅读器if window.ActiveXObject try XML Req = new ActiveXObjectMsxml2.XML ; catch e try XML Req = new ActiveXObjectMicrosoft.XML ; catch e 实例：实例：Ajax恳求方式恳求方式 /处置效力器呼应结果 function handleResponse / 判别对象形状 if XML Req.readyState = 4 / 信息曾经胜利前往，开场处置信息 if XML Req.status = 200 var out = ; var res

7、 = XML Req.responseXML; var response= res.getElementsByTagNameresponse0.firstChild.nodeValue; document.getElementByIdhello.innerHTML = response; 实例：实例：Ajax恳求方式恳求方式 /发送客户端的恳求 function sendRequesturl createXML Request; XML Req.openGET, url, true; /指定呼应函数 XML Req.onreadystatechange = handleResponse; /

8、发送恳求 XML Req.sendnull; 实例：实例：Ajax恳求方式恳求方式 /开场调用Ajax的功能 function sayHello var name = document.getElementByIdname.value; /发送恳求 sendRequestSayHello?name=+name; 实例：实例：Ajax恳求方式恳求方式这是一个servlet 页面代码： 姓名： 实例：实例：Ajax恳求方式恳求方式 servlet的doGet方法实现： response.setContentTypetext/xml; charset=UTF-8;response.setHeader

9、Cache-Control, no-cache;PrintWriter out = response.getWriter;String output = ;/处置接纳到的参数，生成呼应的XML文档ifrequest.getParametername!=null&request.getParametername.length0 output =Hello +request.getParametername+;out.printlnoutput;out.close;实例：实例：Ajax恳求方式恳求方式AJAX 运用到的技术运用到的技术1、XML Request 对象对象XML Request 是X

10、ML 组件的对象，经过这个对象，AJAX 可以像桌面运用程序一样只同效力器进展数据层面的交换，而不用每次都刷新界面，也不用每次将数据处置的任务都交给效力器来做；这样既减轻了效力器负担又加快了呼应速度、缩短了用户等待的时间。XML Request 对象的方法对象的方法方法 方法 abort 停顿当前恳求abort 停顿当前恳求getAllResponseHeaders 作为字符串返回完好的headerheadergetAllResponseHeaders作为字符串返回完好的headerheaderopenmethod,URL,asyncFlag,userName, password设置未决的恳求

11、的目的sendcontent发送恳求setRequestHeaderlabel, value设置header 并和恳求一起属性 描绘onreadystatechange状态改变的事件触发器readyState 对象状态integer:readyState 对象状态integer:0 = 未初始化1 = 读取中2 = 已读取3 = 交互中4 = 完成responseText效劳器进程返回数据的文本版本responseXML 效劳器进程返回数据的兼容效劳器进程返回数据的兼容DOM 的的XML 文档对象文档对象status效劳器返回的状态码效劳器返回的状态码, 如：如：404 = 文件末找到文件末找

12、到 、200 =胜利胜利statusText效劳器返回的状态文本信息效劳器返回的状态文本信息XML Request 对象初始化对象初始化var _request = false;/IE 阅读器 _request = new ActiveXObjectMsxml2.XML ; _request = new ActiveXObjectMicrosoft.XML ;/Mozilla 阅读器 _request = new XML Request;AJAX 开发框架开发框架这里，我们经过一步步的解析，来构成一个发送和接纳XML Request 恳求的程序框架。AJAX 本质上也是遵照Request/Se

13、rver 方式，所以这个框架根本的流程也是：对象初始化发送恳求效力器接纳效力器前往客户端接纳修正客户端页面内容。只不过这个过程是异步的。初始化对象并发出初始化对象并发出XML Request 恳求恳求为了让Javascript 可以向效力器发送 恳求，必需运用XML Request 对象。运用之前，要先将XML Request 对象实例化为了让编写的程序可以跨阅读器运转，要这样写：if window.XML Request / Mozilla, Safari, . _request = new XML Request; else if window.ActiveXObject / IE _re

14、quest = new ActiveXObjectMicrosoft.XML ; 指定呼应处置函数指定呼应处置函数接下来要指定当效力器前往信息时客户端的处置方式。只需将相应的处置函数称号赋给XML Request 对象的onreadystatechange 属性就可以了 _request.onreadystatechange = handleResponse;需求指出的是，这个函数称号不加括号，不指定参数。也可以用 Javascript 即时定义函数的方式定义呼应函数。比如： _request.onreadystatechange = function ; 发出发出 恳求恳求指定呼应处置函数之

15、后， 就可以向效力器发出 恳求了。这一步伐用XML Request 对象的open 和send 方法。 _request.openGET, /some.file, true; _request.sendnull;1.open 的第一个参数是 恳求的方法，为Get、Post 或者Head。2.open 的第二个参数是目的URL。基于平安思索，这个URL 只能是同网域的，否那么会提示“没有权限的错误。这个URL 可以是任何的URL，包括需求效力器解释执行的页面，不只仅是静态页面。目的URL 处置恳求XML Request 恳求那么跟处置普通的 恳求一样，比如JSP 可以用re

16、quest.getParameter“或者request.getAttribute“来获得URL 参数值。3.open 的第三个参数只是指定在等待效力器前往信息的时间内能否继续执行下面的代码。假设为false，那么不会继续执行，直到效力器前往信息。默以为True。按照顺序，open 调用终了之后要调用send 方法。send 的参数假设是以Post 方式发出的话，可以是任何想传给效力器的内容。不过，跟form 一样，假设要传文件或者Post 内容给效力器，必需先调用setRequestHeader 方法，修正MIME 类别。如下： _request.setRequestHeader“Conte

17、nt-Type,application/x-www-form-urlencoded;多用途互联网络电子邮件格式的扩展。 用MIME关键字来区分文件编码格式文件种类包括多媒体。 这时资料那么以查询字符串的方式列出，作为send 的参数，例如：name=value&anothername=othervalue&so=on处置效力器前往的信息处置效力器前往的信息在第二步我们曾经指定了呼应处置函数，这一步，来看看这个呼应处置函数都应该做什么。首先，它要检查XML Request 对象的readyState 值，判别目前恳求的形状。参照前文的属性表可以知道，readyState 值为4 的时候，代表效力

18、器曾经传回一切的信息，可以开场处置信息并更新页面内容了。如下：if _request.readyState = 4 / 信息曾经前往，可以开场处置 else / 信息还没有前往，等待效力器前往信息后，还需求判别前往的 形状码，确定前往的页面没有错误一切的形状码都可以在W3C的官方网站上查到。其中，200 代表页面正常。if _request.status = 200 / 页面正常，可以开场处置信息 else / 页面有问题XML Request 对胜利前往的信息有两种处置方式：responseText：将传回的信息当字符串运用；responseXML：将传回的信息当XML 文档运用，可以用DO

19、M 处置。 /创建XML Reques对象代码是固定的 function createXML Request if window.XML Request /Mozilla 阅读器 XML Req = new XML Request; else / IE阅读器if window.ActiveXObject try XML Req = new ActiveXObjectMsxml2.XML ; catch e try XML Req = new ActiveXObjectMicrosoft.XML ; catch e 一个一个ajax恳求的根本框架恳求的根本框架 /处置效力器呼应结果 functi

20、on handleResponse / 判别对象形状 if XML Req.readyState = 4 / 信息曾经胜利前往，开场处置信息 if XML Req.status = 200 /if中内容是自定义的 var out = ; var res = XML Req.responseXML; var response= res.getElementsByTagNameresponse0.firstChild.nodeValue; document.getElementById“result.innerHTML = response; /发送客户端的恳求代码是固定的 function se

21、ndRequesturl createXML Request; XML Req.openGET, url, true; /指定呼应函数 XML Req.onreadystatechange = handleResponse; / 发送恳求 XML Req.sendnull; /开场调用Ajax的功能完全是用户自定义 function userCheck var name = document.getElementById“uname.value; /发送恳求 sendRequest“UsernameCheck?name=+name; 这是一个servlet在用户注册的表单中，经常碰到要检验待注册的用户名能否独一。传统的做法是采用window.open 的弹出窗口，或者 window. showModalDialog 的对话框。不过，这两个都需求翻开窗口。采用 AJAX 后，采用异步方式直接将参数提交到效力器，用 window.alert或直接在页面将效力器前往的校验信息显示出来。代码如下： 案例：数据校验案例：数据校验 用户名：