ajax经典教学精选.pptVIP

Ajax 知识和应用 什么是Ajax Ajax：只刷新局部页面的技术 AJAX ： Asynchronous And XML 异步：发送请求后不等返回结果，由回调函数处理结果 JavaScript：向服务器发起请求，获得返回结果，更新页面 XML：封装数据 用途 使用JavaScript从服务器获取数据而不必刷新整个页面 怎样使用 _ 当输入焦点离开用户名输入框时检查用户是否存在。 怎样使用Ajax 1、编写服务器段代码 怎样使用Ajax 2、使用XMLHttpRequest组件发送请求 怎样使用Ajax 3、编写回调函数代码： 处理返回结果 更新页面显示 Ajax框架 Ajax应用越来越广泛，客观上需要简化开发过程 各种Ajax框架层出不穷，各有特色 DWR应用最为广泛 Ajax框架 DWR -- Direct Web Remoting 开源，免费的Ajax框架 将Java类发布为JavaScript可调用的脚本对象 提供JavaScript工具类，简化页面编码 Ajax框架 在项目中应用DWR 1、准备工作 下载dwr.jar, 添加到项目中（ /dwr ） 创建配置文件：/WEB-INF/dwr.xml 在web.xml中配置 如何使用DWR 在项目中使用DWR 2、发布Java类 如何使用DWR 在项目中使用DWR 3、页面代码 * * * Asynchronous异步的 JavaScript And XML html:text property=item.uname onblur=return checkUserExists(this); / function checkUserExists(oCtl){ var uname = oCtl.value; if (!uname){ alert(用户名不能为空); oCtl.focus(); return ; } // 发送请求到服务器，判断用户名是否存在 ... ... Ajax here ... ... } public class UserAction extends BaseAction { private UserBiz userBiz = null; public ActionForward doCheckUserExists(...) throws ServletException, IOException { String uname = request.getParameter(uname); boolean bExists = this.getUserBiz().isExists(uname); PrintWriter out = response.getWriter(); out.print(bExists); return null; } } 效果 如果用户名已存在就输出true，否则输出false。 var xmlHttpRequest; function createXmlHttpRequest(){ if(window.ActiveXObject){ return new ActiveXObject(Microsoft.XMLHTTP); }else if(window.XMLHttpRequest){ return new XMLHttpRequest(); } } 判断不同浏览器，采用不同方式创建XMLHttpRequest对象 // 发送请求到服务器，判断用户名是否存在 // 请求字符串 var url = ?operate=doCheckUserExistsuname=+uname; // 1. 创建XMLHttpRequest组件 xmlHttpRequest = createXmlHttpRequest(); // 2. 设置回调函数 xmlHttpRequest.onreadystatechange = haoLeJiaoWo; // 3. 初始化XMLHttpRequest组件 xmlHttpRequest.open(GET,url,true); // 4. 发送请求 xmlHttpRequest.send(null); 请求字符串 状态改变时，将要调用的函数的名字 状态改变时，将要调用的函数的名字 function haoLeJiaoWo(){ if( xmlHttpRequest.readyState == 4 xmlHttpRequest.status == 200 ){