JSP + Ajax无法正常工作

Objective: If I type an email id, in the html form it has to send the request to jsp where it does the logic and has to print(in the html form) whether the email is available or not. I have the following code. Please do help me which part I am doing wrong.

CreateAccount.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="emailStore.js"></script>
</head>
<body onload="process()">
    <form name="login">
        <table align="center">
            <tr>
                <td>Email*</td>
                <td><input type="text" name="userinput" id="userinput"/></td>
                <td><div id = "underInput"></div></td>
            </tr>
            <tr>
                <td>Password*</td>
                <td><input type="password" name="pswrd" /></td>
            </tr>
            <tr>
                <td>Repeat Password*</td>
                <td><input type="password" name="pswrd1" /></td>
            </tr>
            <tr>
                <td>First Name*</td>
                <td><input type="text" name="userid" /></td>
            </tr>
            <tr>
                <td>Last Name*</td>
                <td><input type="text" name="userid" /></td>
            </tr>
            <tr>
                <td>Phone Number</td>
                <td><input type="text" name="userid" /></td>
            </tr>
        </table>
        <div style="text-align: center">
            <input type="submit" value="Create Account"/>
        </div>
    </form>

</body>
</html>

The ajax part in a javascript file. emailStore.js

var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequest()
{
    var xmlHttp;

    if(window.ActiveXObject)
    {
        try
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e)
        {
            xmlHttp = false;
        }
    }
    else
    {
        try
        {
            xmlHttp = new ActiveXObject();
        }
        catch(e)
        {
            xmlHttp = false;
        }
    }
    if(!xmlHttp)
    {
        alert("can't create that object");
    }
    else
    {
        return xmlHttp;
    }
}

function process()
{
    if(xmlHttp.readyState==0 || xmlHttp.readyState==4)
    {
        email = encodeURIComponent(document.getElementById("userinput").value);
        xmlHttp.open("GET", "emailStore.jsp?email=" + email, true);
        xml.onreadystatechange = handle.ServerResponse;
        xmlHttp.send(null);
    }
    else
    {
        setTimeout('process()', 1000);
    }
}

function handleServerResponse()
{
    if(xmlHttp.readyState==4)
    {
        if(xmlHttp.status==200)
        {
            xmlResponse = xmlHttp.responseXML;
            xmlDocumentElement = xmlResponse.documentElement;
            message = xmlDocumentElement.firstChild.data;
            document.getElementById("underInput").innerHTML = '<span style = "color:blue">' + message + '</span>';
            setTimeout('process()',1000);
        }
        else
        {
            alert('Something went Wrong');
        }
    }
}

And the logic part in a jsp file- emailStore.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="java.util.ArrayList"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

    <%
        String email = request.getParameter("userinput");
        ArrayList<String> emails = new ArrayList<String>();
        emails.add("something@gmail.com");
        if (emails.contains(email)) {
            out.println("Email already taken!");
        } else {
            out.println("Email available");
        }
    %>

</body>
</html>

I would advise you of the following:

  1. Use library JQuery;
  2. Use Servlet instead of the JSP;
  3. Keep a list in the session;
  4. Do not use a tabular layout. Instead, use div- layers, and cascading style sheets.

Here is a simple example, front- end part is ..

<head>
...
<script>
    $(document).ready(function() {                        
       $('#submit').click(function(event) {  
          var input=$('#userinput').val();
          $.get('ActionServlet',{userinput:input},function(responseText) { 
             $('#underInput').text(responseText);         
          });
        });
    });
</script>
...
</head>
<body>
...
<form id="form1">
...
Email
<input type="text" id="userinput"/>
<input type="button" id="submit" value="Submit"/>
<br/>
<div id="underInput">
</div>
...
</form>
...
</body>
</html>

..and server side -

...
public class ActionServlet extends HttpServlet {
   private static final long serialVersionUID = 1L;

   public ActionServlet() {
      // TODO Auto-generated constructor stub
   }

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      String answer = "Something went Wrong";
      String userinput = request.getParameter("userinput").toString();

      HttpSession httpSession = request.getSession(true);
      if(httpSession.isNew()) {
         httpSession.setAttribute("sessionVar", new ArrayList<String>());
      }

      List<String> arrayList = (ArrayList<String>)httpSession.getAttribute("sessionVar");
      if(userinput != null && !userinput.equals("")) {
         if(arrayList.contains(userinput)) {
            answer = "Email already taken!";
         } else {
            arrayList.add(userinput);
            answer = "Email available";
         }
      }

     response.setContentType("text/plain");  
     response.setCharacterEncoding("UTF-8"); 
     response.getWriter().write(answer); 
   } 
   ...