<!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>Insert title here</title> <script src="./js/my.js"></script> <script src="./js/jquery-1.11.1.js"></script> <script type="text/javascript"> function showCity(proV){ //根据选择的省份去后台查询对应的城市 var xhr=getXhr(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ //nj:南京;yz:扬州 var text=xhr.responseText; var arr=text.split(";"); //["nj:南京","yz:扬州"] //清空上一次城市选项 $("#city").html(""); for(var i=0;i<arr.length;i++){ var value=arr[i].split(":")[0]; var htmlText=arr[i].split(":")[1]; //新疆option var option=new Option(htmlText,value); $("#city").append(option); } } } xhr.open('get','city.do?proV='+proV,true); xhr.send(null); } </script> </head> <body> <select id="pro" onchange="showCity(this.value)"> <option value="1">请选择</option> <option value="js">江苏</option> <option value="ah">安徽</option> </select> <select id="city"></select> </body> </html>
package web; 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; public class ActionServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); //获取请求资源路径 String uri=request.getRequestURI(); //截取 /list String action=uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf(".")); //设置返回的类型 response.setContentType("text/html;charset=utf-8"); //获取输出流 PrintWriter out=response.getWriter(); if("/checkUname".equals(action)){ /* //模拟服务器正在处理中。。。 try { Thread.sleep(3000); } catch (InterruptedException e) { e.printStackTrace(); }*/ /*模拟服务器异常 * if(true){ throw new ServletException("有错啦---"); }*/ //接受用户传入的用户名，判断用户名是否一致 String name=request.getParameter("uname"); System.out.println(name); //假设zs已经被占用 if("zs".equals(name)){ out.print("用户名被占用"); }else{ out.print("用户名可以用"); } }else if("/city".equals(action)){ //获取页面传过来的省份 String proV=request.getParameter("proV"); if("1".equals(proV)){ out.print("-1,请选择省份"); }else if("js".equals(proV)){ //返回江苏的城市 out.print("nj:南京;yz:扬州"); }else if("ah".equals(proV)){ //返回安徽对应的城市 out.print("hf:合肥;wh:芜湖"); } } out.close(); } }
<!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>Insert title here</title> <script src="./js/my.js"></script> <script src="./js/jquery-1.11.1.js"></script> <script > var uflag=false;//默认用户名验证不合法 var pflag=false;//默认密码验证不合法 function check_uname_get(){ //获取ajax对象 var xhr=getXhr(); //注册监听 xhr.onreadystatechange=function (){ //根据服务器返回的数据给页面做处理 if(xhr.readyState==4){ if(xhr.status==200){//服务器正常返回 var text=xhr.responseText; //将text的内容显示在页面上 $("#name_msg").html(text); }else{//服务器返回有异常 $("#name_msg").html("服务器异常，请稍后重试。。。") } }else{//服务器没有返回 $("#name_msg").html("验证中，请稍后。。。") } } //初始化 var url="checkUname.do?uname="+$("[name=uname]").val()+"&"+new Date().getTime(); xhr.open('get',encodeURI(url),true); //真正发送请求 xhr.send(null); } function check_uname_post(){ //获取ajax对象 var xhr=getXhr(); //注册监听 xhr.onreadystatechange=function (){ //根据服务器返回的数据给页面做处理 if(xhr.readyState==4){ //服务器返回的结果显示在页面中 if(xhr.status==200){//服务器正常返回 var text=xhr.responseText; //将text的内容显示在页面上 $("#name_msg").html(text); //如果服务器返回的内容为"用户名可用" //用户名验证结果为true if("用户名可用"==text){ uflag=true; }else{ uflag=false; } }else{//服务器返回有异常 $("#name_msg").html("服务器异常，请稍后重试。。。") } }else{ //服务器没有返回 $("#name_msg").html("验证中，请稍后。。。") } } //初始化 var url="checkUname.do"; xhr.open('post',url,true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //真正发送请求 xhr.send("uname="+$("[name=uname]").val()); } function check_pwd(v){ //密码必须为6位的数字 var reg=/^[0-9]{6}$/; pflag=reg.text(v); } //验证整个表单（必须用户名可用且密码合法） function checkForm(){ return iflag&&pflag; } </script> </head> <body> <form action="registe.do" method="post" onsubmit="return checkForm()"> 用户名：<input name="uname" onblur="check_uname_get()"/> <span id="name_msg" style="color:red"></span><br/> 密码：<input type="password" name="pwd" onblur="check_pwd(this.value)"/> <span id="pwd_msg" style="color:red"></span><br/><br/> <input type="submit" value="注册"/> </form> </body> </html>
<!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>使用ajax对象发送请求</title> <script type="text/javascript" src="./js/my.js"></script> <script type="text/javascript"> //1.获取ajax对象 var xhr=getXhr(); //2.设置监听器 xhr.onreadystatechange=function(){ //5.处理服务器返回的数据 //响应结束时获取服务器返回的数据 if(xhr.readyState==4){ var text=xhr.responseText; alert(text); } }; //3.初始化 xhr.open('get','checkUname.do',true); //4.真正发送 get方法传的就是null xhr.send(null); </script> </head> <body> </body> </html>
function getXhr(){ var xhr=null; if(window.XMLHttpRequest){//浏览器是否有ajax对象 xhr=new XMLHttpRequest(); }else{//低版本ie xhr=new ActiveXObject("Microsoft.XMLHttp"); } return xhr; }
<!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>Insert title here</title> <script type="text/javascript"> function getXhr(){ var xhr=null; if(window.XMLHttpRequest){//浏览器是否有ajax对象 xhr=new XMLHttpRequest(); }else{//低版本ie xhr=new ActiveXObject("Microsoft.XMLHttp"); } alert(xhr); } </script> </head> <body> <a onclick="getXhr()">获取ajax对象</a> </body> </html>
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <servlet-name>ActionServlet</servlet-name> <servlet-class>web.ActionServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ActionServlet</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>