Preferred way to with work variable data from a Java-Bean/Servlet and Ajax?

Question

I have an application that displays multiple shapes on the screen based upon the menu item I have selected. As I mentioned in the title, this means that all of my data from my bean is variable.

ie,

item 1: 5 squares, 3 rectangles, and 8 triangles.

item 2: 2 squares, 3 rectangles, and 2 triangles.

What I do is post the data with ajax to my servlet. My servlet knowing that it is "item" will then call a method in my bean which will then read a file on my server, and then return the data.

My question now is, what is the best way to send the data back as a response?

Since I am new to ajax I am not sure of the proper way, but these are the 2 ways I have thought up.

1. I figured the simplest way would be to have a top level div which I would fill up with all of the data each time. In this case I would respond with writing all of the html code out through java, and then passing the response string to ajax, which would then replace the contents of the div. I however find that this method is a bit much especially if I want to change only 1 part of the data (sometimes the shapes are colored, sometimes they have images).

2. The next method would be that I would pass all of the data using JSON, and then would have to loop through each shape, creating new vars and divs, and update as needed. This seems good for little things, and partial updates, but seems like it might be a bit of work.

I am not sure if there are other ways, or if one of mine will work, but I am curious what people think.

EDIT: I did find this example from the Netbeans "My Ajax App" awhile ago which I was learning from. It is kind of a mixture between the 2 above.

https://netbeans.org/kb/docs/web/ajax-quickstart.html

function appendComposer(firstName,lastName,composerId) {

var row;
var cell;
var linkElement;

if (isIE) {
    completeTable.style.display = 'block';
    row = completeTable.insertRow(completeTable.rows.length);
    cell = row.insertCell(0);
} else {
    completeTable.style.display = 'table';
    row = document.createElement("tr");
    cell = document.createElement("td");
    row.appendChild(cell);
    completeTable.appendChild(row);
}

cell.className = "popupCell";

linkElement = document.createElement("a");
linkElement.className = "popupItem";
linkElement.setAttribute("href", "autocomplete?action=lookup&id=" + composerId);
linkElement.appendChild(document.createTextNode(firstName + " " + lastName));
cell.appendChild(linkElement);
}
enter code here
function parseMessages(responseXML) {

// no matches returned
if (responseXML == null) {
    return false;
} else {

    var composers = responseXML.getElementsByTagName("composers")[0];

    if (composers.childNodes.length > 0) {
        completeTable.setAttribute("bordercolor", "black");
        completeTable.setAttribute("border", "1");

        for (loop = 0; loop < composers.childNodes.length; loop++) {
            var composer = composers.childNodes[loop];
            var firstName = composer.getElementsByTagName("firstName")[0];
            var lastName = composer.getElementsByTagName("lastName")[0];
            var composerId = composer.getElementsByTagName("id")[0];
            appendComposer(firstName.childNodes[0].nodeValue,
                lastName.childNodes[0].nodeValue,
                composerId.childNodes[0].nodeValue);
        }
    }
}
}

granted I am now using jquery ajax, this is just an example.

This example shows that I can create a string buffer with the data, and then manipulate it with the javascript. It seems that they just reuse var's and just create new elements in a loop...

It seems it would be easier to use JSON so I think I will do that as well, but I welcome other opinions.

Hmm... Maybe I will have to look into this more, but I would appreciate it if anyone has any other comments...

Thank you for your time,

~Lasagna

Answer 1

Method 2 is the way to go in my opinion. Ideally, you want to only return data from the business layer. Let the presentation layer handles the presentation. So, your Servlet will return the data as JSON, and your JSP/HTML/whatever will process and display it as appropriate.

This also gives you flexibility. Say you decide to build an Android app in the future. In that case, you don't have to change anything in the Servlet. Your app will make the request to the Servlet and get the same JSON data. The app will process and display the data as appropriate.