AJAX实例.doc

第一个例子是关于关联选择框的问题，如图： 这是一个很常见的UI，当用户在第一个选择框里选择ZHEJIANG时，第二个选择框要出现ZHEJIANG的城市；当用户在第一个选择框里选择JIANGSU时，第二个选择框里要出现JIANGSU的城市。 首先，我们来看配置文件web.xml，在里面配置一个servlet，跟往常一样： SelectCityServlet com.stephen.servlet.SelectCityServlet SelectCityServlet /servlet/SelectCityServlet 然后，来看我们的JSP文件： MyHtml.html !- function getResult(stateVal) var url = servlet/SelectCityServlet?state=+stateVal; if (window.XMLHttpRequest) req = new XMLHttpRequest(); else if (window.ActiveXObject) req = new ActiveXObject(Microsoft.XMLHTTP); if(req) req.open(GET,url, true); req.onreadystatechange = complete; req.send(null); function complete() if (req.readyState = 4) if (req.status = 200) var city = req.responseXML.getElementsByTagName(city); /alert(city.length); var str=new Array(); for(var i=0;icity.length;i+) stri=cityi.firstChild.data; /alert(document.getElementById(city); buildSelect(str,document.getElementById(city); function buildSelect(str,sel) sel.options.length=0; for(var i=0;istr.length;i+) sel.optionssel.options.length=new Option(stri,stri) Select ZEHJIANG JIANGSU CITY 第一眼看来，跟我们平常的JSP没有两样。仔细一看，不同在JS里头。 我们首先来看第一个方法：getResult(stateVal)，在这个方法里，首先是取得XmlHttpRequest；然后设置该请求的url：req.open(GET,url, true);接着设置请求返回值的接收方法：req.onreadystatechange = complete;该返回值的接收方法为complete();最后是发送请求：req.send(null); 然后我们来看我们的返回值接收方法：complete()，这这个方法里，首先判断是否正确返回，如果正确返回，用DOM对返回的XML文件进行解析。关于DOM的使用，这里不再讲述，请大家参阅相关文档。得到city的值以后，再通过buildSelect(str,sel)方法赋值到相应的选择框里头去。 最后我们来看看Servlet文件： import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /* * author Administrator * * TODO To change the template for this generated type comment go to * Window - Preferences - Java - Code Style - Code Templates */ public class SelectCityServlet extends HttpServlet public SelectCityServlet() super(); public void destroy() super.destroy(); public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException response.setContentType(text/xml); response.setHeader(Cache-Control, no-cache); String state = request.getParameter(state); StringBuffer sb=new StringBuffer(); if (zj.equals(state) sb.append(hangzhouhuzhou); else if(zs.equals(state) sb.append(nanjingyangzhousuzhou); sb.append(); PrintWriter out=response.getWriter(); out.write(sb.toString(); out.close(); 这个类也十分简单，首先是从request里取得state参数，然后根据state参数生成相应的XML文件，最后将XML文件输出到PrintWriter对象里。 到现在为止，第一个例子的代码已经全部结束。是不是比较简单？我们进入到第二个实例吧！ 这次是基于JSP的AJAX的一个应用。 三、基于JSP的AJAX 这个例子是关于输入校验的问题，我们知道，在申请用户的时候，需要去数据库对该用户性进行唯一性确认，然后才能继续往下申请。如图： 这种校验需要访问后台数据库，但又不希望用户在这里提交后等待，当然是AJAX技术大显身手的时候了。 首先来看显示UI的JSP: Check.html !- var http_request = false; function send_request(url) /初始化、指定处理函数、发送请求的函数 http_request = false; /开始初始化XMLHttpRequest对象 if(window.XMLHttpRequest) /Mozilla 浏览器 http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) /设置MiME类别 http_request.overrideMimeType(text/xml); else if (window.ActiveXObject) / IE浏览器 try http_request = new ActiveXObject(Msxml2.XMLHTTP); catch (e) try http_request = new ActiveXObject(Microsoft.XMLHTTP); catch (e) if (!http_request) / 异常，创建对象实例失败 window.alert(不能创建XMLHttpRequest对象实例.); return false; http_request.onreadystatechange = processRequest; / 确定发送请求的方式和URL以及是否同步执行下段代码 http_request.open(GET, url, true); http_request.send(null); / 处理返回信息的函数 function processRequest() if (http_request.readyState = 4) / 判断对象状态 if (http_request.status = 200) / 信息已经成功返回，开始处理信息 alert(http_request.responseText); else /页面不正常 alert(您所请求的页面有异常。); function userCheck() var f = document.form1; var username = f.username.value; if(username=) window.alert(The user name can not be null!); f.username.focus(); return false; else send_request(check1.jsp?username=+username); User Name:  所有的JS都跟上一个例子一样，不同的只是对返回值的操作，这次是用alert来显示：alert(http_request.responseText); 我们来看处理逻辑JSP: 非常简单，先取得参数，然后作处理，最后将结果打印在out里。 我们的第三个例子仍然以这个唯一性校验为例子，这次结合Struts开发框架来完成AJAX的开发。 四、基于Struts的AJAX 首先，我们仍然是对Struts应用来做配置，仍然是在struts-config,xml文件里做配置，如下： 跟普通的Struts应用的配置一样，只是没有ActionForm的配置。 下面是Action类： package com.ajax; import java.io.PrintWriter; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.struts.action.Action; import org.apache.struts.action.ActionForm; import org.apache.struts.action.ActionForward; import org.apache.struts.action.ActionMapping; import org.apache.struts.action.DynaActionForm; /* * author Administrator * * TODO To change the template for this generated type comment go to * Window - Preferences - Java - Code Style - Code Templates */ public class CheckAction extends Action public final ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception System.out.println(haha.); String username= request.getParameter(username); System.out.println(username); String retn; if(educhina.equals(username) retn = Cant use the same name with the old use,pls select a difference.; else retn = congraducation!you can use this name.; PrintWriter out=response.getWriter(); out.write(retn); out.close(); return mapping.findForward(success); public static void main(String args) 我们可以看到里面的逻辑跟上例中Servlet里的逻辑一样。最后，我们来看看JSP: Check.html !- var http_request = false; function send_request(url) /初始化、指定处理函数、发送请求的函数 http_request = false; /开始初始化XMLHttpRequest对象 if(window.XMLHttpRequest) /Mozilla 浏览器 http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) /设置MiME类别 http_request.overrideMimeType(text/xml); else if (window.ActiveXObject) / IE浏览器 try http_request = new ActiveXObject(Msxml2.XMLHTTP); catch (e) try http_request = new ActiveXObject(Microsoft.XMLHTTP); catch (e) if (!http_request) / 异常，创建对象实例失败 window.alert(不能创建XMLHttpRequest对象实例.); return false; http_request.onreadystatechange = processRequest; / 确定发送请求的方式和URL以及是否同步执行下段代码 http_request.open(GET, url, true); http_request.send(null); / 处理返回信息的函数 function processRequest() if (http_request.readyState = 4) / 判断对象状态 if (http_request.status = 200) / 信息已经成功返回，开始处理信息 alert(http_request.responseText); else /页面不正常 alert(您所请求的页面有异常。); function userCheck() var f = document.forms0; var username = f.username.value; if(username=) window.alert(The user name can not be null!); f.username.focus(); return false; else send_request(ajax/check.do?username=+username); User Name:  我们可以看到，JSP基本是一样的，除了要发送的url：ajax/check.do?username=+username。 最后，我们来看一个基于Struts和AJAX的复杂一些的例子，如果不用AJAX技术，UI的代码将十分复杂。 五、一个复杂的实例 我们先来看看UI图： 这是一个比较复杂的级联：一共八个列表框，三个下拉框。从第一个列表框里选择到第二个列表框里后，第一个选择框里的选项是第二个列表框的选择；然后，在第一个选择框里选择以后，与选择值关联的一些选项出现在第三个列表框里。从第三个列表框里选择选项到第四个列表框里，同样，第二个选择框的选项也是第四个列表框的选项；如果对第二个选择框进行选择后，与选择值关联的一些选项出现在第六个列表框里，依次类推 这个UI的逻辑就比较复杂，但使用了AJAX使得我们实现起来就简单多了，这个例子我们除了使用Action类，还要用到POJO类和Business类，然后我们扩展的话，可以通过Business类和数据库连接起来。 我们还是先看配置文件： 然后看看Action类： /* /* * Title : Base Dict Class * Description : here Description is the function of class, here maybe multirows * Copyright: Copyright (c) 2004 * company Freeborders Co., Ltd. * Goal Feng * Version 1.0 */ package com.ajax; import java.io.PrintWriter; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.struts.action.Action; import org.apache.struts.action.ActionForm; import org.apache.struts.action.ActionForward; import org.apache.struts.action.ActionMapping; /* * author Administrator * * TODO To change the template for this generated type comment go to * Window - Preferences - Java - Code Style - Code Templates */ public class SelectAction extends Action public final ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception response.setContentType(text/xml); response.setHeader(Cache-Control, no-cache); String type = request.getParameter(type); String id = request.getParameter(id); System.out.println(id); StringBuffer sb=new StringBuffer(); sb.append(+type+); List list = new SelectBusiness().getData(id); for(int i=0;ilist.size();i+) SelectForm sel = (SelectForm)list.get(i); sb.append(+sel.getText()+sel.getValue()+); sb.append(); PrintWriter out=response.getWriter(); out.write(sb.toString(); out.close(); System.out.println(sb.toString(); return mapping.findForward(success); public static void main(String args) POJO类和Business类： package com.ajax; /* * author Administrator * * TODO To change the template for this generated type comment go to * Window - Preferences - Java - Code Style - Code Templates */ public class SelectForm private String text; private String value; /* * return Returns the text. */ public String getText() return text; /* * param text The text to set. */ public void setText(String text) this.text = text; /* * return Returns the value. */ public String getValue() return value; /* * param value The value to set. */ public void setValue(String value) this.value = value; public static void main(String args) package com.ajax; import java.util.ArrayList; import java.util.List; /* * author Administrator * * TODO To change the template for this generated type comment go to * Window - Preferences - Java - Code Style - Code Templates */ public class SelectBusiness public List getData(String id) ArrayList list = new ArrayList(); for(int i=1;i6;i+) SelectForm form = new SelectForm(); form.setText(id+i); form.setValue(id+i); list.add(form); return list; public static void main(String args) 最后是JSP文件： FB function Add() if(document.all.Education2.style.display=block)document.all.Education2.style.display=none; else document.all.Education2.style.display=block; function getResult(type,id) var url = ajax/select.do?type=+type+&id=+id; if (window.XMLHttpRequest) req = new XMLHttpRequest(); else if (window.ActiveXObject) req = new ActiveXObject(Microsoft.XMLHTTP); if(req) req.open(GET,url, true); req.onreadystatechange = complete; req.send(null); function complete() if (req.readyState = 4) if (req.status = 200) var type = req.responseXML.getElementsByTagName(type); var value = req.responseXML.getElementsByTagName(value); var str=new Array(); for(var i=0;ivalue.length;i+) stri=valuei.firstChild.data; var type = type0.firstChild.data; removeType1(type); if(type=0) buildSelect(str,document.getElementById(select28); else if(type=1) buildSelect(str,document.getElementById(select32); else if(type=2) buildSelect(str,document.getElementById(select34); function buildSelect(str,sel) sel.options.length=0; for(var i=0;istr.length;i+) sel.optionssel.options.len