Update JSP chunk via Servlet

Question

I have the following case:

I have an index.jsp file, which has the structure below:

<jsp:include page="templates/header.jspf"/>
<div id="view">
<jsp:include page="home.jspf"/>
</div>
<jsp:include page="templates/footer.jspf"/>

For navigation I call the pages via ajax, and change the content of the div from id="view", through the JS below:

function abrirPag(valor){

    var url = valor;

    xmlRequest.open("GET",url,true);
    xmlRequest.onreadystatechange = mudancaEstado;
    xmlRequest.send(null);
    return url;
}

function mudancaEstado(){
    if (xmlRequest.readyState == 4){
        document.getElementById("view").innerHTML = xmlRequest.responseText;
    }
}

But I have a problem. I have a login form, which accepts login from customers and administrators. After logging in, I would like the system to validate the user type and reload this index.jsp including the corresponding header (it is a header for the uninlogged user, another for clients and another for administrators). I’m not getting through.

I tried to use Requestdispatcher for that, but it didn’t work.

I also tried to call the JS function to reload the page, but it runs independent of the Servlet flow and I can’t know if the user who tried to log in really exists, nor if it is admin or client.

Does anyone know how I could solve this?

Answer 1

One solution would be to create the 3 header structures on the page and make them invisible. You make them visible according to the return coming from Servlet. This return can be a simple json.

Example:

<div class="invisible" id="adm">
<!-- aqui o código para montar o header de adm -->
</div>
<div class="invisible" id="client">
<!-- aqui o código para montar o header de adm -->
</div>
<div class="invisible" id="default">
<!-- aqui o código para montar o header de adm -->
</div>

Then you make an ajax request to Servlet:

$.post("your-domain.com/login", {username: "admin", password: "123admin"}).done(function(retorno){
       var json = JSON.parse(retorno);
       if(json.isAdmin){
          $("#adm").removeClass("invisible");
       } else if(json.isClient) {
          $("#client").removeClass("invisible");
       }
       //continua a logica para não logado também
});

Finally, in Servlet, you return a json if the login was as expected (administrator, client, not logged in)

//Logica de negócio, verifica no banco, bla bla bla
//...
Resultado resultado = new Resultado();
resultado.setIsAdmin(true);
resultado.setIsCliente(false);
resultado.setNaoLogado(false);
Gson gson = new Gson();

response.setContentType("text/html");
response.getWriter().write(gson.toJson(resultado));

This is just one of several solutions you can choose from.

To create JSON from a class, I used Google’s lib called Gson. I also used Jquery to send a post request to Servlet.