从Java-Bean / Servlet和Ajax处理工作变量数据的首选方法？

Question

我有一个应用程序，可以根据我选择的菜单项在屏幕上显示多种形状。 就像我在标题中提到的那样，这意味着我来自bean的所有数据都是可变的。

即

项目1：5个正方形，3个矩形和8个三角形。

项目2：2个正方形，3个矩形和2个三角形。

我要做的就是用ajax将数据发布到我的servlet中。 我的servlet知道它是“ item”之后，将在我的bean中调用一个方法，该方法随后将读取服务器上的文件，然后返回数据。

我现在的问题是，将数据作为响应发送回去的最佳方法是什么？

由于我是ajax的新手，所以我不确定正确的方法，但这是我想过的两种方法。

1. 我认为最简单的方法是设置一个顶级div，每次将填充所有数据。 在这种情况下，我将通过Java编写所有html代码，然后将响应字符串传递给ajax进行响应，然后将其替换div的内容。 但是，我发现这种方法有点特别，尤其是如果我只想更改一部分数据（有时形状是彩色的，有时它们有图像）。

2. 下一个方法是我将使用JSON传递所有数据，然后必须遍历每个形状，创建新的var和div，并根据需要进行更新。 这似乎对小事情和部分更新很有用，但是似乎有些工作。

我不确定是否还有其他方法，或者我的方法是否能起作用，但是我很好奇人们的想法。

编辑：我确实从Netbeans的“我的Ajax应用程序”中找到了这个示例，这是我从中学到的。 这是上述两种之间的混合体。

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);
        }
    }
}
}

当然，我现在正在使用jquery ajax，这只是一个例子。

此示例说明，我可以使用数据创建字符串缓冲区，然后使用javascript对其进行操作。 看来他们只是重用var并在循环中创建新元素...

似乎使用JSON会更容易，所以我想我也会这样做，但是我欢迎其他意见。

嗯...也许我将不得不进一步研究，但是如果有人有其他意见，我将不胜感激...

感谢您的时间，

〜烤宽面条

Answer 1

我认为方法2是可行的。 理想情况下，您只想从业务层返回数据。 让演示层处理演示。 因此，您的Servlet将以JSON形式返回数据，并且您的JSP / HTML /将对其进行适当的处​​理和显示。

这也为您提供了灵活性。 假设您决定将来开发一个Android应用。 在这种情况下，您无需更改Servlet中的任何内容。 您的应用程序将向Servlet发出请求，并获取相同的JSON数据。 该应用程序将处理并显示适当的数据。