不错的Ajax与DWR框架入门文档

Ajax技术为什么需要Ajax?Web2.0的特点内容聚合：RSS、Atom等信息格式规范化的标准用户贡献内容：Web2.0的最大特征社会化网络：模拟现实生活的网络运作模式其核心理念就是控制权由网站转到用户Ajax技术优势Ajax技术是Web2.0的核心技术之一Ajax技术包括JavaScript函数库和Ajax框架符合Web2.0的理念Ajax技术的提供更丰富的“用户体验”，新的交互方式无刷新：不刷新整个页面，只刷新局部l 只更新局部内容，有效利用带宽l 提供连续的用户体验l 类似于C/S的交互效果Google地图的原理：主动式缓存，移动时先用Ajax把周围的地图图片下载下来缓存在浏览器中什么是Ajax?Ajax是一种客户端技术（Asynchronous JavaScript And Xml异步的）只刷新局部页面的技术异步：发送请求后不等返回结果，由回调函数处理结果JavaScript：向服务器发起请求，获得返回结果，更新页面XML：封装数据用途：使用JavaScript从服务器获取数据而不必刷新整个页面Web应用模型Ajax重新定义用户的工作流程。同步用户交互模式: 工作-等待。异步用户交互模式: 工作-工作。重新定义Web架构Ajax技术原理1JavaScript脚本触发事件，调用JavaScript函数2在JavaScript函数中通过XmlHttpRrequest异步调用调用服务器程序3服务器程序向数据库发送请求4数据库向服务器程序反馈数据5服务器程序响应给XmlHttpRrequest对象6XmlHttpRrequest对象调用回调JavaScript函数7回调函数控制页面局部更新如何使用Ajax?XmlHttpRrequest对象主要方法XmlHttpRrequest对象的主要属性Ajax使用步骤/定义一个函数创建XmlHttpRequest对象function createXmlHttpRequest()if(window.ActiveXObject)return new ActiveXObject(Microsoft.XMLHTTP);else if(window.XMLHttpRequest)return new XMLHttpRequest();/定义调用异步请求的函数function doLogin()var usr = document.getElementById(userName);var pwd = document.getElementById(password);/客户端验证代码.var url = login.do?userName=+usr.value+&password=+pwd.value;/创建XmlHttpRequest组件xmlHttpRequest = createXmlHttpRequest();/设置回调函数xmlHttpRequest.onreadystatechange = haoLeJiaoWo;/初始化XmlHttpRequest组件 xmlHttpRequest.open(GET,url,true); /例如name=myname&pwd=password如果是以Post方式提交则要设置这个请求的头部信息/xmlHttpRequest.setRequestHeader(Content-Type,application/x-www-form-urlencoded;charset=UTF-8);/发送请求，这里可以传递参数，以键值对的方式传递/xmlHttpRequest.send(name=lxt008&password=pass); xmlHttpRequest.send(null);/回调函数function haoLeJiaoWo()if(xmlHttpRequest.readyState = 4) if(xmlHttpRequest.status = 200) alert(dwrLoginForm.getUserName(); var str = xmlHttpRequest.responseText; alert(str);if (success=str) document.getElementById(spUsername).innerText = curUserName; document.getElementById(dvLogin).style.display = none; document.getElementById(dvOnline).style.display = block; send(参数)无参数时也必须使用：send(null) 使用send方法传递参数使用的是POST方法，需要设定Content-Type头信息，模拟HTTP POST方法发送一个表单参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。两种提交方式分别调用后台的doGet方法和doPost方法。 xmlHttpRequest.open(POST,login.jsp,true);/例如name=myname&pwd=password如果是以Post方式提交则要设置这个请求的头部信息xmlHttpRequest.setRequestHeader(Content-Type,application/x-www-form-urlencoded;charset=UTF-8);/这个头部信息设置了字符集，并且设置send(name=lxt008 )函数中的数据是以表单方式提交/发送请求，这里可以传递参数，以键值对的方式传递xmlHttpRequest.send(user=+username+&pwd=+password);为什么需要JS库/AJAX框架?重用是最主要目标。简化Web客户端开发。JS库/AJAX框架可以提高开发效率。解决浏览器之间的差异带来的烦恼。修正一些JavaScript的缺陷。增强JavaScript的功能。常见JS库/Ajax框架PrototypeDojojQueryDWRMooToolsEXTGWTYUI服务器端客户端的分类。DWR概述类似于RPC远程过程调用机制。将Java类转换为JavaScript对象。是Java中最好的服务器端Ajax框架集成Spring最好的Ajax框架。在项目中应用DWR配置DwrServlet到/dwr下载dwr.jar, 添加到项目的lib目录，并加入到构建路径。在web.xml中配置DwrServlet。dwrorg.directwebremoting.servlet.DwrServletdebugtruedwr/dwr/*配置dwr.xml创建配置文件：/WEB-INF/dwr.xml new 表示新建一个package.className 对象（要调用的业务对象）转换成JS对象“白名单”配置哪些方法需要转换成JS对象。exclude黑名单定义要调用的业务对象/*方法名要不同，JS不支持重载！*/public class SayHelloService /*方法名要不同，JS不支持重载！*/无参数方法public String sayHello1() return Hello DWR Spring!;/参数是是Stringpublic String sayHello2(String userName)return Hello +userName;/参数是基本数据类型public String sayHello3(int age) return Your age : +age;在dwr.xml中加入creator 在页面中调用验证转换结果如果设置了debug为true就可以测试。输入：http:/localhost:8080/DWRSpring/dwr选择转换后的JS对象就可以测试了。拷贝相应代码到网页之间,就可以使用SayHelloService对象了：function eventHandle()SayHelloService.sayHello1(callBackFun);/回调函数是最后一个参数。SayHelloService.sayHello2(lxt008,callBackFun);SayHelloService.sayHello3(100,callBackFun);/回调函数function callBackFun(data) alert(data);在DWR中使用Struts FormBean在DWR中使用String FormBean在DWR Struts Spring整合在多个框架都用到Spring IOC容器的组件时，不需要在多个地方加载applicationContext.xml只需配置web.xml配置文件，加入上下文加载监听器，并设置上