Connect database using Ajax?

Question

I want to use Ajax for UserId validation, Can anyone help me out in connecting database?

Here is my JSP page . enter code here

   <script type="text/javascript">

    /* 
   * creates a new XMLHttpRequest object which is the backbone of AJAX, 
  * or returns false if the browser doesn't support it 
  */
   function getXMLHttpRequest() { 
   var xmlHttpReq = false; 
   // to create XMLHttpRequest object in non-Microsoft browsers 
    if (window.XMLHttpRequest) { 
      xmlHttpReq = new XMLHttpRequest(); 
     } else if (window.ActiveXObject) { 
     try { 
      // to create XMLHttpRequest object in later versions 
      // of Internet Explorer 
      xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (exp1) { 
       try { 
        // to create XMLHttpRequest object in older versions 
        // of Internet Explorer 
        xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 
       } catch (exp2) { 
         xmlHttpReq = false; 
       } 
    } 
   } 
   return xmlHttpReq; 
   } 
  /* 
  * AJAX call starts with this function 
   */
  function makeRequest() 
  { 

 var c=document.getElementById("userid").value;
     var xmlHttpRequest = getXMLHttpRequest(); 
    xmlHttpRequest.onreadystatechange = getReadyStateHandler(xmlHttpRequest); 
   xmlHttpRequest.open("POST", "../userid", true); 
   xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-   urlencoded");   
   xmlHttpRequest.send("requestType=ajax&userid="+c); 
    } 

   /* 
   * Returns a function that waits for the state change in XMLHttpRequest 
   */
 function getReadyStateHandler(xmlHttpRequest) { 

   // an anonymous function returned 
   // it listens to the XMLHttpRequest instance 
   return function() { 
    if (xmlHttpRequest.readyState == 4) { 
     if (xmlHttpRequest.status == 200) { 
     document.getElementById("print").innerHTML = xmlHttpRequest.responseText; 
     } else { 
     alert("HTTP error " + xmlHttpRequest.status + ": " + xmlHttpRequest.statusText); 
     } 
    } 
  }; 
 }


    <form  action="<%=application.getContextPath() %>/Login"  method="post"      name="myForm">

  <table>
   <tr>
  <td>UserId</td>
  <td><input type="text" name="userid" id="userid" onblur="makeRequest()" > </td>
   </tr>

   <tr>
   <td>Password</td>
   <td><input type="password" name="password" > </td>
   </tr>

   <tr><td></td>
    <td><input type="submit" name="submit" value="Submit"></td>
   <td><input type="hidden" name="requestType" value="Login"> </td>
  </tr>

  </table>
 </form>
   </script>

Please help me out for this. I require user id validation. If correct userid then it should display name, else display error msg.

Answer 1

To validate user:

• Create a service/dao class with a method that interacts with database and returns boolean type.
• create a Servlet and implement doPost() and use created service/dao class.
• Finally, return true if user found, otherwise false in response.
• In javascript display the message or error based on response from server.

for example:

create UserService class that will be look like:

public class UserService {

        public Connection getConnection() throws SQLException {
            try {
                Class.forName("com.mysql.jdbc.Driver");//register database driver
            } catch (ClassNotFoundException e) {        
                e.printStackTrace();
            }
            return DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "****", "*****");        
        }

        /**
         * Checks a User id is exists in database using given user id<br/>
         * <b>Note:</b> this method closes Connection and PreparedStatement you have passed as parameter
         * @param pStatement A PreparedStatement instance with query to fetch result
         * @return a true if user id found in database, else false returned.         
         */
        public boolean isUserExists(final String userId) {      
            if(userId==null || userId.isEmpty())
                return false;

            //declare required fields
            Connection connection = null;
            ResultSet rSet = null;
            PreparedStatement pstmt = null;
            boolean isExists = false; //set userId exists false initially

            try{
                connection = getConnection(); //get a connection to intract with database.
                //create a PrepareStatement instance to fetch user id from database
                pstmt = connection.prepareStatement("SELECT login FROM users WHERE login=?"); 
                pstmt.setString(1, userId); // set user id which you want to retrieve from DB.
                rSet = pstmt.executeQuery(); //execute the query

                if(rSet.next()){ //check if you got any
                    System.out.printf("User id %s found",rSet.getString(1));
                    isExists = true; //user id exists, set true
                }                   
            }catch(SQLException e){
                e.printStackTrace();
            }finally{
                //close all like: Connection, ResultSet and PreparedStatement etc
                try { if (rSet != null) rSet.close(); } catch (Exception e) {};
                try { if (pstmt != null) pstmt.close(); } catch (Exception e) {};
                try { if (connection != null) connection.close(); } catch (Exception e) {};
            }

            return isExists;
        }
}

and the Servlet will look like:

@WebServlet("/validateUserIdByAjax")
public class ValidateUserIdByAjax extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private UserService userService = new UserService();        

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("doPost() invoked..");
        // Set response content type
        response.setContentType("text/html");       
        // Set encoding
        response.setCharacterEncoding("UTF-8");

        //get user entered id
        String userId = request.getParameter("userid");
        //return userid status 
        response.getWriter().print(userService.isUserExists(userId));                   
    }

}

Then, check response from server and show message in javascript like:

 function getReadyStateHandler(xmlHttpRequest) { 

   // an anonymous function returned 
   // it listens to the XMLHttpRequest instance 
   return function() { 
    if (xmlHttpRequest.readyState == 4) { 
     if (xmlHttpRequest.status == 200) { 
         var $print = document.getElementById("print");
         var res = xmlHttpRequest.responseText;
         console.log('user status: '+res);
         if(res=="true"){
             $print.innerHTML = '<span style="color:red;">user id exists!</span>';
         }else{
             $print.innerHTML = '<span style="color:green;">user id available!</span>';
          } 
     } else { 
     alert("HTTP error " + xmlHttpRequest.status + ": " + xmlHttpRequest.statusText); 
     } 
    } 
  }; 
 }

that's it.

---

Note:

• your AJAX POST url should match your Servlet url-patteren, in my case validateUserIdByAjax is the servlet url-pattern so AJAX url will look like:

  xmlHttpRequest.open("POST", "validateUserIdByAjax", true);.

• and Database driver class should be available in CLASSPATH, in my case i have used mySql so mysql-connector-java.jar is added to CLASSPATH.

_{In your question not have any element by id print, So please add to see the message while using above example, like: <span id="print"></span>}

Answer 2

make a jsp page with database connectivity that will be requested for output.....

in your ajax request send user_id and in jsp page get userid and check it from database ...if available then send true to ajax otherwise false.....

or in ajax response get message result from jsp page...make condition to handle this........