title: AJAX fetching data from Spring-MVC Controller
body: <p><img src="https://i.stack.imgur.com/P8YGT.png" alt="enter image description here">
  My Controller:</p>
  
  <pre><code>@RequestMapping(value = "jobs")
  public void removeJobs(@RequestParam("username") String username, Model model) {
     String []jobs = jobsFetcher(username);
     model.addAttribute("list", jobs); 
  }
  </code></pre>
  
  <p>My Jsp:</p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%&gt;
  &lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
     &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
     &lt;title&gt;Insert title here&lt;/title&gt;
     &lt;link type="text/css" rel="stylesheet"
  href="&lt;c:url value="public/files/styles/jobManager.css" /&gt;" /&gt;
  
  &lt;script type="text/javascript"&gt;
  function ajaxFunction(username) {
      var xmlhttpReq = crossBrowserAjaxObject();
      if (xmlhttpReq) {
          xmlhttpReq.open("get", "jobs", true);
          xmlhttpReq.onreadystatechange = handleServerResponse(xmlhttpReq);
          xmlhttpReq.setRequestHeader('Content-Type',
                  'application/x-www-form-urlencoded');
          xmlhttpReq.send("username=" + username);
      }
  }
  
  function crossBrowserAjaxObject() {
      var xmlhttp;
      if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp = new XMLHttpRequest();
      } else {// code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      return xmlhttp;
  }
  
  function handleServerResponse(xmlhttpReq) {
      //var xmlhttp = new XMLHttpRequest();
      return function() {
          alert(xmlhttpReq.readyState);
          if (xmlhttpReq.readyState == 4 &amp;&amp; xmlhttpReq.status == 200) {
              alert(xmlhttpReq.responseText); // this is ok
              // HERE HOW DO I GET THE MODEL OBJECT AS A RESPONSE COMMING FROM SERVLET &amp;
              // USE IN MY JSP FILE ?
          }
      };
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;
      &lt;div class="leftDiv"&gt;
          &lt;a href="#" onclick="ajaxFunction('JAMES')"&gt;JAMES&lt;/a&gt; 
          &lt;a href="#" onclick="ajaxFunction('David')"&gt;David&lt;/a&gt; 
          &lt;a href="#" onclick="ajaxFunction('Catrina')"&gt;Catrina&lt;/a&gt; 
          &lt;a href="#" onclick="ajaxFunction('Cathy')"&gt;Cathy&lt;/a&gt; 
          &lt;a href="#" onclick="ajaxFunction('Paul')"&gt;Paul&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="rightDiv"&gt;
          &lt;!-- HOW DO I GET THE JOB LIST &amp; USE IT HERE USING MY AJAX ? --&gt;
          &lt;c:forEach items="???" var="task"&gt;
              &lt;p&gt;${task}&lt;/p&gt;
          &lt;/c:forEach&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now As I have mentioned inside the picture, I want my right div element change when I click the employees without refreshing the whole page. </p>
  
  <p>the only thing which I don't know is when the xmlhttpReq.responseText returns to me, how I'm gonna fetch the modelelement which does carry an Array of jobs using Ajax &amp; use it to render the page... </p>
  
  <p>in another words how I will be able to fetch the parameters coming from my controller after Ajax call &amp; use Ajax itself to make my page ?</p>
  
  <p>Do you any Idea or suggestion or something that can help me go through this ?</p>
  
  <p>( By The way These codes are not yet tested! )</p>