Question

I am very new to ajax concept,I want to submit a form without refresh the page

ajax

function ajaxFunction() {
  if(xmlhttp) { 
   var txtname = document.getElementById("txtname");
    xmlhttp.open("POST","Listservlet",true);
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("txtname=" + txtname.value);
  }
}

function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       document.fname.message.innerHTML=xmlhttp.responseText;
     }
     else {
        alert("Error during AJAX call. Please try again");
     }
   }
}

JSP

<form name="fname" action="Listservlet" method="post">
<input type="text" name="txtname" id="txtname" />
<input type="button" value="Submit"  onclick="ajaxFunction();" />
<div id="message"></div>
</form>

servlet

public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException {
  String name = null;
  PrintWriter out = response.getWriter();
  if(request.getParameter("txtname") != null) {
   name = request.getParameter("txtname");
  }
                else {
                       name = "";
                }
           out.println("You have successfully made Ajax Call:" + name);
 }

This ajax idea I got from google, bt it is not working,
While clicking on the button,nothing it showing.
Please help me.

Answer 1

replace

 document.fname.message.innerHTML=xmlhttp.responseText;

by

document.getElementById("message").innerHTML=xmlhttp.responseText;