AJAX utilizando a tag a:call
Esse é um tutorial que demonstra algumas utilizações para a tag a:call do next.
A tag a:call é uma tag que monta as funções javascript necessárias para se fazer chamadas AJAX.
Chamadas AJAX são basicamente invocações de métodos no servidor de forma assincrona, onde é possível atualizar partes da página atual ou executar operações no servidor sem a necessidadde de recarregar a página inteira. Isso economiza recursos tanto do servidor quanto do cliente, possibilitando aplicações mais ricas e ao mesmo tempo mais eficientes. É um recurso muito utilizado e dá bastante vida as páginas.
Para utilizar a tag a:call do next, é necessário que seu módulo utilize o arquivo base.jsp. Veja a documentação de referência para mais informações sobre o base.jsp. Capítulo 6 – MVC.
O primeiro passo para utilizar a tag, é importar a tag lib de ajax. Para isso, adicione no seu JSP o seguinte import.
<%@ taglib prefix="a" uri="ajax"%>
A taglib ajax possui apenas uma tag call. Dois atributos dessa tag são obrigatórios:
- functionName, que é o nome da função javascript que será gerada, e que poderá ser invocada pelos seus scripts.
- action, que é o nome da action no controller que irá receber a chamada.
A tag call possui outros 3 atributos, que são opcionais.
- callback, que é o nome da função javascript que irá receber a resposta do servidor. Se desejar você pode escrever uma função personalizada para tratar os dados recebidos. A função de callback padrão faz um eval do conteúdo retornado.
- parameters, que é a lista de parametros a ser passada para o servidor. Os parâmetros devem ser especificados na sintaxe de URL, ex: param1=value1¶m2=value2.
- url, que é a url do controller para onde a chamada deve ser enviada. Se não for informado o controller chamado será o mesmo que recebeu a requisição que renderizou a página.
- A seguir serão apresentados alguns exemplos de utilização da tag. A versão utilizada para testes dos exemplos é a 3.5.1.
Exemplo 1 – Básico
Nesse exemplo será mostrada a chamada mais simples de chama AJAX. Será renderizado um botão que ao ser clicado envia uma requisição ao servidor, que devolve um comando alert para o browser.
Controller
package controller;
import org.nextframework.controller.Controller;
import org.nextframework.controller.DefaultAction;
import org.nextframework.controller.MultiActionController;
import org.nextframework.view.ajax.View;
@Controller(path="/modulo/ajax")
public class AjaxController extends MultiActionController{
/**
* Action default.
* Será chamada pelo browser diretamente para renderizar a página
* @return
*/
@DefaultAction
public String pagina(){
return "pagina";
}
public void actionAjax(){
/*
* A classe View possui alguns métodos para facilitar o envio de informações para o cliente.
* Basicamente cada comando representa um print na saída do response.
*/
View.getCurrent().alert("Conteúdo AJAX enviado pelo servidor");
}
}
JSP (pagina.jsp)
<%@ taglib prefix="a" uri="ajax"%>
Essa é a página que utilizará AJAX.
<button onclick="chamarAjax()">Clique para efetuar o AJAX</button>
<a:call functionName="chamarAjax" action="actionAjax" />
Exemplo 2 – Alterando o conteúdo do HTML
No segundo exemplo iremos alterar o conteúdo de um DIV, com o conteúdo enviado pelo servidor.
Controller
package controller;
import org.nextframework.controller.Controller;
import org.nextframework.controller.DefaultAction;
import org.nextframework.controller.MultiActionController;
import org.nextframework.view.ajax.View;
@Controller(path="/modulo/ajax")
public class AjaxController extends MultiActionController{
/**
* Action default.
* Será chamada pelo browser diretamente para renderizar a página
* @return
*/
@DefaultAction
public String pagina(){
return "pagina";
}
public void actionAjax(){
//o eval só funcionará se a função callback do cliente for
//a função default (ou seja, callback não especificado)
View
.getCurrent()
.eval("document.getElementById(‘conteudo’).innerHTML = " +
"’Novo conteúdo enviado pelo servidor’;")
.eval("document.getElementById(‘conteudo’).style.backgroundColor = " +
"’#DEDE55′;"); //é possível enviar vários comandos
}
}
JSP (pagina.jsp)
<%@ taglib prefix="a" uri="ajax"%>
Essa é a página que utilizará AJAX.
<div id="conteudo" style="border:1px solid red">
Conteúdo que será alterado
</div>
<button onclick="chamarAjax()">Clique para efetuar o AJAX</button>
<a:call functionName="chamarAjax" action="actionAjax" />
Exemplo 3 – Enviando parâmetros para o servidor
Nesse exemplo é mostrado como é possível passar parâmetros para o servidor.
Controller
package controller;
import org.nextframework.controller.Controller;
import org.nextframework.controller.DefaultAction;
import org.nextframework.controller.MultiActionController;
import org.nextframework.view.ajax.View;
@Controller(path="/modulo/ajax")
public class AjaxController extends MultiActionController{
@DefaultAction
public String pagina(){
return "pagina";
}
public void actionAjax(){
//pegamos o parametro enviado pelo cliente para montar a resposta
String id = getParameter("id");
View
.getCurrent()
.eval("document.getElementById(‘"+id+"’).innerHTML = " +
"’Novo conteúdo enviado pelo servidor’;")
.eval("document.getElementById(‘"+id+"’).style.backgroundColor = " +
"’#DEDE55′;"); //é possível enviar vários comandos
}
}
JSP (pagina.jsp)
<%@ taglib prefix="a" uri="ajax"%>
Essa é a página que utilizará AJAX.
<div id="conteudo" style="border:1px solid red">
Conteúdo que será alterado
</div>
<button onclick="chamarAjax()">Clique para efetuar o AJAX</button>
<a:call functionName="chamarAjax" action="actionAjax" parameters="id=conteudo"/>
Exemplo 4 – Parâmetros Dinâmicos
É também possível montar os parâmetros dinamicamente via código javascript, para isso utilizaremos uma construção especial no atributo parameters. Antes de clicar no botão para chamar o AJAX preencha no input o valor 1, 2 ou 3.
Controller
package controller;
import org.nextframework.controller.Controller;
import org.nextframework.controller.DefaultAction;
import org.nextframework.controller.MultiActionController;
import org.nextframework.view.ajax.View;
@Controller(path="/modulo/ajax")
public class AjaxController extends MultiActionController{
@DefaultAction
public String pagina(){
return "pagina";
}
public void actionAjax(){
//pegamos o parametro enviado pelo cliente para montar a resposta
String id = getParameter("id");
View
.getCurrent()
.eval("document.getElementById(‘"+id+"’).innerHTML = " +
"’Novo conteúdo enviado pelo servidor’;")
.eval("document.getElementById(‘"+id+"’).style.backgroundColor = " +
"’#DEDE55′;"); //é possível enviar vários comandos
}
}
JSP (pagina.jsp)
<%@ taglib prefix="a" uri="ajax"%>
<%@ taglib prefix="n" uri="next"%>
Essa é a página que utilizará AJAX.
<div id="conteudo1" style="border:1px solid red;">
Conteúdo que será alterado 1
</div>
<div id="conteudo2" style="border:1px solid green;">
Conteúdo que será alterado 2
</div>
<div id="conteudo3" style="border:1px solid blue;">
Conteúdo que será alterado 3
</div>
Digite qual conteúdo deseja alterar (1, 2 ou 3): <n:input type="integer" value="1" id="numero"/>
<button onclick="chamarAjax()">Clique para efetuar o AJAX</button>
<a:call functionName="chamarAjax" action="actionAjax" parameters="javascript:’id=conteudo’+document.getElementById(‘numero’).value"/>
Também é possível alterar a montagem dos parametros para delegar a uma função javascript, conforme exemplo:
<a:call functionName="chamarAjax" action="actionAjax" parameters="javascript:montarParametros()"/>
<script type="text/javascript">
function montarParametros(){
return ‘id=conteudo’ + document.getElementById(‘numero’).value;
}
</script>
Como visto nos exemplos a chamada ajax no servidor é feita de forma bem simples. Basicamente a tag a:call monta a função javascript e você apenas chama na sua página onde for necessário. No servidor a classe View, possui alguns métodos utilitários para escrever no response.
