DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Ajax使用原生態JS驗證用戶名是否存在
Ajax使用原生態JS驗證用戶名是否存在
編輯:關於JavaScript     

直接上代碼:
reg_ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax請求servlet實現用戶名是否存在驗證</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;
    }
    /** 
     * 發送ajax請求 
     * url--請求到服務器的URL 
     * methodtype(post/get) 
     * con (true(異步)|false(同步)) 
     * functionName(回調方法名,不需要引號,這裡只有成功的時候才調用) 
     * (注意:這方法有二個參數,一個就是xmlhttp,一個就是要處理的對象) 
     */
    function ajaxrequest(url, methodtype, con, functionName) {
      //獲取XMLHTTPRequest對象
      var xmlhttp = getajaxHttp();
      //設置回調函數(響應的時候調用的函數)
      xmlhttp.onreadystatechange = function() {
        //這個函數中的代碼在什麼時候被XMLHTTPRequest對象調用?
        //當服務器響應時,XMLHTTPRequest對象會自動調用該回調方法
        if (xmlhttp.readyState == 4) {
          if (xmlhttp.status == 200) {
            functionName(xmlhttp.responseText);
          }
        }
      };
      //創建請求
      xmlhttp.open(methodtype, url, con);
      //發送請求
      xmlhttp.send();
    }
    function checkUsername() {
      var username=document.getElementById('username').value;
      //調用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代替從數據庫中查詢數據
    ArrayList<String> userList =new ArrayList<String>();
    userList.add("admin");
    userList.add("test");
    userList.add("chance");
    //驗證用戶名是否存在
    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");
    }
  }

}


以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved