AJAX应用手册.doc

一Ajax回显server端的执行信息今天有人问页面可以用ajax通过事件调java方法，但有是我想把java方法执行过程中的某些提示信息自由自动的反馈给页面。该怎么办, 我下来就做了一个demo. 现在贴上来, 供后来者参考.我用的是spring环境, 所有的controller都继承子Controller; RegisteController:用来模拟用户注册的步骤, 它会产生一些执行过程中的信息放到一个链表里; InfoController: 用来把链表中最顶端的那条信息.发送给客户. 用prototype的ajax来发送请求. 发送请求的同时, 发送另外一个请求用来得到执行过程中的提示信息. 而这个过程递归执行, 直到收到finish消息.jsp文件, 用来发送ajax请求和显示回显信息.注意导入的prototype的路径.1. 2. 3. 4. 5. Testingpage 6. 7. 8. functionpostAjax() 9. varmyAjax=newAjax.Request( 10. register.do, 11. 12. method:post, 13. parameters:username:username,password:password, 14. onComplete:doComplete 15. 16. ); 17. alert(requestsend.); 18. getInfo(); 19. 20. functiongetInfo() 21. varinfoAjax=newAjax.Request( 22. info.do, 23. 24. method:get, 25. parameters:, 26. onComplete:doResult 27. 28. ); 29. 30. 31. functiondoResult(req) 32. if(req.responseText=finish) 33. return; 34. 35. /alert(req.responseText); 36. varmyDiv=document.createElement(div); 37. varinfoText=document.createTextNode(req.responseText); 38. myDiv.appendChild(infoText); 39. $(info).appendChild(myDiv); 40. /循环发送请求得到执行信息. 41. getInfo(); 42. 43. 44. functiondoComplete() 45. 46. 47. 48.49. 50. html,body 51. font-family:Verdana,Arial,Helvetica,sans-serif; 52. font-size:11pt; 53. margin:0; 54. padding:0; 55. border:0none; 56. overflow:hidden; 57. height:100%; 58. 59. .title 60. font-weight:bold; 61. 62. 63. 64. 65. 点击将提交一个ajax请求,模拟执行用户注册行为.这个请求得执行过程将显示在下面. 66. 67. Theresponseinformationcomesfromserver: 68. 69. 70. 71. RegisteController: 1. importjava.util.LinkedList; 2. importjavax.servlet.http.HttpServletRequest; 3. importjavax.servlet.http.HttpServletResponse; 4.5. mons.logging.Log; 6. mons.logging.LogFactory; 7. importorg.springframework.web.servlet.ModelAndView; 8. importorg.springframework.web.servlet.mvc.Controller; 9.10. publicclassRegisteControllerimplementsController 11.12. privateLoglog=LogFactory.getLog(getClass(); 13. 14. publicModelAndViewhandleRequest(HttpServletRequestarg0, 15. HttpServletResponsearg1)throwsException 16. Stringusername=arg0.getParameter(username); 17. Stringpassword=arg0.getParameter(password); 18. (username:+username+password:+password); 19. /* 20. *下面的infoList将用来存放执行过程中的提示信息. 21. *之所以用LinkedList是因为LinkedList具有队列操做的特点. 22. *最先放进去的信息可以最先被取走. 23. */ 24. LinkedListinfoList=newLinkedList(); 25. /* 26. *这里放的信息仅仅是起到模拟作用. 27. *我一次性把所有的信息都放进去了.只是为了模拟效果. 28. *你可以根据实际需要,在需要的时候再放入信息. 29. */ 30. infoList.add(username:+username); 31. /dosomethingelse. 32. infoList.add(password:+password); 33. /dosomethingelse. 34. infoList.add(Trytovalidateusername.); 35. /dosomethingelse. 36. infoList.add(thisusernameisvalidtouse); 37. /dosomethingelse. 38. infoList.add(Trytovalidatepassword.); 39. /dosomethingelse. 40. infoList.add(thepasswordisvalidtouse); 41. /dosomethingelse. 42. infoList.add(Trytoaddthisuserintodatabase.); 43. /dosomethingelse. 44. infoList.add(trytosetentitlementforthisuser); 45. /dosomethingelse. 46. infoList.add(userregisteringok.); 47. /dosomethingelse. 48. infoList.add(succeed.); 49. arg0.getSession().setAttribute(infoList,infoList); 50. arg1.getWriter().write(succeed); 51. returnnull; 52. 53.54. 55.InfoController:1. importjava.util.LinkedList; 2. importjavax.servlet.http.HttpServletRequest; 3. importjavax.servlet.http.HttpServletResponse; 4. importorg.springframework.web.servlet.ModelAndView; 5. importorg.springframework.web.servlet.mvc.Controller; 6. /* 7. *authorAdministrator 8. *这个controller用来向客户端发送执行过程中产生的信息. 9. */ 10. publicclassInfoControllerimplementsController 11.12. publicModelAndViewhandleRequest(HttpServletRequestarg0, 13. HttpServletResponsearg1)throwsException 14. LinkedListlist=(LinkedList)arg0.getSession().getAttribute(infoList); 15. /* 16. *为了模拟延迟效果,这里睡一小会儿. 17. */ 18. Thread.sleep(1000); 19. if(list=null) 20. arg1.getWriter().write(pleasewaitasecond.); 21. returnnull; 22. 23. if(list.size()=0) 24. arg1.getWriter().write(finish); 25. returnnull; 26. 27. /* 28. *linkedList.remove()将取走第一条信息. 29. */ 30. Stringinfo=list.remove(); 31. arg1.getWriter().write(info); 32. returnnull; 33. 34.35. 36.spring配置文件: 1. . 2. 3. 4. .二AJAX级联菜单AJAX级联菜单实例说明 ajax级联菜单，例如，一级菜单选择中国，二级菜单列出中国城市；一级菜单选择美国，二级菜单列出美国城市。数据库脚本 count.sqlDROP TABLE IF EXISTS country;CREATE TABLE country (id int(11) NOT NULL auto_increment,name varchar(50) default NULL,city varchar(50) default NULL,PRIMARY KEY (id) ENGINE=MyISAM DEFAULT CHARSET=utf8;insert into country values(1,中国,沈阳) ;insert into country values(2,中国,北京) ;insert into country values(3,美国,洛杉矶) ;insert into country values(4,美国,纽约) ;DAOpackage edu.syict.www.dao;import java.util.List;import org.hibernate.HibernateException;import org.hibernate.Query;import org.hibernate.Session;import org.hibernate.Transaction;import edu.syict.www.HibernateSessionFactory;public class DBOperator SuppressWarnings(unchecked)public List queryByName(String name)Session session = HibernateSessionFactory.getSession();List list=null ;String hql=SELECT co.city FROM Country AS co WHERE =? ;System.out.println(hql+name);Transaction tx = null;try tx = session.beginTransaction();Query query=session.createQuery(hql) ;query.setString(0, name) ;list=query.list() ;System.out.println(数据库中记录个数:+list.size() ;mit() ; catch (HibernateException e) if (tx != null)tx.rollback();throw e;finallysession.close();return list ;Bean类（Hibernate反向工程）Country.javapackage edu.syict.www.POJO;SuppressWarnings(serial)public class Country implements java.io.Serializable private Integer id;private String name;private String city;public Country() public Country(String name, String city) = name;this.city = city;public Integer getId() return this.id;public void setId(Integer id) this.id = id;public String getName() return ;public void setName(String name) = name;public String getCity() return this.city;public void setCity(String city) this.city = city;Country.hbm.xml JSP页面 My JSP menu.jsp starting pagevar XMLHttpReq; var currentSort; /创建XMLHttpRequest对象 function createXMLHttpRequest() if(window.XMLHttpRequest) /Mozilla 浏览器 XMLHttpReq = new XMLHttpRequest(); else if (window.ActiveXObject) / IE浏览器 try XMLHttpReq = new ActiveXObject(Msxml2.XMLHTTP); catch (e) try XMLHttpReq = new ActiveXObject(Microsoft.XMLHTTP); catch (e) /发送请求函数 function sendRequest(url) createXMLHttpRequest(); XMLHttpReq.open(GET, url, true); XMLHttpReq.onreadystatechange = processResponse;/指定响应函数 XMLHttpReq.send(null); / 发送请求 / 处理返回信息函数 function processResponse() if (XMLHttpReq.readyState = 4) / 判断对象状态 if (XMLHttpReq.status = 200) / 信息已经成功返回，开始处理信息XMLHttpReq.status = 200 updateMenu(); else /页面不正常 alert(您所请求的页面有异常。); /更新菜单函数 function updateMenu() var res=XMLHttpReq.responseXML.getElementsByTagName(res) ; /alert(res=+res0.firstChild.nodeValue); /*下面是用innerHTML输出控件内容的一般用法*/ /var subMenu = ; /for(var i = 0; i res.length; i+) / subMenu = subMenu + + resi.firstChild.data + ; / /currentSort.innerHTML = subMenu; var list = document.all.list; list.options.length=0; list.add(new Option(-请选择-,); for(var i=0;ires.length;i+) list.add(new Option(resi.firstChild.nodeValue,resi.firstChild.nodeValue); / 创建级联菜单函数function showSubMenu(obj) /currentSort =document.getElementById(obj); /currentSort.parentNode.style.display = ; sendRequest(menujsp.jsp?sort= + obj); /*下面这一句的作用是：每次选择后回到第一个选项*/ /document.all.mli.options0.selected=true; -bbb-%for(int i=0;ilistname.size();i+)/c=(Country)listname.get(i) ;out.println(+listname.get(i)+) ;%-aaa-%for(int i=0;ilistcity.size();i+)out.println(+listcity.get(i)+) ;% JSP页面后台%response.setContentType(text/xml; charset=UTF-8);response.setHeader(Cache-Control,no-cache);String sort=request.getParameter(sort) ;sort=new String(sort.getBytes(ISO8859-1),GB2312) ;System.out.println(转换编码后sort:+sort) ;DBOperator dbo=new DBOperator() ;List cityes=new ArrayList() ;trycityes=dbo.queryByName(sort) ;catch(Exception e)e.printStackTrace() ;out.println();for(int i=0;icityes.size();i+)out.println(+cityes.get(i).toString()+) ;System.out.println(cityes.get(i) ;out.println();%三中解析文件对XML文件解析配置:先写一个需要解析的XML文件,本例中用TestConfig.xml,其内容如下:REF_COUNTRYCNTRY_ISO_CDCNTRY_CHN_NMCNTRY_ENG_NMCNTRY_ISO_CDCNTRY_CHN_NMCNTRY_ENG_NMREF_AIRPORTAIRPORT_IATA_CDAIRPORT_ENG_NMAIRPORT_CHN_NMAIRPORT_IATA_CDAIRPORT_ENG_NMAIRPORT_CHN_NM新建一个servlet,取名为TestPopConfigServlet,这里要修改其在web.xml文件中注册的内容.如下: TestPopConfigServlet com.icss.caac.pnrdest.servlet.TestPopConfigServlet TestConfigXmlName TestConfig.xml2其中TestConfig.xml是解析的xml文件名,将映射到一个名字TestConfigXmlName,以方便在servlet中取到文件的名字.然后就是编写servlet的内容: (注意,在调用jdom包的类之前需要把这个包导入到工程,主要逻辑在cXmlToMap(String path)函数中实现.)package com.icss.caac.pnrdest.servlet;import java.io.IOException;import java.util.ArrayList;import java.util.HashMap;import java.util.Iterator;import java.util.List;import java.util.Map;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import org.jdom.Document;import org.jdom.Element;import org.jdom.JDOMException;import org.jdom.input.SAXBuilder;import mon.logging.Log;import mon.logging.LogFactory;import mon.util.Constants;public class TestPopConfigServlet extends HttpServlet private static Log log = LogFactory.getLog(Constants.COMMON_CONFIGKEY,TestPopConfigServlet.class); /* * Constructor of the object. */public TestPopConfigServlet() super();/* * Destruction of the servlet. */public void destroy() super.destroy(); public void init() throws ServletException String path = getServletContext().getRealPath(/); String fileName =getInitParameter(TestConfigXmlName);String filePath=path+WEB-INFclasses+fileName;Map map=cXmlToMap(filePath);getServletContext().setAttribute(map,map);log.debug(加载查询配置成功!);private Map cXmlToMap(String path)SAXBuilder sb = new SAXBuilder();Document document=null;Element element=null;String table=null;String name=null;String type=null;String content=null;String searchType=null;List valueList=new ArrayList();List conditionList=new ArrayList();List resultList=new ArrayList();List list=new ArrayList();Iterator it=null;Map map=new HashMap();try document = sb.build(path); catch (JDOMException e) catch (IOException e) Element rootElement = document.getRootElement();Iterator searchIt= rootElement.getChildren(search).iterator();while(searchIt.hasNext()element=(Element) searchIt.next();/查询类型searchType=element.getAttributeValue(type);/读取操作的表table=element.getChild(table).getText(); /循环读取查询条件it=element.getChild(conditions).getChildren(condition).iterator();while(it.hasNext()name=(Element)it.next().getAttributeValue(name);type=(Element)it.next().getAttributeValue(type);content=(Element)it.next().getText();list.add(name);list.add(type);list.add(content);conditionList.add(list); /循环读取查询条件it=element.getChild(results).getChildren(result).iterator();while(it.hasNext()name=(Element)it.next().getAttributeValue(name);type=(Element)it.next().getAttributeValue(type);content=(Element)it.next().getText();list.add(name);list.add(type);list.add(content);resultLis