<!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>
ajax课1 源码
原文地址：https://www.cnblogs.com/yingyigongzi/p/9184394.html