ajax实例2

最新推荐文章于 2025-04-08 23:58:53 发布

jiangxunta

最新推荐文章于 2025-04-08 23:58:53 发布

阅读量528

点赞数

<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'login.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript">
function createXMLHttpRequest(){
   if(window.XMLHttpRequest){//如果这个对象存在，说明是mozilla浏览器
    //基于mozilla的方式来创建对象
    XMLHttpReq = new XMLHttpRequest();
   }else{
    //IE浏览器
    if(window.ActiveXObject){
     try{
      XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
     }catch(e){
      try{
       XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
      }catch(e){}
     }
    }//if
   }//else
  }//method

  //处理响应的回调函数
  function handleResponse(){
   //判断对象状态
   if(XMLHttpReq.readyState == 4){
    //信息已经成功返回了，下一步要处理信息。
    if(XMLHttpReq.status == 200){
     //说明返回的内容正确了，成功了。下一步就是ajax层判断处理返回结果
     //alert(200);
     var res = XMLHttpReq.responseText;//以XML格式获得响应
     document.getElementById("id1").innerHTML = res;
    }
   }
  }
  //处理响应的回调函数
  function handleResponse1(){
   //判断对象状态
   if(XMLHttpReq.readyState == 4){
    //信息已经成功返回了，下一步要处理信息。
    if(XMLHttpReq.status == 200){
     //说明返回的内容正确了，成功了。下一步就是ajax层判断处理返回结果
     //alert(200);
     var res = XMLHttpReq.responseText;//以XML格式获得响应
     document.getElementById("id2").innerHTML = res;
    }
   }
  }
  //处理响应的回调函数
  function handleResponse2(){
   //判断对象状态
   if(XMLHttpReq.readyState == 4){
    //信息已经成功返回了，下一步要处理信息。
    if(XMLHttpReq.status == 200){
     //说明返回的内容正确了，成功了。下一步就是ajax层判断处理返回结果
     //alert(200);
     var res = XMLHttpReq.responseText;//以XML格式获得响应
     document.getElementById("id3").innerHTML = res;
    }
   }
  }
  //发送请求函数
  function sendRequest(url){
   createXMLHttpRequest();

   XMLHttpReq.open("GET", url, true);//open方法没连服务器，只定义了连接条件
   //写一个函数主动地，不停地到服务器上拿结果
   XMLHttpReq.onreadystatechange = handleResponse;//当服务器状态发生改变时，用一个回调函数来主动的拿结果
   //真正的发送请求。
   XMLHttpReq.send(null);

  }
  function sendRequest1(url){
   createXMLHttpRequest();

   XMLHttpReq.open("GET", url, true);//open方法没连服务器，只定义了连接条件
   //写一个函数主动地，不停地到服务器上拿结果
   XMLHttpReq.onreadystatechange = handleResponse1;//当服务器状态发生改变时，用一个回调函数来主动的拿结果
   //真正的发送请求。
   XMLHttpReq.send(null);

  }
  function sendRequest2(url){
   createXMLHttpRequest();

   XMLHttpReq.open("GET", url, true);//open方法没连服务器，只定义了连接条件
   //写一个函数主动地，不停地到服务器上拿结果
   XMLHttpReq.onreadystatechange = handleResponse2;//当服务器状态发生改变时，用一个回调函数来主动的拿结果
   //真正的发送请求。
   XMLHttpReq.send(null);

  }

  function checkUname(){
   //取得要输入的值
   var uname = document.getElementById("uname").value;
   //把用户名当成请求的一部分发送出去。
   //alert(name);
   sendRequest("checkUnameServlet?uname="+uname);
  }
  function checkPwd(){
   //取得要输入的值
   var pwd = document.getElementById("pwd").value;
   //把密码当成请求的一部分发送出去。
   //alert(name);
   sendRequest1("checkPwdServlet?pwd="+pwd);
  }
  function checkEmail(){
   //取得要输入的值
   var email = document.getElementById("email").value;
   //把邮编当成请求的一部分发送出去。
   //alert(name);
   sendRequest2("checkEmailServlet?email="+email);
  }
</script>
</head>

<body>
<table>
    <tr><td>用户名：</td><td><input type="text" id="uname" onblur="checkUname()"></td><td><div id="id1"></div></td></tr>
   <tr><td>密  码：</td><td><input type="text" id="pwd" onblur="checkPwd()"/></td><td><div id="id2"></div></td></tr>
    <tr><td>email：</td><td><input type="text" id="email" onblur="checkEmail()"></td><td><div id="id3"></div></td></tr>
    </table>
</body>
</html>

checkUnameServlet.java

public class checkUnameServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {

  List<String> list = new ArrayList<String>();
  list.add("z3");list.add("l4");list.add("w5");list.add("z6");
  list.add("ls");list.add("dk");list.add("gmf");list.add("cge");

  String str = request.getParameter("uname");
  response.setContentType("text/xml;charset=UTF-8");
  response.setHeader("Cache-Control", "no-cache");
  PrintWriter out = response.getWriter();
  if(str.length()>0){
   if(list.contains(str)){
    out.println("<font color='red'>该用户名已经存在，请重新输入</font>");
   }else{
    out.println("该用户名可用！");
   }
  }else{
   out.println("<font color='red'>用户名不能为空！</font>");
  }
  out.close();
}

checkPwdServlet.java

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

doGet(request,response);
}

}

public class checkPwdServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

  String str = request.getParameter("pwd");

  response.setContentType("text/xml;charset=UTF-8");
  response.setHeader("Cache-Control", "no-cache");
  PrintWriter out = response.getWriter();
  if(str.length()>=3&&str.length()<=6){
   out.println("密码合法！");
  }else{
   out.println("<font color='red'>密码长度不合法必须为3-6位字母数字组合");
  }
  out.close();
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

doGet(request,response);
}

}

checkEmailServlet.java

public class checkEmailServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

  response.setContentType("text/xml;charset=UTF-8");
  response.setHeader("Cache-Control", "no-cache");
  String str= request.getParameter("email");

  PrintWriter out = response.getWriter();
  if(str.indexOf("@")!=-1){
   out.println("该邮箱名合法！");
  }else{
   out.println("<font color='red'>该邮箱名不合法，缺少@符号</font>");
  }
  out.close();
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

doGet(request,response);
}

}