JSF - Ajax

AJAX signifie JavaScript asynchrone et Xml.

Ajax est une technique permettant d'utiliser HTTPXMLObject de JavaScript pour envoyer des données au serveur et recevoir des données du serveur de manière asynchrone. Ainsi en utilisant la technique Ajax, le code javascript échange des données avec le serveur, met à jour des parties de la page Web sans recharger la page entière.

JSF fournit un excellent support pour effectuer des appels ajax. Il fournit une balise f: ajax pour gérer les appels ajax.

Balise JSF

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

Attributs de balise

S. Non Attribut et description
1

disabled

Si vrai, le comportement Ajax sera appliqué à tous les composants parents ou enfants. Si false, le comportement Ajax sera désactivé.

2

Event

L'événement qui invoquera les requêtes Ajax, par exemple "click", "change", "blur", "keypress", etc.

3

Execute

Une liste d'ID séparés par des espaces pour les composants qui doivent être inclus dans la requête Ajax.

4

Immediate

Si les événements de comportement "vrais" générés à partir de ce comportement sont diffusés pendant la phase Appliquer les valeurs de demande. Sinon, les événements seront diffusés lors de la phase d'appel des applications.

5

Listener

Une expression EL pour une méthode dans un bean de support à appeler lors de la requête Ajax.

6

Onerror

Le nom d'une fonction de rappel JavaScript qui sera appelée en cas d'erreur lors de la requête Ajax.

sept

Onevent

Le nom d'une fonction de rappel JavaScript qui sera appelée pour gérer les événements de l'interface utilisateur.

8

Render

Une liste d'ID séparés par des espaces pour les composants qui seront mis à jour après une requête Ajax.

Exemple d'application

Créons une application de test JSF pour tester le composant personnalisé dans JSF.

Étape La description
1 Créez un projet avec un nom helloworld sous un package com.tutorialspoint.test comme expliqué dans le chapitre JSF - Première application .
2 Modifiez le fichier UserData.java comme expliqué ci-dessous.
3 Modifiez home.xhtml comme expliqué ci-dessous. Gardez le reste des fichiers inchangés.
4 Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.
5 Enfin, créez l'application sous la forme d'un fichier war et déployez-la dans Apache Tomcat Webserver.
6 Lancez votre application Web en utilisant l'URL appropriée, comme expliqué ci-dessous à la dernière étape.

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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application comme nous l'avons fait dans le chapitre JSF - Première application. Si tout va bien avec votre application, cela produira le résultat suivant.

Saisissez le nom et appuyez sur le bouton Afficher le message. Vous verrez le résultat suivant sans actualisation de page / soumission de formulaire.