二十五讲AJAX技术入门.ppt

《二十五讲AJAX技术入门.ppt》由会员分享，可在线阅读，更多相关《二十五讲AJAX技术入门.ppt（36页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

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

3、务引擎完成，只有那些确实需要由服务器来完成的请求，才由器来完成的请求，才由Ajax引擎代为向服务引擎代为向服务器提交。器提交。4 以下是SayHello.jsp页面代码：姓名：0)out.print(Hello“+request.getParameter(name);%实例：传统的请求响应方式实例：传统的请求响应方式5现状与需要解决的问题现状与需要解决的问题传统的传统的Web 应用采用同步交互过程，这种情应用采用同步交互过程，这种情况下，用户首先向况下，用户首先向HTTP 服务器触发一个行为服务器触发一个行为或请求的呼求。反过来，服务器执行某些任务，或请求的呼求。反过来，服务器执行某些任务，再

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

5、。7为什么使用为什么使用AJAXAJAX 引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript 调用AJAX引擎来代替产生一个HTTP 的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX 来执行。8 1.减轻服务器的负担。AJAX 的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担。2.无刷新更新页面，减少用户心理和实际的等待时间带来更好的用户体验。3.可以把以前一些服务器负担的工作转加到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成

6、本。4.可以调用外部数据。5.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。6.进一步促进页面呈现和数据的分离。使用使用AJAX好处好处9 /创建XMLHttpRequest对象 function createXMLHttpRequest()if(window.XMLHttpRequest)/Mozilla 浏览器 XMLHttpReq=new XMLHttpRequest();else /IE浏览器if(window.ActiveXObject)try XMLHttpReq=new ActiveXObject(Msxml2.XMLHTTP);catch(e)try XMLHttp

7、Req=new ActiveXObject(Microsoft.XMLHTTP);catch(e)实例：实例：Ajax请求方式请求方式10 /处理服务器响应结果 function handleResponse()/判断对象状态 if(XMLHttpReq.readyState=4)/信息已经成功返回，开始处理信息 if(XMLHttpReq.status=200)var out=;var res=XMLHttpReq.responseXML;var response=res.getElementsByTagName(response)0.firstChild.nodeValue;documen

8、t.getElementById(hello).innerHTML=response;实例：实例：Ajax请求方式请求方式11 /发送客户端的请求 function sendRequest(url)createXMLHttpRequest();XMLHttpReq.open(GET,url,true);/指定响应函数 XMLHttpReq.onreadystatechange=handleResponse;/发送请求 XMLHttpReq.send(null);实例：实例：Ajax请求方式请求方式12 /开始调用Ajax的功能 function sayHello()var name=docum

9、ent.getElementById(name).value;/发送请求 sendRequest(SayHello?name=+name);实例：实例：Ajax请求方式请求方式这是一个servlet13 页面代码：姓名：实例：实例：Ajax请求方式请求方式14 servlet的doGet()方法实现：response.setContentType(text/xml;charset=UTF-8);response.setHeader(Cache-Control,no-cache);PrintWriter out=response.getWriter();String output=;/处理接收到

10、的参数，生成响应的XML文档if(request.getParameter(name)!=null&request.getParameter(name).length()0)output=Hello+request.getParameter(name)+;out.println(output);out.close();实例：实例：Ajax请求方式请求方式15AJAX 应用到的技术应用到的技术1、XMLHttpRequest 对象对象XMLHttpRequest 是XMLHTTP 组件的对象，通过这个对象，AJAX 可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用

11、每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。16XMLHttpRequest 对象的方法对象的方法方法 方法 abort()停止当前请求abort()停止当前请求getAllResponseHeaders()作为字符串返回完整的headerheadergetAllResponseHeaders()作为字符串返回完整的headerheaderopen(method,URL,asyncFlag,userName,password)设置未决的请求的目标send(content)发送请求setRequestHeader(label,value)设

12、置header 并和请求一起17属性 描述onreadystatechange状态改变的事件触发器readyState 对象状态(integer):readyState 对象状态(integer):0=未初始化1=读取中2=已读取3=交互中4=完成responseText服务器进程返回数据的文本版本responseXML 服务器进程返回数据的兼容服务器进程返回数据的兼容DOM 的的XML 文档对象文档对象status服务器返回的状态码服务器返回的状态码,如：如：404=文件末找到文件末找到、200=成功成功statusText服务器返回的状态文本信息服务器返回的状态文本信息18XMLHttpR

13、equest 对象初始化对象初始化var http_request=false;/IE 浏览器http_request=new ActiveXObject(Msxml2.XMLHTTP);http_request=new ActiveXObject(Microsoft.XMLHTTP);/Mozilla 浏览器http_request=new XMLHttpRequest();19AJAX 开发框架开发框架这里，我们通过一步步的解析，来形成一个发送和接收XMLHttpRequest 请求的程序框架。AJAX 实质上也是遵循Request/Server 模式，所以这个框架基本的流程也是：对象初始

14、化 发送请求 服务器接收 服务器返回 客户端接收 修改客户端页面内容。只不过这个过程是异步的。20初始化对象并发出初始化对象并发出XMLHttpRequest 请求请求为了让Javascript 可以向服务器发送HTTP 请求，必须使用XMLHttpRequest 对象。使用之前，要先将XMLHttpRequest 对象实例化为了让编写的程序能够跨浏览器运行，要这样写：if(window.XMLHttpRequest)/Mozilla,Safari,.http_request=new XMLHttpRequest();else if(window.ActiveXObject)/IE http_

15、request=new ActiveXObject(Microsoft.XMLHTTP);21指定响应处理函数指定响应处理函数接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest 对象的onreadystatechange 属性就可以了http_request.onreadystatechange=handleResponse;需要指出的是，这个函数名称不加括号，不指定参数。也可以用 Javascript 即时定义函数的方式定义响应函数。比如：http_request.onreadystatechange=function();22发出发出H

16、TTP 请求请求指定响应处理函数之后，就可以向服务器发出HTTP 请求了。这一步调用XMLHttpRequest 对象的open 和send 方法。http_request.open(GET,http:/,true);http_request.send(null);1.open 的第一个参数是HTTP 请求的方法，为Get、Post 或者Head。232.open 的第二个参数是目标URL。基于安全考虑，这个URL 只能是同网域的，否则会提示“没有权限”的错误。这个URL 可以是任何的URL，包括需要服务器解释执行的页面，不仅仅是静态页面。目标URL 处理请求XMLHttpRequest 请求

17、则跟处理普通的HTTP 请求一样，比如JSP 可以用request.getParameter(“”)或者request.getAttribute(“”)来取得URL 参数值。3.open 的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为false，则不会继续执行，直到服务器返回信息。默认为True。24按照顺序，open 调用完毕之后要调用send 方法。send 的参数如果是以Post 方式发出的话，可以是任何想传给服务器的内容。不过，跟form 一样，如果要传文件或者Post 内容给服务器，必须先调用setRequestHeader 方法，修改MIME 类别。

18、如下：http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);（多用途互联网络电子邮件格式的扩展。用MIME关键字来区分文件编码格式文件种类（包括多媒体）。）这时资料则以查询字符串的形式列出，作为send 的参数，例如：name=value&anothername=othervalue&so=on25处理服务器返回的信息处理服务器返回的信息在第二步我们已经指定了响应处理函数，这一步，来看看这个响应处理函数都应该做什么。首先，它要检查XMLHttpRequest 对象的readyState

19、 值，判断目前请求的状态。参照前文的属性表可以知道，readyState 值为4 的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：if(http_request.readyState=4)/信息已经返回，可以开始处理 else/信息还没有返回，等待26服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误所有的状态码都可以在W3C的官方网站上查到。其中，200 代表页面正常。if(http_request.status=200)/页面正常，可以开始处理信息 else/页面有问题27XMLHttpRequest 对成功返回的信息有两种处理方式：re

20、sponseText：将传回的信息当字符串使用；responseXML：将传回的信息当XML 文档使用，可以用DOM 处理。28 /创建XMLHttpReques对象（代码是固定的）function createXMLHttpRequest()if(window.XMLHttpRequest)/Mozilla 浏览器 XMLHttpReq=new XMLHttpRequest();else /IE浏览器if(window.ActiveXObject)try XMLHttpReq=new ActiveXObject(Msxml2.XMLHTTP);catch(e)try XMLHttpReq=n

21、ew ActiveXObject(Microsoft.XMLHTTP);catch(e)一个一个ajax请求的基本框架请求的基本框架29 /处理服务器响应结果 function handleResponse()/判断对象状态 if(XMLHttpReq.readyState=4)/信息已经成功返回，开始处理信息 if(XMLHttpReq.status=200)/if中内容是自定义的 var out=;var res=XMLHttpReq.responseXML;var response=res.getElementsByTagName(response)0.firstChild.nodeVa

22、lue;document.getElementById(“result).innerHTML=response;30 /发送客户端的请求（代码是固定的）function sendRequest(url)createXMLHttpRequest();XMLHttpReq.open(GET,url,true);/指定响应函数 XMLHttpReq.onreadystatechange=handleResponse;/发送请求 XMLHttpReq.send(null);31 /开始调用Ajax的功能（完全是用户自定义）function userCheck()var name=document.ge

23、tElementById(“uname).value;/发送请求 sendRequest(“UsernameCheck?name=+name);这是一个servlet32在用户注册的表单中，经常碰到要检验待注册的用户名是否唯一。传统的做法是采用window.open 的弹出窗口，或者 window.showModalDialog 的对话框。不过，这两个都需要打开窗口。采用 AJAX 后，采用异步方式直接将参数提交到服务器，用 window.alert或直接在页面将服务器返回的校验信息显示出来。代码如下：案例：数据校验案例：数据校验 用户名： 33案例：数据校验案例：数据校验在开发框架

24、的基础上再增加一个调用函数：function userCheck()var f=document.form1;var username=;if(username=)window.alert(用户名不能为空。);();return false;else /发送请求 sendRequest(UsernameCheck?username=+username);34案例：数据校验案例：数据校验看看UsernameCheck 做了什么：response.setContentType(text/xml;charset=UTF-8);response.setHeader(Cache-Control,no-c

25、ache);PrintWriter out=response.getWriter();String output=;String name=request.getParameter(username);if(name.equals(admin)output=该用户已存在。;else output=合法的用户名。;out.println(output);out.close();35总结总结Ajax使用步骤：1.在页面上书写创建XMLHttpRequest对象的方法；2.在页面上书写创建处理服务器响应结果的方法；3.在页面上书写发送客户端请求的方法；4.在页面上书写用户自定义的方法必须最后调用发送客户端请求的方法；以上4步均是javascript中方法。5.在jsp或servlet上书写服务器处理请求/响应的代码。具体请参见P28-P34案例。36