CODEWITHSUNDEEP
javajavascriptajaxjsp
user3212350
user3212350

Reputation: 401

Cannot set property 'innerHTML' of null. Issue with AJAX (java)

So I want to learn AJAX and I wanted to make identical app like the one in here and I pretty much copied it but it doesn't work. I don't know why, I was trying to solve it on my own but can't find any solution.

My .js file is :

function ajaxAsyncRequest(reqURL) {
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", reqURL, true);
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200) {
            // How to get message
            alert('It\'s K');
            document.getElementById("message").innerHTML = xmlhttp.responseText;
            alert(xmlhttp.responseText);
        } else {
            alert('Something is wrong !');
        }
    }
};
xmlhttp.send(null);
}

The index .jsp is:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
     <input type="button" value="Show Server Time" onclick='ajaxAsyncRequest("getTime")' />
</body>
</html>

and my servlet code is:

import java.io.IOException;
import java.io.PrintWriter;
import java.time.LocalDate;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/getTime")
public class GetTimeServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

/**
 * @see HttpServlet#HttpServlet()
 */
    public GetTimeServlet() {
        super();
    }

/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
    public void doGet (HttpServletRequest request,HttpServletResponse response) 
        throws ServletException, IOException 
    {
        response.setHeader("Cache-Control", "no-cache");
        response.setHeader("Pragma", "no-cache");
        PrintWriter out = response.getWriter();
        LocalDate currentTime= LocalDate.now();
        String message = "Currently time is "+currentTime.toString();
        out.write(message);
    }

/**
 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
 */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    }

}

But when I click on the button I get the message which I pointed in the title in the line document.getElementById("message").innerHTML = xmlhttp.responseText; in .js file. I'm running it through http://localhost:8080/HelloAjax/, so no local, It loads later than the page, so I have no idea what can it be.

Upvotes: 0

Views: 284

Answers (1)

rob
rob

Reputation: 1286

document.getElementById("message") is null because there is no element with id 'message' in the DOM. Try changing your HTML:

<body>
    <div id="message"></div>
     <input type="button" value="Show Server Time" onclick='ajaxAsyncRequest("getTime")' />
</body>

Upvotes: 2

Related Questions