第11章ajax

1、前序小明：有个页面我只想改变一小块内容，但是需要提交整个页面来向后有个页面我只想改变一小块内容，但是需要提交整个页面来向后台取数据，造成整个面都变成白的，我像问台取数据，造成整个面都变成白的，我像问JavaScriptJavaScript函数能调用函数能调用javajava后后台的函数取到数据，然后我再用台的函数取到数据，然后我再用JavaScriptJavaScript动态改变动态改变HTMLHTML脚本吗？脚本吗？小张：肯定不可以啊肯定不可以啊 JavaScript JavaScript是客户端脚本，怎么可能调用服务是客户端脚本，怎么可能调用服务器程序呢。器程序呢。小李：哈哈，在前几年是肯

2、定不可以的，但是现在出现了哈哈，在前几年是肯定不可以的，但是现在出现了AjaxAjax技术，他技术，他可以实现小明所希望的功能，能够让你使用可以实现小明所希望的功能，能够让你使用JavaScript JavaScript 直接访问服务器直接访问服务器来实现局部刷新，不至于让整个页面都是白的，能够很好提高用户体验度。来实现局部刷新，不至于让整个页面都是白的，能够很好提高用户体验度。小张：能有这么好的技术？能有这么好的技术？小李：其实其实AjaxAjax并不是新技术，并不是新技术，它只是将 XHTMLXHTML和和CSSCSS、 DOMDOM、 XMLXML、 JavaScriptJavaScri

3、pt技术融合在一起技术融合在一起小明：这么复杂啊。这么复杂啊。小李：这一点都不复杂，这一点都不复杂，DwrDwr框架可以让我们很轻松调用后台框架可以让我们很轻松调用后台javajava函数函数 而且还可以和而且还可以和springspring进行结合呢进行结合呢 2什么是AJAX？ AJAXAsynchronus JavaScript Xml 简单的说，AJAX技术就是异步传输技术，可以在B/S模式的应用程序上，不完全刷新页面的情况下，动态地修改页面上的部分内容 AJAX不是基于语言的，也就是无论你用那种语言开发你的B/S应用，你都可以使用AJAX技术来给你的客户不同的感受3走进AJAXw 使

4、用XHTML和CSS的基于标准的表示技术w 使用DOM进行动态显示和交互w 使用XML和XSLT进行数据交互w 使用XMLHttpRequest进行异步数据检索w 使用javascript技术将以上技术融合在一起4AJAX的思维方式5XMLHttpRequest对象 一个页面可以通过一个HttpRequest发送一个请求来获取服务器响应，而当前页面不做刷新。 通过使用XMLHttpRequest对象，开发者可以在不刷新当前页面的情况下更新当前页面的数据。 注：XMLHttpRequest对象不是W3C标准，不过目前已有以下浏览器支持此对象操作：IE5.0+,Safari1.2,Mozilla1

5、.0,Firefox,Netscape7。6创建XMLHttpRequest对象 要创建XMLHttpRequest对象，可以采用以下方法： 对于IE：var xmlhttp=new ActiveXObject(Microsoft.XMLHTTP) 对于Mozilla, Firefox, Netscape：var xmlhttp=new XMLHttpRequest()xmlHttpRequest的方法方法描述abort()停止当前请求getAllResponseHeaders()把HTTP所有的响应返回getReaspnseHeader(“header”)返回指定的串值Open(“metho

6、d”, “url”)建立对服务器的调用，method可以是GET/POST，url可以是相对URL/绝对URLsend(content)向服务器发送请求setRequestHeader(“header”,”value”)把指定首部设置为所提供的值，在设置任何首部之前必须先调用open()8open方法 Open方法会建立对服务器的调用 void open(method, url, asynch, username, userpass) Method: 访问服务器的方法（GET/POST/PUT） Url: 所要调用资源的URL Asynch: 是否采用异步传输技术（true/false） Us

7、ername:用户名 Userpass: 密码9XMLHttpRequest属性属属 性性描描 述述onreadystatechange用来捕获所有的状态变换的事件用来捕获所有的状态变换的事件readyState返回对象状态：返回对象状态：0 = uninitialized1 = loading2 = loaded3 = interactive4 = completeresponseXML响应响应XML数据数据status返回状态数字（返回状态数字（404表示表示Not Found 200表示表示OK）statusText返回状态文本（返回状态文本（Not Found ，OK）response

8、Text响应文本响应文本创建一个AJAX步骤q 创建一个XMLHttpRequest对象q 设置服务器的URLq 用XMLHttpRequest对象的onreadystatechange方法来处理你想做的事情（指定回调方法）q 用open()方法打开请求q 用send()发送消息使用XMLHTTP与服务器交互var xhr;function createXMLHttpRequest() /创建XMLHTTP对象 if(window.ActiveXObject) xhr = new ActiveXObject(Microsoft.XMLHTTP); else xhr = new XMLHttpR

9、equest(); function statechange() /创建一个监听响应状态的JS函数 if(xhr.readyState=4) if(xhr.status=200) var data =xhr.responseText; alert(data); /取到服务器响应内容 function doRequest() / 发送数据请求var txtValue=document.getElementById(txt).value; createXMLHttpRequest(); xhr.onreadystatechange = statechange; xhr.open(POST,serv

10、let/Test?txt=+txtValue,true); xhr.send(par=dd);服务器端代码import javax.servlet.*;import javax.servlet.http.*;import java.io.*; public class extends HttpServlet public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException response.setContentType(CONTENT

11、_TYPE); PrintWriter out = response.getWriter(); String name = request.getParameter(“txt); out.println(“大家好:我叫+name); out.close(); Dwr的引入q 1，前面介绍的是 Ajax的基本操作q 2，显然使用那个三个函数 和后台交互太麻烦了 而且功能也很局限q 3，Dwr 可以让我们很轻松调用后台java函数qDWR 概述概述DWR (Direct Web Remoting )DWR功能 彻底分离表现和业务逻辑，让糟糕的彻底分离表现和业务逻辑，让糟糕的Scriptlets代码

12、从此从代码从此从Web页面上消失页面上消失 展现页面只需加载一次节省网络带宽、提展现页面只需加载一次节省网络带宽、提高用户响应高用户响应DWR 实现机制实现机制 DWR主要组成部分主要组成部分JS引擎总控制器组件执行器数据转换器DWR前台引擎前台引擎 DWR前台引擎前台引擎(Engine.js)的主要职责的主要职责 截取每个后台组件的请求实现客户端的统一入口 将用于组件调用的JS参数对象重新包装组合 检测客户端浏览器的环境并选择最佳的数据提交方案 处理后台执行结果并通过执行回调函数通知客户后台控制器后台控制器 后台控制器后台控制器(DWRServet)的主要职责的主要职责 装载Servlet时

13、初始化DWR配置参数 实现后台业务组件调用的服务器端统一入口 分发各种不同类型的请求 JS文件请求 业务调用请求等 输出组件执行结果(JavaScript语句)到客户端浏览器业务组件执行器业务组件执行器 业务组件执行器的主要职责业务组件执行器的主要职责 根据配置文件的参数确定后台组件的访问规则和生命周期 拆包前台传入的参数 包装组件执行结果 按参数类型匹配数据类型转换器 采用反射机制执行业务组件方法处理客户端请求 处理与其他系统的接口和协作 如：Spring Hibernate等数据类型转换器数据类型转换器 数据类型转换器的主要职责数据类型转换器的主要职责 将一系列单个的参数转换成对应的Jav

14、a对象 将Java对象转换成JavaScript对象数据类型对应关系 JavaScript的数据类型与的数据类型与Java数据类型的数据类型的关系关系JavaScriptJavaArray数组List、Collection、数组BooleanBooleanObjectMap、Java BeanStringStringDateDateNumbersInt、double、float等数值XML DomDomundefinednullDWR配置配置 DWR配置文件主要有以下两个部分组成配置文件主要有以下两个部分组成1.web.xml文件主要配置DWR的后台控制器2.dwr.xml的初始化配置部分DW

15、R的后台控制器的配置 dwr-invoker org.directwebremoting.servlet.DwrServlet debug true dwr-invoker /dwr/* dwr.xml的配置的配置 前台JS业务组件对象的生成器配置各种数据类型的转换器DWR前台调用 function book(name,price) = name; this.price = price; function addBook() BookList.addBook(www,100.0); function getBook() BookList.getBook(www,callBackBookList); function callBackBookList(data) book = data; alert(book.nam