《二十五讲AJAX技术入门.ppt》由会员分享，可在线阅读，更多相关《二十五讲AJAX技术入门.ppt（36页珍藏版）》请在三一办公上搜索。
1、第二十五讲 AJAX技术,佘向飞、柯洪昌长春工程学院软件学院,2,AJAX（Asynchronous JavaScript and XML）其实是多种技术的综合，包括Javascript、XHTML 和CSS、DOM(文档对象模型)、XML 和XSTL、XMLHttpRequest。其中：使用XHTML 和CSS 标准化呈现，使用DOM 实现动态显示和交互，使用XML 和XSTL 进行数据交换与处理，使用XMLHttpRequest 对象进行异步数据读取，使用Javascript 绑定和处理所有数据。在AJAX 提出之前，业界对于上述技术都只是单独的使用，没有综合使用，也是由于之前的技术需求所
2、决定的。随着应用的广泛，AJAX 也成为香饽饽了。,AJAX 定义,3,4,Ajax的工作原理相当于在用户和服务器之间加了一个中间层，称为Ajax引擎，该引擎使用户操作与服务器响应异步化。在这种模式下，用户请求不是全部都提交给服务器。部分请求，如一些数据验证和简单的数据处理请求等就交给Ajax引擎完成，只有那些确实需要由服务器来完成的请求，才由Ajax引擎代为向服务器提交。,5,以下是SayHello.jsp页面代码：姓名：0)out.print(Hello“+request.getParameter(name);%,实例：传统的请求响应方式,6,现状与需要解决的问题,传统的Web 应用采用同
3、步交互过程，这种情况下，用户首先向HTTP 服务器触发一个行为或请求的呼求。反过来，服务器执行某些任务，再向发出请求的用户返回一个页面。这是一种不连贯的用户体验，服务器在处理请求的时候，用户多数时间处于等待的状态，屏幕内容也是一片空白。,7,为什么使用AJAX,与传统的Web 应用不同，AJAX 采用异步交互过程。AJAX 在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理等待处理等待缺点。用户的浏览器在执行任务时即装载了AJAX 引擎。AJAX 引擎用JavaScript 语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。,8,为什么使用AJAX,A
4、JAX 引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript 调用AJAX引擎来代替产生一个HTTP 的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX 来执行。,9,1.减轻服务器的负担。AJAX 的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担。2.无刷新更新页面，减少用户心理和实际的等待时间带来更好的用户体验。3.可以把以前一些服务器负担的工作转加到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。4.可以调用外部数据。5.基
5、于标准化的并被广泛支持的技术，不需要下载插件或者小程序。6.进一步促进页面呈现和数据的分离。,使用AJAX好处,10,/创建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 ActiveXObj
6、ect(Microsoft.XMLHTTP);catch(e),实例：Ajax请求方式,11,/处理服务器响应结果 function handleResponse()/判断对象状态 if(XMLHttpReq.readyState=4)/信息已经成功返回，开始处理信息 if(XMLHttpReq.status=200)var out=;var res=XMLHttpReq.responseXML;var response=res.getElementsByTagName(response)0.firstChild.nodeValue;document.getElementById(hello)
7、.innerHTML=response;,实例：Ajax请求方式,12,/发送客户端的请求 function sendRequest(url)createXMLHttpRequest();XMLHttpReq.open(GET,url,true);/指定响应函数 XMLHttpReq.onreadystatechange=handleResponse;/发送请求 XMLHttpReq.send(null);,实例：Ajax请求方式,13,/开始调用Ajax的功能 function sayHello()var name=document.getElementById(name).value;/发
8、送请求 sendRequest(SayHello?name=+name);,实例：Ajax请求方式,这是一个servlet,14,页面代码：姓名：,实例：Ajax请求方式,15,servlet的doGet()方法实现：response.setContentType(text/xml;charset=UTF-8);response.setHeader(Cache-Control,no-cache);PrintWriter out=response.getWriter();String output=;/处理接收到的参数，生成响应的XML文档if(request.getParameter(name
9、)!=null,实例：Ajax请求方式,16,AJAX 应用到的技术,1、XMLHttpRequest 对象,XMLHttpRequest 是XMLHTTP 组件的对象，通过这个对象，AJAX 可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。,17,XMLHttpRequest 对象的方法,18,19,XMLHttpRequest 对象初始化,var http_request=false;/IE 浏览器http_request=new ActiveXObject(
10、Msxml2.XMLHTTP);http_request=new ActiveXObject(Microsoft.XMLHTTP);/Mozilla 浏览器http_request=new XMLHttpRequest();,20,AJAX 开发框架,这里，我们通过一步步的解析，来形成一个发送和接收XMLHttpRequest 请求的程序框架。AJAX 实质上也是遵循Request/Server 模式，所以这个框架基本的流程也是：对象初始化发送请求服务器接收服务器返回客户端接收修改客户端页面内容。只不过这个过程是异步的。,21,初始化对象并发出XMLHttpRequest 请求,为了让Java
11、script 可以向服务器发送HTTP 请求，必须使用XMLHttpRequest 对象。使用之前，要先将XMLHttpRequest 对象实例化为了让编写的程序能够跨浏览器运行，要这样写：,if(window.XMLHttpRequest)/Mozilla,Safari,.http_request=new XMLHttpRequest();else if(window.ActiveXObject)/IE http_request=new ActiveXObject(Microsoft.XMLHTTP);,22,指定响应处理函数,接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理
12、函数名称赋给XMLHttpRequest 对象的onreadystatechange 属性就可以了http_request.onreadystatechange=handleResponse;需要指出的是，这个函数名称不加括号，不指定参数。也可以用 Javascript 即时定义函数的方式定义响应函数。比如：http_request.onreadystatechange=function();,23,发出HTTP 请求,指定响应处理函数之后，就可以向服务器发出HTTP 请求了。这一步调用XMLHttpRequest 对象的open 和send 方法。,http_request.open(GET
13、,http:/,true);http_request.send(null);1.open 的第一个参数是HTTP 请求的方法，为Get、Post 或者Head。,24,2.open 的第二个参数是目标URL。基于安全考虑，这个URL 只能是同网域的，否则会提示“没有权限”的错误。这个URL 可以是任何的URL，包括需要服务器解释执行的页面，不仅仅是静态页面。目标URL 处理请求XMLHttpRequest 请求则跟处理普通的HTTP 请求一样，比如JSP 可以用request.getParameter(“”)或者request.getAttribute(“”)来取得URL 参数值。3.open
14、 的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为false，则不会继续执行，直到服务器返回信息。默认为True。,25,按照顺序，open 调用完毕之后要调用send 方法。send 的参数如果是以Post 方式发出的话，可以是任何想传给服务器的内容。不过，跟form 一样，如果要传文件或者Post 内容给服务器，必须先调用setRequestHeader 方法，修改MIME 类别。如下：http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);（多用途互联
15、网络电子邮件格式的扩展。用MIME关键字来区分文件编码格式文件种类（包括多媒体）。）这时资料则以查询字符串的形式列出，作为send 的参数，例如：name=value&anothername=othervalue&so=on,26,处理服务器返回的信息,在第二步我们已经指定了响应处理函数，这一步，来看看这个响应处理函数都应该做什么。首先，它要检查XMLHttpRequest 对象的readyState 值，判断目前请求的状态。参照前文的属性表可以知道，readyState 值为4 的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：if(http_request.re
16、adyState=4)/信息已经返回，可以开始处理 else/信息还没有返回，等待,27,服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误所有的状态码都可以在W3C的官方网站上查到。其中，200 代表页面正常。if(http_request.status=200)/页面正常，可以开始处理信息 else/页面有问题,28,XMLHttpRequest 对成功返回的信息有两种处理方式：responseText：将传回的信息当字符串使用；responseXML：将传回的信息当XML 文档使用，可以用DOM 处理。,29,/创建XMLHttpReques对象（代码是固定的）fu
17、nction 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),一个ajax请求的基本框架,30,/处理服务器响应结果 function handleRespon
18、se()/判断对象状态 if(XMLHttpReq.readyState=4)/信息已经成功返回，开始处理信息 if(XMLHttpReq.status=200)/if中内容是自定义的 var out=;var res=XMLHttpReq.responseXML;var response=res.getElementsByTagName(response)0.firstChild.nodeValue;document.getElementById(“result).innerHTML=response;,31,/发送客户端的请求（代码是固定的）function sendRequest(url
19、)createXMLHttpRequest();XMLHttpReq.open(GET,url,true);/指定响应函数 XMLHttpReq.onreadystatechange=handleResponse;/发送请求 XMLHttpReq.send(null);,32,/开始调用Ajax的功能（完全是用户自定义）function userCheck()var name=document.getElementById(“uname).value;/发送请求 sendRequest(“UsernameCheck?name=+name);,这是一个servlet,33,在用户注册的表单中，经
20、常碰到要检验待注册的用户名是否唯一。传统的做法是采用window.open 的弹出窗口，或者 window.showModalDialog 的对话框。不过，这两个都需要打开窗口。采用 AJAX 后，采用异步方式直接将参数提交到服务器，用 window.alert或直接在页面将服务器返回的校验信息显示出来。代码如下：,案例：数据校验,用户名：,34,案例：数据校验,在开发框架的基础上再增加一个调用函数：function userCheck()var f=document.form1;var username=;if(username=)window.alert(用户名不能为空。);();retu
21、rn false;else/发送请求 sendRequest(UsernameCheck?username=+username);,35,案例：数据校验,看看UsernameCheck 做了什么：response.setContentType(text/xml;charset=UTF-8);response.setHeader(Cache-Control,no-cache);PrintWriter out=response.getWriter();String output=;String name=request.getParameter(username);if(name.equals(admin)output=该用户已存在。;else output=合法的用户名。;out.println(output);out.close();,36,总结,Ajax使用步骤：1.在页面上书写创建XMLHttpRequest对象的方法；2.在页面上书写创建处理服务器响应结果的方法；3.在页面上书写发送客户端请求的方法；4.在页面上书写用户自定义的方法必须最后调用发送客户端请求的方法；以上4步均是javascript中方法。5.在jsp或servlet上书写服务器处理请求/响应的代码。具体请参见P28-P34案例。,
