html table refresh using jquery/ajax on search

I have very big page, I will searching using first name, last name, now the page refreshes with user details along with the problem cases he has.

The problem cases section is a simple html table and have from and to date search fields with Search button. On provided from and to dates and on click of Search button, I want to refresh the cases between those dates without refreshing the entire page. Now I am doing it with entire page refresh.

Please help me how should I do with jQuery/ajax without using any external ajax tools. I am using Java/JSP, Struts2. I have everyth开发者_Go百科ing in backend which returns List of objects required. When I am using below code I get the entire html page as result in "data" variable.

        $.ajax({
            type: "POST",
            url: "caseSearch",
            data:"FromDate=" + fromDate,
            dataType: "text/html;charset=utf-8",
            success: function(data) {
                alert(data);
                $("#caseResult").html(data);
            }
        });

• The ajax request can be passed to a servlet. In servlet set the response to xml format.

      response.setContentType("text/xml")
  

• Create PrintWriter

      PrintWriter out= response.getWriter();
  

• In out set the data accessed from database that will be rendered in jsp like

     <Name>x</Name>
     <Gender>male</Gender>
  

• So now the data returned will be in xml format.

• Parse xml using javascript to display appropriately.

  Parsing XML in JavaScript

DWR can also be used for this purpose.

Check this for learning resources for DWR