JSF2.3 ajax – ejemplo
Ajax es una técnica que utiliza HTTPXMLObject de JavaScript para enviar y recibir datos al servidor de forma asíncrona. De este modo, utilizando la técnica Ajax, el código javascript intercambia datos con el servidor, y actualiza partes de la página web sin recargar toda la página.
En JSF 2.x, la etiqueta f:ajax proporciona un excelente soporte para realizar llamadas ajax.
Ejemplo:
CDI Managed Bean EjemploAjax.java
package com.josehuaman.ejemplos;
import java.io.Serializable;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;
@Named
@RequestScoped
public class EjemploAjax implements Serializable {
private static final long serialVersionUID = 1L;
private String nombre;
private String mensajeSalida = "";
public void mensaje() {
if ("".equals(this.nombre)) {
this.mensajeSalida = "";
}
else {
this.mensajeSalida = "Bienvenido " + this.nombre;
}
}
public String getNombre() {
return nombre;
}
public void setNombre(String nombre) {
this.nombre = nombre;
}
public String getMensajeSalida() {
return mensajeSalida;
}
public void setMensajeSalida(String mensajeSalida) {
this.mensajeSalida = mensajeSalida;
}
}
Página JSF con el formulário: ejemploAjax.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Ejemplo JSF2.3 ajax</title>
</h:head>
<h:body>
<h2>Ejemplo JSF2.3 ajax</h2>
<h:form id="form">
<h:outputLabel for="nombre" value="Nombre: "></h:outputLabel>
<h:inputText id="nombre" value="#{ejemploAjax.nombre}"></h:inputText>
<h:commandButton value="Enviar" action="#{ejemploAjax.mensaje()}">
<f:ajax execute="nombre" render="salida"/>
</h:commandButton>
<br/><br/>
<h:outputText id="salida"
value="#{ejemploAjax.mensajeSalida}" />
</h:form>
</h:body>
</html>
Resultado
http://localhost:8080/ejemplo_web_jsf23/ejemploAjax.xhtml
