simple AJAX with jquery

Question

I need to do something rather simple:

I have a servlet that gets a request, then contacts a database, gets the information from it and displays it as an HTML table (so far, all this is working perfectly). This is the command in the servlet:

RequestDispatcher requestDispatcher = req.getRequestDispatcher("index.jsp");
requestDispatcher.forward(req, resp);

index.jsp is where I wrote the HTML and javascript to display the data.

Now, what I need is for that data to be refreshed every 30 seconds or so via AJAX, so that I don't reload the whole page. Also, I should use jquery for this whole operation.

What is the easiest way to do this? I have been looking at some examples around the site, but I haven't managed to get them to work, so I'm posting my own question. I don't need it to be fancy, I just want it to display my table and refresh the data in it every 30 seconds (in case someone put in some new data in the database in the meantime)...

Thank you all! :)

Edit:

Here's the entire code:

public class IndexServlet extends HttpServlet {

    MoodService moodService;

    public IndexServlet() {
        moodService = new MoodService();
    }

    /**
     * Accepts the request and sends it to the dispatcher which takes the database data and presents it as HTML
     */
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<Mood> moodList = moodService.findLastMoods(25); //my way of getting data from database

        req.setAttribute("moodList", moodList);

        RequestDispatcher requestDispatcher =req.getRequestDispatcher("index.jsp");
        requestDispatcher.forward(req, resp);

    }

}

And the index.jsp:

<html>

<head>
    <title>Previous 25 entries:</title>
    <style type="text/css">
        #container {width:1200px; margin-left:auto; margin-right: auto;}
        #tableheader {width:900px; text-align: center;}
     .field {text-align:center; width:300px;}
    </style>




</head>


<body style="background-color: black;">
<div id="container">

    <table border="1" bordercolor="#FFCC00"  width="900" height="80" cellpadding="3" cellspacing="3" style="border-top-left-radius: 15px; border-top-right-radius: 15px; text-align: center; margin-left:auto; margin-right: auto; background-color:#FFFFCC; font-size: 33px; font-family: Monotype Corsiva ">

        <tr>
            <td style="border-top-left-radius: 10px; border-top-right-radius: 10px;">PREVIOUS 25 ENTRIES:</td>
        </tr>

    </table>

    <%
        List<Mood> moodList = (List<Mood>) request.getAttribute("moodList");
        for (Mood mood : moodList) {

            Integer a = mood.getMoodId();
            String moodId = new String();

            switch (a) {

                case 1:
                    moodId = "Happy";
                    break;

                case 2:
                    moodId = "Sad";
                    break;

                case 3:
                    moodId = "Lonely";
                    break;

                case 4:
                    moodId = "Angry";
                    break;

                case 5:
                    moodId = "In Love";
                    break;

                case 6:
                    moodId = "Content";
                    break;
            } %>

    <table id="table" border="1" bordercolor="#FFCC00"  width="900" cellpadding="3" cellspacing="3" style="text-align: center; margin-left:auto; margin-right: auto; background-color:#FFFFCC;">

        <tr>
            <td class="field"> <%=mood.getUserId()%></td>
            <td  class="field"> <%=moodId%></td>
            <%Date date = new Date(mood.getTime());
                SimpleDateFormat sdf = new SimpleDateFormat("dd:MM:yyyy hh:mm:ss");
                String sDate = sdf.format(date);
            %>
            <td  class="field"> <%=sDate%></td>

        </tr>

    </table>
    <%
        }
    %>



</div>
</body>

</html>

Now, I want this whole table part to be reloaded (along with the new data that might have been put into the database) every 30 seconds and displayed as html, readable by the browser.

Rahul P · Answer 1 · 2012-10-18T10:24:24.687

2

Add your jquery ajax code to one of the javascript function say

drawDataTable();

and then set interval for that

setInterval(drawDataTable, 30000); //30 sec

update
again posting exact code which will explain my point more clearly.
Still you don't understand it please post your code first.

<script type="text/javascript">

function drawDataTable(){
 $.ajax({
      url : "NameServlet",
      dataType : 'json',
      error : function(){
      alert("Error Occured");
      },
      success : function(data) {
      //here you will get your data from servlet
      //set data to your table  
      }     
    });
}

setInterval(drawDataTable, 30000);

<script>

edited Oct 18 '12 at 10:24

answered Oct 18 '12 at 10:02

Rahul P

1,065
3
17
32

I have never worked with AJAX, it's all new to me (I'm a beginner at network programming), so I don't know how to use any of it yet. Could you point me to an easy way to do this? – user1549053 Oct 18 '12 at 10:14
I edited my original post so you could see my entire code so far. How do I insert the ajax into all this? (I have literally next to no knowledge of ajax, I'm learning as I go along...) – user1549053 Oct 18 '12 at 10:52

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

As you want to make a request every 30 seconds so your approach to use AJAX is perfect.

You will have to send a dummy request every 30 seconds to the same servlet; and servlet can send back response in JSON format. Ajax call using jquery

Also you can use Jquery(or plain javascript) timer for sending request at regular intervals.

So the way it will work is : browser will send request to the servlet every 30 seconds and after receiving the request; servlet will perform appropriate business logic and then return the response back to client assynchronously.

edited May 23 '17 at 12:27

Community

1
1

answered Oct 18 '12 at 10:14

rai.skumar

10,309
6
39
55

The thing is, it actually has to be AJAX, and not just resending the request normally. I need to reload just the table (even though the whole page IS the table, don't ask... :D ) – user1549053 Oct 18 '12 at 11:26
not necessarly, ideal way to achieve this would be by using reverse AJAX. But i am not sure if reverse ajax is supported by jquery. – rai.skumar Oct 18 '12 at 11:52
No, what I mean, the guy I'm doing this for asked for AJAX specifically, so it has to be that. :) Anyway, how can I implement ajax into my work? I put the entire servlet code here along with the jsp file it forwards, to make things easier and clearer... – user1549053 Oct 18 '12 at 12:17

simple AJAX with jquery

2 Answers2