title: jsp page being overwritten by JSON data being sent from Servlet
body: <p>I am trying to send JSON data to my JSP page from a servlet.
  AS soon as I run the JSP, the whole of JSP gets overwritten by the JSON content. why is this happening? This is part of my JSP page. </p>
  
  <pre><code>    &lt;%@ page import="java.util.ArrayList" %&gt;
      &lt;head&gt;
      &lt;script&gt;
      function populateTypeOfWork(workType) {
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function () {
              if (this.readyState == 4 &amp;&amp; this.status == 200) {
                  var work = JSON.parse(this.responseText);
                  workType.options.length = 0;
                  for (i = 0; i &lt; work.length; i++) {
                      createOption(workType, workDesc[i], workDesc[i]);
                  }
              }
              xhttp.open("GET", "ServletRequest", true);
              xhttp.send();
          }
      }
      function createOption(dropdown, text, value) {
          var x = document.createElement('option');
          x.value = value;
          x.text = text;
          dropdown.options.add(x);
      }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;label&gt;Work Category **&lt;/label&gt;
    &lt;select id="workCategory" 
     onchange="populateTypeOfWork(document.getElementById('workTypeDesc1'))" 
     size=1
      style="width:95%;" required&gt;
    &lt;option value="" selected&gt;Select A Work Category&lt;/option&gt;
     &lt;% ArrayList workCategory = (ArrayList) 
   request.getAttribute("workCategory");
      for (int i = 0; i &lt; workCategory.size(); i++) {
  %&gt;
  &lt;option value="&lt;%=workCategory.get(i)%&gt;"&gt;&lt;%=workCategory.get(i)%&gt;
  &lt;/option&gt;
  &lt;% } %&gt;
  &lt;/select&gt;&amp;nbsp;&lt;br&gt;
  
  &lt;label&gt;Type Of Work **&lt;/label&gt;
  &lt;select id="workTypeDesc1" size=1 style="width:95%;" required&gt;
  &lt;option value="" selected&gt;Type of Work&lt;/option&gt;
  &lt;/select&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Servlet</p>
  
  <pre><code>    String json = new Gson().toJson(arraylistvar);
      res.setContentType("application/json");
      PrintWriter pw = res.getWriter();
      pw.flush();
      pw.close();
      req.setAttribute("viewURL","/page1.jsp");
  </code></pre>
  
  <p>Why does stackoverflow keep asking me to add more details? because its mostly code..?? why should I fill this post unnecessaily?</p>