ajax经典教学.ppt

1、Ajax 知识和应用,什么是Ajax,Ajax：只刷新局部页面的技术 AJAX ： Asynchronous And XML 异步：发送请求后不等返回结果，由回调函数处理结果 JavaScript：向服务器发起请求，获得返回结果，更新页面 XML：封装数据 用途 使用JavaScript从服务器获取数据而不必刷新整个页面,Asynchronous异步的,JavaScript,And,XML,怎样使用 _,当输入焦点离开用户名输入框时检查用户是否存在。,function checkUserExists(oCtl) var uname = oCtl.value; if (!uname) alert

2、(用户名不能为空); oCtl.focus(); return ; / 发送请求到服务器，判断用户名是否存在 . . Ajax here . . ,怎样使用Ajax,public class UserAction extends BaseAction private UserBiz userBiz = null; public ActionForward doCheckUserExists(.) throws ServletException, IOException String uname = request.getParameter(uname); boolean bExists = t

3、his.getUserBiz().isExists(uname); PrintWriter out = response.getWriter(); out.print(bExists); return null; ,1、编写服务器段代码,效果,如果用户名已存在就输出true，否则输出false。,怎样使用Ajax,2、使用XMLHttpRequest组件发送请求,var xmlHttpRequest; function createXmlHttpRequest() if(window.ActiveXObject) return new ActiveXObject(Microsoft.XMLHT

4、TP); else if(window.XMLHttpRequest) return new XMLHttpRequest(); ,判断不同浏览器，采用不同方式创建XMLHttpRequest对象,/ 发送请求到服务器，判断用户名是否存在 / 请求字符串 var url = ?operate=doCheckUserExists,请求字符串,状态改变时，将要调用的函数的名字,怎样使用Ajax,3、编写回调函数代码： 处理返回结果 更新页面显示,状态改变时，将要调用的函数的名字,function haoLeJiaoWo() if( xmlHttpRequest.readyState = 4 ,请求

5、状态： 0 - 未初始化 1 - 初始化 2 - 发送请求 3 - 开始接受结果 4 - 接受结果完毕 每次状态改变都会调这个函数,HTML返回码： 200 - OK 404 - Not found（没有找到资源） 500 - 服务器端出错,取得返回结果： true或false。,演示示例：使用Ajax判断用户是否存在,Ajax框架,Ajax应用越来越广泛，客观上需要简化开发过程 各种Ajax框架层出不穷，各有特色 DWR应用最为广泛,/dwr,Ajax框架,DWR - Direct Web Remoting 开源，免费的Ajax框架 将Java类发布为Ja

6、vaScript可调用的脚本对象 提供JavaScript工具类，简化页面编码,/dwr,Ajax框架,在项目中应用DWR 1、准备工作 下载dwr.jar, 添加到项目中（ /dwr ） 创建配置文件：/WEB-INF/dwr.xml 在web.xml中配置, dwr org.directwebremoting.servlet.DwrServlet dwr /dwr/* ,作为servlet配置,如何使用DWR,在项目中使用DWR 2、发布Java类, ,要发布的类名,要发布的方法名,脚本对象名,验证发布成功,如何使用DWR,在项目中使用DWR 3、页面代码, function checkUserExists(oCtl) var uname = oCtl.value; / 发送请求到服务器，判断用户名是否存在 JUserChecker.check(uname,haoLeJiaoWo); function haoLeJiaoWo(isExist) if(isExist = 1) al