title: Why my Ajax call refresh page? (i.e. calling servlet again)
body: <p>I'm studying RESTful web service using Java.
  My environment is using Netbean with GlassFish v3. </p>
  
  <p>I have a page URL <code>/inventoryList</code> which is URL mapped to <code>InventoryApp.java</code> servlet in web.xml</p>
  
  <p><strong>web.xml</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;web-app xmlns="http://java.sun.com/xml/ns/j2ee"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
      version="2.4"&gt;
      &lt;servlet&gt;
          &lt;servlet-name&gt;inventory servlet&lt;/servlet-name&gt;
          &lt;servlet-class&gt;local.test.servlet.InventoryApp&lt;/servlet-class&gt;
      &lt;/servlet&gt;
      &lt;servlet-mapping&gt;
          &lt;servlet-name&gt;inventory servlet&lt;/servlet-name&gt;
          &lt;url-pattern&gt;/inventoryList&lt;/url-pattern&gt;
      &lt;/servlet-mapping&gt;
  &lt;/web-app&gt;
  </code></pre>
  
  <p>In the servlet, it obtains list of inventory item info from DB and display to the JSP page.</p>
  
  <p><strong>inventory.jsp</strong></p>
  
  <pre><code>&lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt;
  &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;JSP Page&lt;/title&gt;
  
          &lt;script type="text/javascript"&gt;
  
          function ajaxGet(inventoryId) {
              alert(inventoryId);
              var xmlHttp = new XMLHttpRequest();
              xmlHttp.onreadystatechange = function() {
  
                  alert('sigh');
  
                  if(xmlHttp.readyState == 4 &amp;&amp; xmlHttp.status == 200) {
                      alert('ready 4');
                      alert('After ready4 ===&gt; ' + xmlHttp.responseText);
  
                      displayInventoryHtml(xmlHttp);
  
                  }
              }
              var url = "resources/inventory/" + inventoryId;
              xmlHttp.open("GET", url, true);
              xmlHttp.send(null);
          }
  
          function displayInventoryHtml(responseAjax) {
              document.getElementById('inventoryItem').innerHTML = responseAjax.responseText;
          }
  
          &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Inventory page&lt;/h1&gt;
  
          &lt;table border="1" cellspacing="1" cellpadding="5"&gt;
              &lt;th&gt;id&lt;/th&gt;
              &lt;th&gt;amount&lt;/th&gt;
              &lt;c:forEach items="${inventoryList}" var="inv" &gt;
                  &lt;tr&gt;
                      &lt;td&gt;${inv.id}&lt;/td&gt;
                      &lt;td&gt;&lt;a href="" onclick="ajaxGet(${inv.id})"&gt;${inv.amount}&lt;/a&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/c:forEach&gt;
          &lt;/table&gt;
          &lt;hr /&gt;
          &lt;div id="inventoryItem"&gt;
          &lt;/div&gt;
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see the <code>inventory.jsp</code> would successfully output the list of inventory item.</p>
  
  <p>So far so good.</p>
  
  <p><strong>Here, I made the output of inventory amount value to be a link to Ajax call.</strong></p>
  
  <pre><code>&lt;td&gt;&lt;a href="" onclick="ajaxGet(${inv.id})"&gt;${inv.amount}&lt;/a&gt;&lt;/td&gt;
  </code></pre>
  
  <p>It calls <code>HTTP GET method</code> and <code>REST service</code> (code shown below) will get inventory data of specified id (database primary id) and I put the Ajax responseText into the div (id=inventoryItem)</p>
  
  <p>InventoryResource.java</p>
  
  <pre><code>package local.test.jaxrs;
  
  import java.util.List;
  import javax.ws.rs.core.Context;
  import javax.ws.rs.core.UriInfo;
  import javax.ws.rs.Consumes;
  import javax.ws.rs.DELETE;
  import javax.ws.rs.PUT;
  import javax.ws.rs.Path;
  import javax.ws.rs.GET;
  import javax.ws.rs.POST;
  import javax.ws.rs.PathParam;
  import javax.ws.rs.Produces;
  import local.test.dao.InventoryDao;
  import local.test.session.Inventory;
  
  @Path("/inventory")
  public class InventoryResource {
      @Context
      private UriInfo context;
  
      /** Creates a new instance of InventoryResource */
      public InventoryResource() {
      }
  
  
      @Path("{inv_id}")
      @GET
      @Produces("text/html")
      public String getJson(@PathParam("inv_id") String inventory_id) {
          System.out.println("GET is being handled");
  
          Inventory invBean = new Inventory(Integer.valueOf(inventory_id));
          InventoryDao invDao = new InventoryDao();
          List&lt;Inventory&gt; inv = invDao.findById(invBean);
  
          String html = "&lt;b&gt;" + inv.get(0).getId() + "&lt;/b&gt;&lt;br /&gt;&lt;b&gt;" + inv.get(0).getAmount() + "&lt;/b&gt;&lt;br /&gt;";
  
          return html;
  
      }
  }//end class
  </code></pre>
  
  <p>When I test this code, everything works just fine. The Ajax successfully get data and insert into the HTML DIV tag and <strong>the inventory data shows up for half second and disappear.</strong></p>
  
  <p>Using <code>firebug</code> and looking at <code>glassfish v3 server log</code>, I figure that at the end, <strong>it is calling InventoryApp.java servlet AGAIN which cause the page to redirect to /inventoryList</strong></p>
  
  <p>I know Ajax is partial request and should not cause page to refresh.</p>
  
  <p>I'm stack in this for few days now, could anyone give me hint what's going on?
  I'm not sure if it is practical to mix servlet and web.xml with REST like I do.</p>
  
  <p>FYI, my <strong>InventoryApp.java servlet code</strong></p>
  
  <pre><code>package local.test.servlet;
  
  import java.io.IOException;
  import java.io.PrintWriter;
  import java.util.ArrayList;
  import java.util.List;
  import javax.servlet.ServletException;
  import javax.servlet.annotation.WebServlet;
  import javax.servlet.http.HttpServlet;
  import javax.servlet.http.HttpServletRequest;
  import javax.servlet.http.HttpServletResponse;
  import local.test.dao.InventoryDao;
  import local.test.session.Inventory;
  
  
  @WebServlet(name="InventoryApp", urlPatterns={"/InventoryApp"})
  public class InventoryApp extends HttpServlet {
  
      /** 
       * Processes requests for both HTTP &lt;code&gt;GET&lt;/code&gt; and &lt;code&gt;POST&lt;/code&gt; methods.
       * @param request servlet request
       * @param response servlet response
       * @throws ServletException if a servlet-specific error occurs
       * @throws IOException if an I/O error occurs
       */
      protected void processRequest(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
          response.setContentType("text/html;charset=UTF-8");
          PrintWriter out = response.getWriter();
          try {
  
          } finally { 
              out.close();
          }
      } 
  
      // &lt;editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code."&gt;
      /** 
       * Handles the HTTP &lt;code&gt;GET&lt;/code&gt; method.
       * @param request servlet request
       * @param response servlet response
       * @throws ServletException if a servlet-specific error occurs
       * @throws IOException if an I/O error occurs
       */
      @Override
      protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  
          InventoryDao invDao = new InventoryDao();
          List&lt;Inventory&gt; invList =  invDao.findAll();
  
          //this list looks ok...
          System.out.println("================= do get servelt ===" + invList.get(0));
  
          request.setAttribute("inventoryList", invList);
          request.getRequestDispatcher("inventory.jsp").forward(request, response);
  
          //processRequest(request, response); //commented not sure what it is..
      } 
  }//end class
  </code></pre>