Untitled

Manipulate Login progress from Servlet -> JavaScript
* the Apache server
* DB on Eclipse
* one index.html file with Javascript
* one servlet

* get a credential information
* send via method of 'Javascript -> servlet' to find out user exist.
* from the Javascript method need to receive DB existence.

* I used 'AJAX', looks to me all same as one of Javascript method that does do for asynchronous with HTML and server.
* from the index.html page, if I press wrong information (id, password) then yes it prompts the message.

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
    String name = request.getParameter("user_id");
    String password = request.getParameter("passwd");
    // search for query user existence
    try
    {
        // TODO session, cookies
        sharedConnection = dataSource.getConnection();
        Statement stmt = sharedConnection.createStatement();
        String str = "select * from customers where email ='" + name + "' and password='" + password + "' ";
        ResultSet rs = stmt.executeQuery(str);
        HttpSession session = request.getSession();

        // not found
        if (!rs.next())
        {
            PrintWriter out = response.getWriter();
            out.println("<h3>credentials invalid</h3>");
        }
        // exist
        else
        {
            String first_name = rs.getString("first_name");
            String last_name = rs.getString("last_name");
            session.setMaxInactiveInterval(1800); //set timeout to 30min
            session.setAttribute("loggedin", true);
            session.setAttribute("name", (first_name+ ", " + last_name));
            response.sendRedirect("/MovieDB/main.html");
        }
    }
    catch(SQLException e)
    {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
}

<script type="text/javascript">
function loadXMLDoc()
{
    var xmlhttp;
    var user_id = document.getElementById('user_id').value;
    var passwd = document.getElementById('passwd').value;

    <!-- newer browser -->
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    <!-- IE 5, 6 -->
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
    {
      if (xmlhttp.readyState==4)
       {
          if (xmlhttp.status==200)
              document.getElementById("state_msg").innerHTML=xmlhttp.responseText;

       }
    }
    <!-- access servlet with parameters -->
    xmlhttp.open("POST", ("LoginServlet?user_id=" + user_id +"&passwd=" + passwd) , true);
    xmlhttp.send();

    <!-- If Servlet don't detour main.html then we must assume error -->
    var err = document.getElementById("state_msg");
    err.style.display = "block";
}

</script>
<title>MovieDB : WebAuth</title>
</head>
<body>
    <h1>FabFlix WebAuth</h1>
    <!-- label user id -->
    <div id=input_info>
        <label for="user_id">User :</label>
    </div>
    <!-- user id -->
    <input type="text" id="user_id" name="user_id" />
    <p></p>
    <!-- password label -->
    <div id=input_info>
        <label for="passwd">Password :</label>
    </div>
    <!-- password -->
    <input type="password" id="passwd" name="passwd" />
    <!-- submit button -->
    <p></p>
    <div id="button_position" align="center">
        <button type="button" onclick="loadXMLDoc()">Login</button>
    </div>
    <div id="state_msg" style="display:none"></div>
</body>

response.sendRedirect("/MovieDB/main.html");

out.println("/MovieDB/main.html");