JSF - Ajax

AJAX significa Asynchronous JavaScript and Xml.

Ajax é uma técnica para usar HTTPXMLObject de JavaScript para enviar dados ao servidor e receber dados do servidor de forma assíncrona. Assim, usando a técnica Ajax, o código javascript troca dados com o servidor, atualiza partes da página da web sem recarregar a página inteira.

JSF fornece excelente suporte para fazer chamadas ajax. Ele fornece a tag f: ajax para lidar com chamadas ajax.

Tag JSF

<f:ajax execute = "input-component-name" render = "output-component-name" />

Atributos de tag

S.Não	Atributo e descrição
1	disabled Se verdadeiro, o comportamento do Ajax será aplicado a qualquer componente pai ou filho. Se for falso, o comportamento do Ajax será desabilitado.
2	Event O evento que invocará solicitações Ajax, por exemplo "clique", "mudança", "desfoque", "pressionamento de tecla" etc.
3	Execute Uma lista de IDs separados por espaço para componentes que devem ser incluídos na solicitação Ajax.
4	Immediate Se "true", os eventos de comportamento gerados a partir desse comportamento são transmitidos durante a fase Aplicar valores de solicitação. Caso contrário, os eventos serão transmitidos durante a fase de Invocação de Aplicativos.
5	Listener Uma expressão EL para um método em um backing bean a ser chamado durante a solicitação Ajax.
6	Onerror O nome de uma função de retorno de chamada JavaScript que será invocada se houver um erro durante a solicitação Ajax.
7	Onevent O nome de uma função de retorno de chamada JavaScript que será chamada para manipular eventos de IU.
8	Render Uma lista de IDs separados por espaço para componentes que serão atualizados após uma solicitação Ajax.

Aplicação de exemplo

Vamos criar um aplicativo JSF de teste para testar o componente personalizado no JSF.

Degrau	Descrição
1	Crie um projeto com o nome helloworld sob um pacote com.tutorialspoint.test conforme explicado no capítulo JSF - Primeira Aplicação .
2	Modifique o arquivo UserData.java conforme explicado abaixo.
3	Modifique home.xhtml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
4	Compile e execute o aplicativo para garantir que a lógica de negócios esteja funcionando de acordo com os requisitos.
5	Por fim, construa o aplicativo na forma de um arquivo war e implante-o no Apache Tomcat Webserver.
6	Inicie seu aplicativo da web usando o URL apropriado, conforme explicado a seguir na última etapa.

UserData.java

package com.tutorialspoint.test;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {
   private static final long serialVersionUID = 1L;
   private String name;
   
   public String getName() {
      return name;
   }
   
   public void setName(String name) {
      this.name = name;
   }

   public String getWelcomeMessage() {
      return "Hello " + name;
   }
}

home.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:tp = "http://java.sun.com/jsf/composite/tutorialspoint">
   
   <h:head>
      <title>JSF tutorial</title>
   </h:head>
   
   <h:body>
      <h2>Ajax Example</h2>
      
      <h:form>
         <h:inputText id = "inputName" value = "#{userData.name}"></h:inputText>
         <h:commandButton value = "Show Message">
            <f:ajax execute = "inputName" render = "outputMessage" />
         </h:commandButton>
         <h2><h:outputText id = "outputMessage"
            value = "#{userData.welcomeMessage != null ?
            userData.welcomeMessage : ''}"
         /></h2>
      </h:form>
   </h:body>
</html>

Assim que você estiver pronto com todas as mudanças feitas, vamos compilar e rodar a aplicação como fizemos no capítulo JSF - Primeira Aplicação. Se tudo estiver bem com sua aplicação, isso produzirá o seguinte resultado.

Digite o nome e pressione o botão Mostrar mensagem. Você verá o seguinte resultado sem atualização de página / envio de formulário.

↰ Previous page Next page ↱