I'm currently adding a dashboard-like view to my web project, which polls data from OIDs using SNMP. My current step is to use AJAX to reload the page but I'm running into some design issues on that front. Accessing the servlet class on the server will generate hello.jsp, which displays the current values of the OIDs. Once the user clicks the button it will update the div part of the page.
However, I cant figure out how to make sure the div is updated with JUST the new div values. In its current form, the div is filled with the entire html document. How can I make sure the response would be just the div? Is it a problem in the way I call it(sendRequest('GET','servlets'))? Or is it how I set div? (document.getElementById("table").innerHTML = response;)
Im pretty sure its one of those two. I'm a rookie when it comes to AJAX so any help would be nice.
servlet.java
@WebServlet(
name = "servlets",
urlPatterns = {"/servlets"}
)
public class servlets extends HttpServlet {
private static final long serialVersionUID = 1L;
public servlets() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html");
//PrintWriter pw = response.getWriter();
List<String> sa = new ArrayList<String>();
try{
Proto myProto=new Proto();
sa.add(myProto.snmpGet("127.0.0.1", "public", ".1.3.6.1.2.1.1.1.0"));
sa.add(myProto.snmpGet("127.0.0.1", "public", ".1.3.6.1.2.1.1.3.0"));
request.setAttribute("data", sa);
request.getRequestDispatcher("/hello.jsp").forward(request, response);
}catch(Exception e){
System.out.println("Error occurred");
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
}
hello.jsp
<!DOCTYPE html>
<%@page import="main.Proto"%>
<%@page import="devices.snmpObject"%>
<%@page import="devices.device"%>
<%@page import="servlet.servlets"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<html>
<script type="text/javascript" src="ajax.js"></script>
<head><title>Sample JSP Page</title></head>
<body>
<h1>Devices</h1>
<%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %>
<div id = "table">
<table>
<c:forEach items= "${data}" var="s">
<tr>
<td>${s}</td>
</tr>
</c:forEach>
</table>
</div>
<button onclick="javascript:sendRequest('GET','servlets')">Click</button>
</body>
</html>
ajax.jsp
function createRequestObject() {
var req;
if (window.XMLHttpRequest) {
// For Firefox, Safari, Opera
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// For IE 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
// Error for an old browser
alert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera');
}
return req;
}
// Make the XMLHttpRequest Object
var http = createRequestObject();
function sendRequest(method, url) {
if (method == 'get' || method == 'GET') {
http.open(method, url);
http.onreadystatechange = handleResponse;
http.send(null);
}
}
function handleResponse() {
if (http.readyState == 4 && http.status == 200) {
var response = http.responseText;
alert(response);
if (response) {
document.getElementById("table").innerHTML = response;
}
}
function reload() {
window.location.reload();
}
}