Olá desenvolvedores, hoje utilizaremos o jQuery para aprendermos load page, isto é, carregamento de página com jQuery. Assim, na página principal, index.jsp crie mais crie mais uma linha e célula implementando um link de acesso a load page.

E dentro da subpasta pages crie a página JSP paginaPai, dessa forma somente estando logado será possível acessá-la. Visto que ao passar pela validação do filtro de acesso, o acesso a todas as páginas dentro desta pasta estará liberado. É como várias páginas de um mesmo sistema. Uma vez estando com a sessão aberta, o usuário poderá, não havendo uma regra de restrição, navegar livremente pelo sistema.

E dentro desta mesma pasta crie também a paginaFilha.jsp, esta página será carregada juntamente com a paginaPai. Faremos esta implementação utilizando Ajax

IMPLEMENTANDO A PÁGINA PAI

Na paginaPai.jsp implementaremos dentro da tag body um botão que chamará o método Javascript de carregamento, o método carregar().

Assim, o que iremos fazer é o load (carregamento) da página filha para dentro da página pai. Porém, é preciso um campo disponível para que a paginaFilha possa ser carregada. Este campo será uma tag div.

A tag <div> é utilizada como uma espécie de container, estruturando um bloco ou uma sessão de um documento HTML. Então, quando o usuário clicar no botão na paginaPai, chamará a função carregar(), e a paginaFilha será carregada para dentro da <div>.

<div id=”mostrarPaginaFilha”></div>

Quando criamos a página capturarExcecao carregamos para dentro dela a biblioteca jQuery, assim, você só precisará fazer um CTRL C + CTRL V nesta biblioteca para dentro da paginaPai.jsp. Ou ainda, poderá também importar o caminho acessando aqui.

FUNÇÃO DE LOAD (CARREGAMENTO)

Assim para invocar o jQuery dentro da função javascript utilizamos o símbolo de cifrão ($). E então indicaremos o local do carregamento informando o id, neste caso, da tag <div>. Assim, invocaremos o método jQuery .load que fará uma requisição Ajax para o carregamento do conteúdo.

EM POUCAS PALAVRAS

De forma simples e rápida implementamos o carregamento de uma página dentro da outra a partir da chamada de função. E existem várias utilidades para este recurso, como exibir um conteúdo somente quando um dado evento ocorrer, ou a partir de um dado evento, por exemplo. Eu fico por aqui e nos vemos no próximo tutorial.