ajax案例
注册表单之校验用户名是否注册

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>用户名是否被注册</title> <script type="text/javascript"> //创建异步对象 function createXMLHttpRequest() { try { return new XMLHttpRequest();//大多数浏览器 } catch (e) { try { return ActvieXObject("Msxml2.XMLHTTP");//IE6.0 } catch (e) { try { return ActvieObject("Microsoft.XMLHTTP");//IE5.5及更早 } catch (e) { alert("你的浏览器暂不能支持此功能!"); throw e; } } } } window.onload = function(){ //获取文本框,给他们的失去焦点事件注册监听 var userEle = document.getElementById("usernameEle"); userEle.onblur = function(){ //得到异步对象 var xmlHttp = createXMLHttpRequest(); //打开连接 xmlHttp.open("POST","<c:url value='/ValidateUsernameServlet'/>",true); //设置请求头:Conten-Type xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //发送请求,给出请求体 xmlHttp.send("username="+userEle.value); //给xmlHttp的onreadystatechange事件注册监听 xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ //获取服务器的响应 var text = xmlHttp.responseText; if(text == "1"){ //得到span元素 var span = document.getElementById("errorSpan"); span.innerText = "用户名已被注册!"; } } }; }; }; </script> </head> <body> <h1>演示用户是否被注册</h1> <form action="<c:url value='/ValidateUsernameServlet'/> " method="post"> 用户名:<input type="text" name="username" id="usernameEle"><span id="errorSpan"></span><br> 密 码:<input type="text" name="password"><br> <input type="submit" value="注册"> </form> </body> </html>

package cn.cmlx.web.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/ValidateUsernameServlet") public class ValidateUsernameServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); /* * 1.获取参数username * 2.判断是否为cmlx:如果是就响应1,如果不是就响应0 */ String username = request.getParameter("username"); if(username.equals("cmlx")) { response.getWriter().print("1"); }else { response.getWriter().print("0"); } } }
响应内容为xml
省市联动
代码:
china.xml

<?xml version="1.0" encoding="UTF-8"?> <china> <province name="北京"> <city>东城</city> <city>西城</city> <city>崇文</city> <city>宣武</city> <city>朝阳</city> <city>丰台</city> <city>石景山</city> <city>海淀</city> <city>门头沟</city> <city>房山</city> <city>通州</city> <city>顺义</city> <city>昌平</city> <city>大兴</city> <city>平谷</city> <city>怀柔</city> <city>密云</city> <city>延庆</city> </province> <province name="上海"> <city>黄浦</city> <city>卢湾</city> <city>徐汇</city> <city>长宁</city> <city>静安</city> <city>普陀</city> <city>闸北</city> <city>虹口</city> <city>杨浦</city> <city>闵行</city> <city>宝山</city> <city>嘉定</city> <city>浦东</city> <city>金山</city> <city>松江</city> <city>青浦</city> <city>南汇</city> <city>奉贤</city> <city>崇明</city> </province> <province name="天津"> <city>和平</city> <city>东丽</city> <city>河东</city> <city>西青</city> <city>河西</city> <city>津南</city> <city>南开</city> <city>北辰</city> <city>河北</city> <city>武清</city> <city>红挢</city> <city>塘沽</city> <city>汉沽</city> <city>大港</city> <city>宁河</city> <city>静海</city> <city>宝坻</city> <city>蓟县</city> </province> <province name="重庆"> <city>万州</city> <city>涪陵</city> <city>渝中</city> <city>大渡口</city> <city>江北</city> <city>沙坪坝</city> <city>九龙坡</city> <city>南岸</city> <city>北碚</city> <city>万盛</city> <city>双挢</city> <city>渝北</city> <city>巴南</city> <city>黔江</city> <city>长寿</city> <city>綦江</city> <city>潼南</city> <city>铜梁</city> <city>大足</city> <city>荣昌</city> <city>壁山</city> <city>梁平</city> <city>城口</city> <city>丰都</city> <city>垫江</city> <city>武隆</city> <city>忠县</city> <city>开县</city> <city>云阳</city> <city>奉节</city> <city>巫山</city> <city>巫溪</city> <city>石柱</city> <city>秀山</city> <city>酉阳</city> <city>彭水</city> <city>江津</city> <city>合川</city> <city>永川</city> <city>南川</city> </province> <province name="河北"> <city>石家庄</city> <city>邯郸</city> <city>邢台</city> <city>保定</city> <city>张家口</city> <city>承德</city> <city>廊坊</city> <city>唐山</city> <city>秦皇岛</city> <city>沧州</city> <city>衡水</city> </province> <province name="山西"> <city>太原</city> <city>大同</city> <city>阳泉</city> <city>长治</city> <city>晋城</city> <city>朔州</city> <city>吕梁</city> <city>忻州</city> <city>晋中</city> <city>临汾</city> <city>运城</city> </province> <province name="内蒙古"> <city>呼和浩特</city> <city>包头</city> <city>乌海</city> <city>赤峰</city> <city>呼伦贝尔盟</city> <city>阿拉善盟</city> <city>哲里木盟</city> <city>兴安盟</city> <city>乌兰察布盟</city> <city>锡林郭勒盟</city> <city>巴彦淖尔盟</city> <city>鄂市</city> </province> <province name="辽宁"> <city>沈阳</city> <city>大连</city> <city>鞍山</city> <city>抚顺</city> <city>本溪</city> <city>丹东</city> <city>锦州</city> <city>营口</city> <city>阜新</city> <city>辽阳</city> <city>盘锦</city> <city>铁岭</city> <city>朝阳</city> <city>葫芦岛</city> </province> <province name="吉利"> <city>长春</city> <city>吉林</city> <city>四平</city> <city>辽源</city> <city>通化</city> <city>白山</city> <city>松原</city> <city>白城</city> <city>延边</city> </province> <province name="黑龙江"> <city>哈尔滨</city> <city>齐齐哈尔</city> <city>牡丹江</city> <city>佳木斯</city> <city>大庆</city> <city>绥化</city> <city>鹤岗</city> <city>鸡西</city> <city>黑河</city> <city>双鸭山</city> <city>伊春</city> <city>七台河</city> <city>大兴安岭</city> </province> <province name="江苏"> <city>南京</city> <city>镇江</city> <city>苏州</city> <city>南通</city> <city>扬州</city> <city>盐城</city> <city>徐州</city> <city>连云港</city> <city>常州</city> <city>无锡</city> <city>宿迁</city> <city>泰州</city> <city>淮安</city> </province> <province name="浙江"> <city>杭州</city> <city>宁波</city> <city>温州</city> <city>嘉兴</city> <city>湖州</city> <city>绍兴</city> <city>金华</city> <city>衢州</city> <city>舟山</city> <city>台州</city> <city>丽水</city> </province> <province name="安徽"> <city>合肥</city> <city>芜湖</city> <city>蚌埠</city> <city>马鞍山</city> <city>淮北</city> <city>铜陵</city> <city>安庆</city> <city>黄山</city> <city>滁州</city> <city>宿州</city> <city>池州</city> <city>淮南</city> <city>巢湖</city> <city>阜阳</city> <city>六安</city> <city>宣城</city> <city>亳州</city> </province> <province name="福建"> <city>福州</city> <city>厦门</city> <city>莆田</city> <city>三明</city> <city>泉州</city> <city>漳州</city> <city>南平</city> <city>龙岩</city> <city>宁德</city> </province> <province name="江西"> <city>南昌市</city> <city>景德镇</city> <city>九江</city> <city>鹰潭</city> <city>萍乡</city> <city>新馀</city> <city>赣州</city> <city>吉安</city> <city>宜春</city> <city>抚州</city> <city>上饶</city> </province> <province name="山东"> <city>济南</city> <city>青岛</city> <city>淄博</city> <city>枣庄</city> <city>东营</city> <city>烟台</city> <city>潍坊</city> <city>济宁</city> <city>泰安</city> <city>威海</city> <city>日照</city> <city>莱芜</city> <city>临沂</city> <city>德州</city> <city>聊城</city> <city>滨州</city> <city>菏泽</city> </province> <province name="河南"> <city>郑州</city> <city>开封</city> <city>洛阳</city> <city>平顶山</city> <city>安阳</city> <city>鹤壁</city> <city>新乡</city> <city>焦作</city> <city>濮阳</city> <city>许昌</city> <city>漯河</city> <city>三门峡</city> <city>南阳</city> <city>商丘</city> <city>信阳</city> <city>周口</city> <city>驻马店</city> <city>济源</city> </province> <province name="湖北"> <city>武汉</city> <city>鄂州</city> <city>宜昌</city> <city>荆州</city> <city>襄樊</city> <city>黄石</city> <city>荆门</city> <city>黄冈</city> <city>十堰</city> <city>恩施</city> <city>潜江</city> <city>天门</city> <city>仙桃</city> <city>随州</city> <city>咸宁</city> <city>孝感</city> </province> <province name="湖南"> <city>长沙</city> <city>常德</city> <city>株洲</city> <city>湘潭</city> <city>衡阳</city> <city>岳阳</city> <city>邵阳</city> <city>益阳</city> <city>娄底</city> <city>怀化</city> <city>郴州</city> <city>永州</city> <city>湘西</city> <city>张家界</city> </province> <province name="广东"> <city>广州</city> <city>深圳</city> <city>珠海</city> <city>汕头</city> <city>东莞</city> <city>中山</city> <city>佛山</city> <city>韶关</city> <city>江门</city> <city>湛江</city> <city>茂名</city> <city>肇庆</city> <city>惠州</city> <city>梅州</city> <city>汕尾</city> <city>河源</city> <city>阳江</city> <city>清远</city> <city>潮州</city> <city>揭阳</city> <city>云浮</city> </province> <province name="广西"> <city>南宁</city> <city>柳州</city> <city>桂林</city> <city>梧州</city> <city>北海</city> <city>防城港</city> <city>钦州</city> <city>贵港</city> <city>玉林</city> <city>南宁地区</city> <city>柳州地区</city> <city>贺州</city> <city>百色</city> <city>河池</city> </province> <province name="海南"> <city>海口</city> <city>三亚</city> </province> <province name="四川"> <city>成都</city> <city>绵阳</city> <city>德阳</city> <city>自贡</city> <city>攀枝花</city> <city>广元</city> <city>内江</city> <city>乐山</city> <city>南充</city> <city>宜宾</city> <city>广安</city> <city>达川</city> <city>雅安</city> <city>眉山</city> <city>甘孜</city> <city>凉山</city> <city>泸州</city> </province> <province name="贵州"> <city>贵阳</city> <city>六盘水</city> <city>遵义</city> <city>安顺</city> <city>铜仁</city> <city>黔西南</city> <city>毕节</city> <city>黔东南</city> <city>黔南</city> </province> <province name="云南"> <city>昆明</city> <city>大理</city> <city>曲靖</city> <city>玉溪</city> <city>昭通</city> <city>楚雄</city> <city>红河</city> <city>文山</city> <city>思茅</city> <city>西双版纳</city> <city>保山</city> <city>德宏</city> <city>丽江</city> <city>怒江</city> <city>迪庆</city> <city>临沧</city> </province> <province name="西藏"> <city>拉萨</city> <city>日喀则</city> <city>山南</city> <city>林芝</city> <city>昌都</city> <city>阿里</city> <city>那曲</city> </province> <province name="陕西"> <city>西安</city> <city>宝鸡</city> <city>咸阳</city> <city>铜川</city> <city>渭南</city> <city>延安</city> <city>榆林</city> <city>汉中</city> <city>安康</city> <city>商洛</city> </province> <province name="甘肃"> <city>兰州</city> <city>嘉峪关</city> <city>金昌</city> <city>白银</city> <city>天水</city> <city>酒泉</city> <city>张掖</city> <city>武威</city> <city>定西</city> <city>陇南</city> <city>平凉</city> <city>庆阳</city> <city>临夏</city> <city>甘南</city> </province> <province name="宁夏"> <city>银川</city> <city>石嘴山</city> <city>吴忠</city> <city>固原</city> </province> <province name="青海"> <city>西宁</city> <city>海东</city> <city>海南</city> <city>海北</city> <city>黄南</city> <city>玉树</city> <city>果洛</city> <city>海西</city> </province> <province name="新疆"> <city>乌鲁木齐</city> <city>石河子</city> <city>克拉玛依</city> <city>伊犁</city> <city>巴音郭勒</city> <city>昌吉</city> <city>克孜勒苏柯尔克孜</city> <city>博尔塔拉</city> <city>吐鲁番</city> <city>哈密</city> <city>喀什</city> <city>和田</city> <city>阿克苏</city> </province> <province name="香港"> <city>香港</city> </province> <province name="澳门"> <city>澳门</city> </province> <province name="台湾"> <city>台北</city> <city>高雄</city> <city>台中</city> <city>台南</city> <city>屏东</city> <city>南投</city> <city>云林</city> <city>新竹</city> <city>彰化</city> <city>苗栗</city> <city>嘉义</city> <city>花莲</city> <city>桃园</city> <city>宜兰</city> <city>基隆</city> <city>台东</city> <city>金门</city> <city>马祖</city> <city>澎湖</city> </province> <province name="其他"> <city>北美洲</city> <city>南美洲</city> <city>亚洲</city> <city>非洲</city> <city>欧洲</city> <city>大洋洲</city> </province> </china>
Ajax5.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>省市联动</title> <script type="text/javascript"> /* *1.在文档加载完毕时发送请求,得到所有省份名称,显示在<select name="province">中 *2.在选择了新的省份时,发送请求(参数为省名称),得到xml、文档,即<province>元素 解析xml文档,得到其中所有的<city>,在得到每个<city>元素的内容,即市名,使用市名生成<option>,插入到<select name="city">元素中 */ //创建异步对象 function createXMLHttpRequest() { try { return new XMLHttpRequest();//大多数浏览器 } catch (e) { try { return ActvieXObject("Msxml2.XMLHTTP");//IE6.0 } catch (e) { try { return ActvieObject("Microsoft.XMLHTTP");//IE5.5及更早 } catch (e) { alert("你的浏览器暂不能支持此功能!"); throw e; } } } } window.onload = function() { /*ajax四步,qingqiuProvinceServlet,得到所有省份的名称 使用每个省份的名称创建一个<option>元素,添加到<select name="province">中 */ var xmlHttp = createXMLHttpRequest(); xmlHttp.open("GET", "<c:url value='/ProvinceServlet'/>",true); xmlHttp.send(null); xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ //获取服务器的响应 var text = xmlHttp.responseText; //使用逗号分隔它,得到数组 var arr = text.split(","); //循环遍历每个省份的名称,每个名称生成一个option对象,添加到select中 for(var i=0;i<arr.length;i++){ var op = document.createElement("option");//创建一个指名名称元素 op.value = arr[i];//设置op的实际值为当前的省份名称 var textNode = document.createTextNode(arr[i]);//创建文本节点 op.appendChild(textNode);//把文本子节点添加到op元素中,指定其显示值 document.getElementById("p").appendChild(op); } } }; /* 第二件事:给<select name="province">添加改变监听 使用选择的省份名称请求CityServlet,得到<province>元素(xml元素)!!! 获取<province元素所有的<city>元素,遍历之!获取每个<city>的文本内容,即市名称 使用每个市名称创建<optiong>元素,添加到<select name="city"> */ var proSelect = document.getElementById("p"); proSelect.onchange = function(){ var xmlHttp = createXMLHttpRequest(); xmlHttp.open("POST","<c:url value='/CityServlet'/>",true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send("pname="+proSelect.value);//把下拉列表中选择的值发送给服务器! xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState ==4 && xmlHttp.status == 200){ /* 把select中的所有option移除(除了请选择) */ var citySelect = document.getElementById("c"); //获取其所有子元素 var optionEleList = citySelect.getElementsByTagName("option"); //循环遍历每个option元素,然后在citySelect中移除 while(optionEleList.length > 1){//子元素的个数如果大于1就循环,等于1就不循环了! citySelect.removeChild(optionEleList[1]);//总是删除1下标,因为1删除了2就变成1了 } var doc = xmlHttp.responseXML; //得到所有名为city的元素 var cityEleList = doc.getElementsByTagName("city"); for(var i=0;i<cityEleList.length;i++){ var cityEle = cityEleList[i];//得到每个city元素 //获取市名称 var cityName; if(window.addEventListener){//处理浏览器差异 cityName = cityEle.textContent;//支持其他浏览器 }else{ cityName = cityEle.text;//支持IE } //使用市名称创建option元素,添加到<select name="city">中 var op = document.createElement("option"); op.value = cityName; //创建文本节点 var textNode = document.createTextNode(cityName); op.appendChild(textNode);//把文本节点追加到op元素中 //把op添加到<select>元素中 citySelect.appendChild(op); } } }; }; }; </script> </head> <body> <h1>省市联动</h1> <select name="province" id="p"> <option>===请选择省===</option> </select> <select name="city" id="c"> <option>===请选择市===</option> </select> </body> </html>
ProvinceServlet.java

package cn.cmlx.web.servlet; import java.io.IOException; import java.io.InputStream; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.dom4j.Attribute; import org.dom4j.Document; import org.dom4j.DocumentException; import org.dom4j.io.SAXReader; @WebServlet("/ProvinceServlet") public class ProvinceServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); /* * 响应所有省份名称,使用逗号隔开! */ /* * 1.document对象 *创建解析器对象 *调用解析器的读方法,传递一个流对象,得到document */ try { SAXReader reader = new SAXReader(); InputStream input = this.getClass().getResourceAsStream("/china.xml"); Document doc = reader.read(input); /* * 查询所有的province的name属性,得到一堆的属性对象 循环遍历,把所有的属性值连成一个字符串,发送给客户端 */ List<Attribute> arrList = doc.selectNodes("//province/@name");// Xpath查找 StringBuilder sb = new StringBuilder(); for (int i = 0; i < arrList.size(); i++) { sb.append(arrList.get(i).getValue()); if (i < arrList.size() - 1) { sb.append(","); } } response.getWriter().print(sb); } catch (DocumentException e) { throw new RuntimeException(e); } } }
CityServlet.java

package cn.cmlx.web.servlet; import java.io.IOException; import java.io.InputStream; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.dom4j.Document; import org.dom4j.Element; import org.dom4j.io.SAXReader; @WebServlet("/CityServlet") public class CityServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/xml;charset=utf-8"); /* * 获取省份名称,加载该省市的<province>元素 把元素转换成字符串发送给客户端 */ /* * 1.获取省份名称 2.使用省份名称查找到对应的<province>元素 3.把<province>元素转换成字符串,发送 */ try { // 创建SAXReader解析器对象 SAXReader reader = new SAXReader(); InputStream input = this.getClass().getResourceAsStream("/china.xml"); // 调用解析器读方法 Document doc = reader.read(input); /* * 获取参数 */ String pname = request.getParameter("pname");// 获取省份名称 Element proEle = (Element) doc.selectSingleNode("//province[@name='" + pname + "']"); String xmlStr = proEle.asXML();// 把元素转换成字符串 response.getWriter().print(xmlStr); } catch (Exception e) { throw new RuntimeException(e); } } }