{"id":386,"date":"2010-10-19T18:53:48","date_gmt":"2010-10-19T20:53:48","guid":{"rendered":"http:\/\/www.nextframework.org\/site\/386\/geral\/ajax-utilizando-a-tag-acall"},"modified":"2016-07-23T14:12:19","modified_gmt":"2016-07-23T17:12:19","slug":"ajax-utilizando-a-tag-acall","status":"publish","type":"post","link":"https:\/\/www.nextframework.org\/site\/386\/geral\/ajax-utilizando-a-tag-acall","title":{"rendered":"AJAX utilizando a tag a:call"},"content":{"rendered":"

Esse \u00e9 um tutorial que demonstra algumas utiliza\u00e7\u00f5es para a tag a:call<\/font> do next.
\n<\/p>\n

A tag a:call<\/font> \u00e9 uma tag que monta as fun\u00e7\u00f5es javascript necess\u00e1rias para se fazer chamadas AJAX. <\/p>\n

\n

Chamadas AJAX s\u00e3o basicamente invoca\u00e7\u00f5es de m\u00e9todos no servidor de forma assincrona, onde \u00e9 poss\u00edvel atualizar partes da p\u00e1gina atual ou executar opera\u00e7\u00f5es no servidor sem a necessidadde de recarregar a p\u00e1gina inteira. Isso economiza recursos tanto do servidor quanto do cliente, possibilitando aplica\u00e7\u00f5es mais ricas e ao mesmo tempo mais eficientes. \u00c9 um recurso muito utilizado e d\u00e1 bastante vida as p\u00e1ginas.<\/font><\/p>\n<\/blockquote>\n

Para utilizar a tag a:call<\/font> do next, \u00e9 necess\u00e1rio que seu m\u00f3dulo utilize o arquivo base.jsp. Veja a documenta\u00e7\u00e3o de refer\u00eancia para mais informa\u00e7\u00f5es sobre o base.jsp. Cap\u00edtulo 6 \u2013 MVC.<\/p>\n

O primeiro passo para utilizar a tag, \u00e9 importar a tag lib de ajax. Para isso, adicione no seu JSP o seguinte import.<\/p>\n

<%@ taglib prefix<\/strong>="a" uri<\/strong>="ajax"%><\/strong><\/font><\/p>\n

A taglib ajax possui apenas uma tag call<\/strong><\/font>. Dois atributos dessa tag s\u00e3o obrigat\u00f3rios: <\/font><\/strong><\/p>\n

    \n
  • functionName<\/font><\/strong>, que \u00e9 o nome da fun\u00e7\u00e3o javascript que ser\u00e1 gerada, e que poder\u00e1 ser invocada pelos seus scripts. <\/li>\n
  • action<\/font><\/strong>, que \u00e9 o nome da action no controller que ir\u00e1 receber a chamada.<\/li>\n<\/ul>\n

    A tag call<\/strong><\/font> possui outros 3 atributos, que s\u00e3o opcionais. <\/p>\n

      \n
    • callback<\/font><\/strong>, que \u00e9 o nome da fun\u00e7\u00e3o javascript que ir\u00e1 receber a resposta do servidor. Se desejar voc\u00ea pode escrever uma fun\u00e7\u00e3o personalizada para tratar os dados recebidos. A fun\u00e7\u00e3o de callback padr\u00e3o faz um eval <\/font>do conte\u00fado retornado.<\/li>\n
    • parameters<\/font><\/strong>, que \u00e9 a lista de parametros a ser passada para o servidor. Os par\u00e2metros devem ser especificados na sintaxe de URL, ex: param1=value1&param2=value2.<\/li>\n
    • url<\/font><\/strong>, que \u00e9 a url do controller para onde a chamada deve ser enviada. Se n\u00e3o for informado o controller chamado ser\u00e1 o mesmo que recebeu a requisi\u00e7\u00e3o que renderizou a p\u00e1gina.<\/li>\n<\/ul>\n
        A seguir ser\u00e3o apresentados alguns exemplos de utiliza\u00e7\u00e3o da tag. A vers\u00e3o utilizada para testes dos exemplos \u00e9 a 3.5.1.<\/ul>\n
          <\/ul>\n

          Exemplo 1 \u2013 B\u00e1sico<\/h3>\n

           <\/p>\n

          Nesse exemplo ser\u00e1 mostrada a chamada mais simples de chama AJAX. Ser\u00e1 renderizado um bot\u00e3o que ao ser clicado envia uma requisi\u00e7\u00e3o ao servidor, que devolve um comando alert para o browser. <\/p>\n

          Controller<\/h4>\n

          package<\/strong> controller; <\/font><\/p>\n

          import<\/strong> org.nextframework.controller.Controller;
          import<\/strong> org.nextframework.controller.DefaultAction;
          import<\/strong> org.nextframework.controller.MultiActionController;
          import<\/strong> org.nextframework.view.ajax.View; <\/font><\/p>\n

          @Controller(path="\/modulo\/ajax")
          public class<\/strong> AjaxController extends<\/strong> MultiActionController{ <\/font><\/p>\n

              \/**
               * Action default.
               * Ser\u00e1 chamada pelo browser diretamente para renderizar a p\u00e1gina
               * @return
               *\/
              @DefaultAction
              public<\/strong> String pagina(){
                  return<\/strong> "pagina";
              }
          <\/font><\/p>\n

              public void<\/strong> actionAjax(){
                  \/*
                   * A classe View possui alguns m\u00e9todos para facilitar o envio de informa\u00e7\u00f5es para o cliente.
                   * Basicamente cada comando representa um print na sa\u00edda do response.
                   *\/
                  View.getCurrent().alert("Conte\u00fado AJAX enviado pelo servidor");
              }
          }<\/font><\/p>\n

           <\/h4>\n

          JSP (pagina.jsp)<\/h4>\n

          <%@ taglib prefix="a" uri="ajax"%> <\/p>\n

          Essa \u00e9 a p\u00e1gina que utilizar\u00e1 AJAX. <\/p>\n

          <button onclick="chamarAjax()">Clique para efetuar o AJAX<\/button> <\/p>\n

          <a:call functionName="chamarAjax" action="actionAjax" \/><\/p>\n

           <\/h3>\n

          Exemplo 2 \u2013 Alterando o conte\u00fado do HTML<\/h3>\n

           <\/p>\n

          No segundo exemplo iremos alterar o conte\u00fado de um DIV, com o conte\u00fado enviado pelo servidor. <\/p>\n

          Controller<\/h4>\n

          package<\/strong> controller; <\/font><\/p>\n

          import<\/strong> org.nextframework.controller.Controller;
          import<\/strong> org.nextframework.controller.DefaultAction;
          import<\/strong> org.nextframework.controller.MultiActionController;
          import<\/strong> org.nextframework.view.ajax.View; <\/font><\/p>\n

          @Controller(path="\/modulo\/ajax")
          public class<\/strong> AjaxController extends<\/strong> MultiActionController{ <\/font><\/p>\n

              \/**
               * Action default.
               * Ser\u00e1 chamada pelo browser diretamente para renderizar a p\u00e1gina
               * @return
               *\/
              @DefaultAction
              public<\/strong> String pagina(){
                  return<\/strong> "pagina";
              }
              public void<\/strong> actionAjax(){
                  \/\/o eval s\u00f3 funcionar\u00e1 se a fun\u00e7\u00e3o callback do cliente for
                  \/\/a fun\u00e7\u00e3o default (ou seja, callback n\u00e3o especificado)
                  View
                      .getCurrent()
                      .eval("document.getElementById(‘conteudo’).innerHTML = " +
                              "’Novo conte\u00fado enviado pelo servidor’;")
                      .eval("document.getElementById(‘conteudo’).style.backgroundColor = " +
                              "’#DEDE55′;"); \/\/\u00e9 poss\u00edvel enviar v\u00e1rios comandos
              }
          }<\/font><\/p>\n

           <\/p>\n

          JSP (pagina.jsp)<\/h4>\n

          <%@ taglib prefix="a" uri="ajax"%> <\/font><\/p>\n

          Essa \u00e9 a p\u00e1gina que utilizar\u00e1 AJAX. <\/font><\/p>\n

          <div id="conteudo" style="border:1px solid red">
          Conte\u00fado que ser\u00e1 alterado
          <\/div> <\/font><\/p>\n

          <button onclick="chamarAjax()">Clique para efetuar o AJAX<\/button> <\/font><\/p>\n

          <a:call functionName="chamarAjax" action="actionAjax" \/><\/font><\/p>\n

           <\/p>\n

          Exemplo 3 \u2013 Enviando par\u00e2metros para o servidor<\/h3>\n

           <\/p>\n

          Nesse exemplo \u00e9 mostrado como \u00e9 poss\u00edvel passar par\u00e2metros para o servidor.<\/p>\n

          Controller<\/h4>\n

          package<\/strong> controller; <\/font><\/p>\n

          import<\/strong> org.nextframework.controller.Controller;
          import<\/strong> org.nextframework.controller.DefaultAction;
          import<\/strong> org.nextframework.controller.MultiActionController;
          import<\/strong> org.nextframework.view.ajax.View; <\/font><\/p>\n

          @Controller(path="\/modulo\/ajax")
          public class<\/strong> AjaxController extends<\/strong> MultiActionController{ <\/font><\/p>\n

              @DefaultAction
              public<\/strong> String pagina(){
                  return<\/strong> "pagina";
              }
              public void<\/strong> actionAjax(){
                  \/\/pegamos o parametro enviado pelo cliente para montar a resposta
                  String id = getParameter("id");
                  View
                      .getCurrent()
                      .eval("document.getElementById(‘"+id+"’).innerHTML = " +
                              "’Novo conte\u00fado enviado pelo servidor’;")
                      .eval("document.getElementById(‘"+id+"’).style.backgroundColor = " +
                              "’#DEDE55′;"); \/\/\u00e9 poss\u00edvel enviar v\u00e1rios comandos
              }
          }<\/font><\/p>\n

          JSP (pagina.jsp)<\/h4>\n

          <%@ taglib prefix="a" uri="ajax"%> <\/font><\/p>\n

          Essa \u00e9 a p\u00e1gina que utilizar\u00e1 AJAX. <\/font><\/p>\n

          <div id="conteudo" style="border:1px solid red">
          Conte\u00fado que ser\u00e1 alterado
          <\/div> <\/font><\/p>\n

          <button onclick="chamarAjax()">Clique para efetuar o AJAX<\/button> <\/font><\/p>\n

          <a:call functionName="chamarAjax" action="actionAjax" parameters="id=conteudo"\/><\/font><\/p>\n

           <\/h3>\n

          Exemplo 4 \u2013 Par\u00e2metros Din\u00e2micos<\/h3>\n

           <\/p>\n

          \u00c9 tamb\u00e9m poss\u00edvel montar os par\u00e2metros dinamicamente via c\u00f3digo javascript, para isso utilizaremos uma constru\u00e7\u00e3o especial no atributo parameters. Antes de clicar no bot\u00e3o para chamar o AJAX preencha no input o valor 1, 2 ou 3.<\/p>\n

           <\/p>\n

          Controller<\/h4>\n

          package<\/strong> controller; <\/font><\/p>\n

          import<\/strong> org.nextframework.controller.Controller;
          import<\/strong> org.nextframework.controller.DefaultAction;
          import<\/strong> org.nextframework.controller.MultiActionController;
          import<\/strong> org.nextframework.view.ajax.View; <\/font><\/p>\n

          @Controller(path="\/modulo\/ajax")
          public class<\/strong> AjaxController extends<\/strong> MultiActionController{ <\/font><\/p>\n

              @DefaultAction
              public<\/strong> String pagina(){
                  return "pagina";
              }
              public void<\/strong> actionAjax(){
                  \/\/pegamos o parametro enviado pelo cliente para montar a resposta
                  String id = getParameter("id");
                  View
                      .getCurrent()
                      .eval("document.getElementById(‘"+id+"’).innerHTML = " +
                              "’Novo conte\u00fado enviado pelo servidor’;")
                      .eval("document.getElementById(‘"+id+"’).style.backgroundColor = " +
                              "’#DEDE55′;"); \/\/\u00e9 poss\u00edvel enviar v\u00e1rios comandos
              }
          }<\/font><\/p>\n

           <\/p>\n

          JSP (pagina.jsp)<\/h4>\n

          <%@ taglib prefix="a" uri="ajax"%>
          <%@ taglib prefix="n" uri="next"%> <\/font><\/p>\n

          Essa \u00e9 a p\u00e1gina que utilizar\u00e1 AJAX. <\/font><\/p>\n

          <div id="conteudo1" style="border:1px solid red;">
          Conte\u00fado que ser\u00e1 alterado 1
          <\/div>
          <div id="conteudo2" style="border:1px solid green;">
          Conte\u00fado que ser\u00e1 alterado 2
          <\/div>
          <div id="conteudo3" style="border:1px solid blue;">
          Conte\u00fado que ser\u00e1 alterado 3
          <\/div> <\/font><\/p>\n

          Digite qual conte\u00fado deseja alterar (1, 2 ou 3): <n:input type="integer" value="1" id="numero"\/> <\/font><\/p>\n

          <button onclick="chamarAjax()">Clique para efetuar o AJAX<\/button> <\/font><\/p>\n

          <a:call functionName="chamarAjax" action="actionAjax" parameters="javascript:’id=conteudo’+document.getElementById(‘numero’).value"\/><\/font><\/p>\n

          Tamb\u00e9m \u00e9 poss\u00edvel alterar a montagem dos parametros para delegar a uma fun\u00e7\u00e3o javascript, conforme exemplo:<\/p>\n

          <a:call functionName="chamarAjax" action="actionAjax" parameters="javascript:montarParametros()"\/> <\/font><\/p>\n

          <script type="text\/javascript">
          function montarParametros(){
              return ‘id=conteudo’ +  document.getElementById(‘numero’).value;
          }
          <\/script><\/font><\/p>\n

           <\/p>\n

          Como visto nos exemplos a chamada ajax no servidor \u00e9 feita de forma bem simples. Basicamente a tag a:call monta a fun\u00e7\u00e3o javascript e voc\u00ea apenas chama na sua p\u00e1gina onde for necess\u00e1rio. No servidor a classe View, possui alguns m\u00e9todos utilit\u00e1rios para escrever no response. <\/p>\n","protected":false},"excerpt":{"rendered":"

          Esse \u00e9 um tutorial que demonstra algumas utiliza\u00e7\u00f5es para a tag a:call do next.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-386","post","type-post","status-publish","format-standard","hentry","category-geral"],"_links":{"self":[{"href":"https:\/\/www.nextframework.org\/site\/wp-json\/wp\/v2\/posts\/386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nextframework.org\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nextframework.org\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nextframework.org\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nextframework.org\/site\/wp-json\/wp\/v2\/comments?post=386"}],"version-history":[{"count":2,"href":"https:\/\/www.nextframework.org\/site\/wp-json\/wp\/v2\/posts\/386\/revisions"}],"predecessor-version":[{"id":663,"href":"https:\/\/www.nextframework.org\/site\/wp-json\/wp\/v2\/posts\/386\/revisions\/663"}],"wp:attachment":[{"href":"https:\/\/www.nextframework.org\/site\/wp-json\/wp\/v2\/media?parent=386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nextframework.org\/site\/wp-json\/wp\/v2\/categories?post=386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nextframework.org\/site\/wp-json\/wp\/v2\/tags?post=386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}