My current project has me accessing a database quite frequently. To do so, I make calls to my Java Servlet through jQuery Get and Post calls. I was wondering if it was better practice to build any HTML using the data I gather from the database within the servlet before I ship it back to the jQuery or if I should do the HTML injecting with JavaScript alone? For example, let’s say I have a database table with a user ID and a username. If I wanted to create a select box off this table, which would be the better way? Or is there even a better way? Would it be better to just try send the rawest form of the data retrieved from the database from the servlet to the JavaScript, allowing it to handle all of the HTML formatting?
Method 1 (Java)
Given the Following HTML/JavaScript
<html>
<head>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.get("servlet?cmd=getUsers", function(data) {
$("#select").html(data);
}, "html");
});
</script>
</head>
<body>
<div id="select"></div>
</body>
</html>
Using The Following Servlet
PrintWriter writer = response.getWriter();
response.setContentType("text/html");
writer.println("<select id='userSelect' name='user'>");
while(resultSet.next()) {
String userId = resultSet.getString("ixUser");
String userName = resultSet.getString("sName");
writer.println("<option value='" + userId + "'>" + userName + "</option>");
}
writer.println("</select>");
Method 2 (JavaScript)
Given the Following HTML/JavaScript
<html>
<head>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.get("servlet?cmd=getUsers", function(data) {
$("#select").html("<select id='userSelect' name='user'>");
$(data).find("user").each(function() {
var id = $(this).find("id").text();
var name = $(this).find("name").text();
$("#userSelect").append("<option value='" + id + "'>" + name + "</option>");
});
$("#select").append("</select>");
}, "xml");
});
</script>
</head>
<body>
<div id="select"></div>
</body>
</html>
Using the Following Servlet
PrintWriter writer = response.getWriter();
response.setContentType("text/xml");
writer.println("<xml>");
while(resultSet.next()) {
String userId = resultSet.getString("ixUser");
String userName = resultSet.getString("sName");
writer.println("<user>");
writer.println("<id>" + userid + "</id>");
writer.println("<name>" + userName + "</name>");
writer.println("</user>");
}
writer.println("</xml>");
I’d opt for sending raw (well, JSON) data to the client and have Javascript take care of the templating. Why?
Separation of concerns: Your server code shouldn’t be aware of the presentation logic.
Less bandwidth: If you can save a few k/request (at least), why not?