Ajax Form Submit GET/POST Methods

This example explains GET and POST methods of form submit using AJAX. Only code is posted for now, will try to update it later some time. Complete example can be downloaded using the link at the end of the post.

package com.rakesh.ex.dto; 

public class EmployeeDTO {
    private String empId;
    private String name, email;
    private String designation, department; 

    public EmployeeDTO(String empId) {
        this.empId = empId;
    } 

    public String getEmpId() {
        return empId;
    } 

    public void setEmpId(String empId) {
        this.empId = empId;
    } 

    public String getName() {
        return name;
    } 

    public void setName(String name) {
        this.name = name;
    } 

    public String getEmail() {
        return email;
    } 

    public void setEmail(String email) {
        this.email = email;
    } 

    public String getDesignation() {
        return designation;
    } 

    public void setDesignation(String designation) {
        this.designation = designation;
    } 

    public String getDepartment() {
        return department;
    } 

    public void setDepartment(String department) {
        this.department = department;
    }
}

package com.rakesh.ex.dao; 

import java.util.ArrayList;
import java.util.List; 

import com.rakesh.ex.dto.EmployeeDTO;

public class EmployeeDAO { 

    /**
     * sample method to get list of employees. This method creates sample list
     * of employees data.
     */
    public List<EmployeeDTO> getEmployees() {
        List<EmployeeDTO> empList = new ArrayList<EmployeeDTO>();
        for (int i=1; i<=10; i++)
            empList.add(createSampleData(i, i%2));
        return empList;
    } 

    private static EmployeeDTO createSampleData(int i, int j) {
        EmployeeDTO emp = new EmployeeDTO(String.valueOf(1000 + i));
        emp.setName("Employee" + i);
        emp.setEmail(emp.getName() + "@company.com");
        emp.setDesignation("Designation" + i);
        emp.setDepartment("Department" + j);
        return emp;
    } 

    /**
     * create dummy employee information. You can replace this method to query the
     * database for actual employee information in your implementation.
     */
    public EmployeeDTO getEmployeeInfo(String empCode) {
        EmployeeDTO emp = new EmployeeDTO(empCode);
        emp.setName("Employee-" + empCode);
        emp.setEmail(emp.getName() + "@company.com");
        emp.setDesignation("Designation" + empCode);
        emp.setDepartment("Department" + empCode);
        return emp;
    }
}

package com.rakesh.ex.web; 

import java.io.IOException; 

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; 

import com.rakesh.ex.dao.EmployeeDAO;
import com.rakesh.ex.dto.EmployeeDTO; 



public class AjaxExample extends HttpServlet {
    private static final long serialVersionUID = -6377586508833712244L; 

    private EmployeeDAO empDAO; 

    @Override
    public void destroy() {
        super.destroy();
        this.empDAO = null;
    } 

    @Override
    public void init() throws ServletException {
        super.init();
        this.empDAO = new EmployeeDAO();
    } 

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        doPost(req, resp);
    } 

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        final String empCode = req.getParameter("empCode");
        // get employee info
        EmployeeDTO empInfo = empDAO.getEmployeeInfo(empCode);
        // set employee list in to request
        req.setAttribute("emp_info", empInfo); 

        // forward to jsp which generates table out of employee list
        req.getRequestDispatcher("emp_info.jsp").forward(req, resp);
        return;
    } 

}

<%@page import="java.util.List" %>
<%@page import="com.rakesh.ex.dto.EmployeeDTO" %>
<%
    EmployeeDTO empInfo = (EmployeeDTO) request.getAttribute("emp_info");
    if (empInfo == null) {
%>
    <p>Could not find employee information!</p>
<%    } else { %>
    <div class="data">Employee ID: <%=empInfo.getEmpId()%></div>
    <div class="data">Name        : <%=empInfo.getName()%></div>
    <div class="data">Email        : <%=empInfo.getEmail()%></div>
    <div class="data">Designation: <%=empInfo.getDesignation()%></div>
    <div class="data">Department    : <%=empInfo.getDepartment()%></div>
<% } %>

(function() {
    AjaxEx = {
        init: function(url, elId) {
            if (!url || !elId) {
                alert("Invalid input!");
                return;
            }
            this.url = url;
            var el = document.getElementById(elId);
            if (!el) {
                alert("Container Element, to place Ajax response doesn't exists!");
                return;
            }
            this.el = el;
            this.sampleHtml = "<p>This will be replaced with AJAX response!</p>";
            // create xml http request object for AJAX requests
            this.xmlHttp = this.initXmlHttp();
        }, // End of init()
        initXmlHttp : function () {
            if (window.XMLHttpRequest)
                // Firefox, Opera, IE7, etc.
                return new XMLHttpRequest();
            if (window.ActiveXObject)
                // IE6, IE5
                return new ActiveXObject("Microsoft.XMLHTTP");
        }, // End of initXmlHttp()
        resetContent : function () {
            this.el.innerHTML = this.sampleHtml;
        }, // End of resetContent()
        sendAjaxRequest : function () {
            // initialize XML Http object if not available
            if (!this.xmlHttp)
                this.xmlHttp = this.initXmlHttp();
            if (this.xmlHttp) {
                var ajaxObj = this;
                this.xmlHttp.onreadystatechange = function() {
                    if (ajaxObj.xmlHttp.readyState==4 && ajaxObj.xmlHttp.status==200) {
                        // 4 = "loaded", 200 = "OK"
                        ajaxObj.el.innerHTML = ajaxObj.xmlHttp.responseText;
                    }
                };
                var selBox = document.getElementById("empCode");
                // prepare parameters
                var empCode = selBox.options[selBox.selectedIndex].value;
                if (empCode == "") {
                    alert("Please select employee code to get employee information!");
                    return;
                }
                var params = "empCode=" + empCode;
                // for multiple parameters separate them by '&' as given below
                // var params = "empCode=E1001&dept=TestDept"
                this.makePOSTRequest(params);
                // this.makeGETRequest(params);
            } else
                alert("Your browser does not support AJAX.");
        }, // End of sendAjaxRequest() 

        makePOSTRequest : function (params) {
            this.xmlHttp.open("POST", this.url, true);
            //Send the proper header information along with the request
            this.xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            this.xmlHttp.setRequestHeader("Content-length", params.length);
            this.xmlHttp.setRequestHeader("Connection", "close");
            this.xmlHttp.send(params);
        }, // End of makePOSTRequest() 

        makeGETRequest : function (params) {
            this.xmlHttp.open("GET", this.url + "?" + params, true);
            this.xmlHttp.send(null);
        } // End of makeGETRequest() 

    } // End of AjaxEx
})();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 

    <title>Simple Ajax Example</title> 

    <script type="text/javascript" src="js/ajax-example.js"></script>
    <style type="text/css">
        body {
            width: 800px;
            height: 600px;
        }
        .top_block {
            text-align: center;
        }
        .top_block input {
            font-weight: bold;
        }
        .ajax_content {
            border: 2px solid #000;
            padding: 2em;
        }
        .data { margin-bottom: 0.5em; }
    </style>
</head>
<body>
    <div class="top_block">
       Select Employee Code: <select id="empCode" name="empCode">
            <option value="">Select</option>
            <option value="E1001">E1001</option>
            <option value="E1002">E1002</option>
            <option value="E1003">E1003</option>
            <option value="E1004">E1004</option>
            <option value="E1005">E1005</option>
            <option value="E1006">E1006</option>
            <option value="E1007">E1007</option>
        </select>
        <input type="button" onclick="javascript:AjaxEx.sendAjaxRequest();" value="Get Data"/>&nbsp;&nbsp;
        <input type="button" onclick="javascript:AjaxEx.resetContent();" value="Reset Content"/>
    </div>
    <div id="ajax_content" class="ajax_content">
        <p>This will be replaced with AJAX response!</p>
    </div>
    <script type="text/javascript">
    <!--
        // view source of this page after it loads in browser
        // and check this variables value
        var url = "<%=request.getContextPath()%>/ajaxServlet";
        AjaxEx.init(url, "ajax_content");
    // -->
    </script>
</body>
</html>

Resources:
Download the Source code.