<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax請求servlet實(shí)現(xiàn)用戶名是否存在驗(yàn)證</title>
</head>
<body>

 <script type="text/javascript">

  /** 
   * 得到XMLHttpRequest對象 
   */
  function getajaxHttp() {
   var xmlHttp;
   try {
    // Firefox, Opera 8.0+, Safari 
    xmlHttp = new XMLHttpRequest();
   } catch (e) {
    // Internet Explorer 
    try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
     try {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (e) {
      alert("您的瀏覽器不支持AJAX！");
      return false;
     }
    }
   }
   return xmlHttp;
  }
  /** 
   * 發(fā)送ajax請求 
   * url--請求到服務(wù)器的URL 
   * methodtype(post/get) 
   * con (true(異步)|false(同步)) 
   * functionName(回調(diào)方法名，不需要引號,這里只有成功的時(shí)候才調(diào)用) 
   * (注意：這方法有二個參數(shù)，一個就是xmlhttp,一個就是要處理的對象) 
   */
  function ajaxrequest(url, methodtype, con, functionName) {
   //獲取XMLHTTPRequest對象
   var xmlhttp = getajaxHttp();
   //設(shè)置回調(diào)函數(shù)（響應(yīng)的時(shí)候調(diào)用的函數(shù)）
   xmlhttp.onreadystatechange = function() {
    //這個函數(shù)中的代碼在什么時(shí)候被XMLHTTPRequest對象調(diào)用？
    //當(dāng)服務(wù)器響應(yīng)時(shí)，XMLHTTPRequest對象會自動調(diào)用該回調(diào)方法
    if (xmlhttp.readyState == 4) {
     if (xmlhttp.status == 200) {
      functionName(xmlhttp.responseText);
     }
    }
   };
   //創(chuàng)建請求
   xmlhttp.open(methodtype, url, con);
   //發(fā)送請求
   xmlhttp.send();
  }
  function checkUsername() {
   var username=document.getElementById('username').value;
   //調(diào)用ajax請求Servlet
   ajaxrequest("userServlet?username="+username,"POST",true,ckUsernameResponse);
  }
  function ckUsernameResponse(responseContents){
   if (responseContents=='yes') {
    document.getElementById('usernameMsg').innerHTML="<font color='red'>用戶名存在</font>";
    document.getElementById('username').style="background-color: red";
   }else{
    document.getElementById('usernameMsg').innerHTML="";
    document.getElementById('username').style="background-color: white";
   }
  }

 </script>

 <table>
  <tr>
   <td>用戶名</td>
   <td><input type="text" id="username" onblur="checkUsername()"/></td>
   <td><div id="usernameMsg"></div></td>
  </tr>
  <tr>
   <td>郵箱</td>
   <td><input type="text" id="email" /></td>
   <td><div id="emailMsg"></div></td>
  </tr>
 </table>


</body>
</html>

請求的Servlet代碼如下，UserServlet.java

package cn.bestchance.servlet;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class UserServlet
 */
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;


 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  doPost(request, response);
 }

 /**
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  String username=request.getParameter("username");
  //這里使用ArrayList代替從數(shù)據(jù)庫中查詢數(shù)據(jù)
  ArrayList<String> userList =new ArrayList<String>();
  userList.add("admin");
  userList.add("test");
  userList.add("chance");
  //驗(yàn)證用戶名是否存在
  boolean flag = false;
  for (String string : userList) {
   if(string.equals(username)){
    flag = true;
    break;
   }
  }
  if(flag){//用戶名已存在
   response.getWriter().print("yes");
  }else{//用戶名不存在
   response.getWriter().print("no");
  }
 }

}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: