<?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">
   <h:head>
      <title>Welcome</title>
   </h:head>
   <h:body>
      <h:form prependId="false">
         <h3>Please enter your name and password.</h3>
         <table>
            <tr>
               <td>Name:</td>
               <td><h:inputText value="#{user.name}" id="name"/></td>
            </tr>
            <tr>
               <td>Password:</td>
               <td><h:inputSecret value="#{user.password}" id="password"/></td>
            </tr>
         </table>
         <p><h:commandButton value="Login">
            <f:ajax execute="name password" render="out"/>
         </h:commandButton></p>
         <h3><h:outputText id="out" value="#{user.greeting}"/></h3>
      </h:form>
   </h:body>
</html>

The changes required in index.xhtml are:

Tag Added Tags Identified AJAX Invoked

The h:outputText tag just specifies the value of user.greeting as a string. It it placed in an HTML header tag. 

         <h3><h:outputText id="out" value="#{user.greeting}"/></h3>

When AJAX is invoked you need to specify which tags have data that needs to be sent to the server and which tags need to get updated with data returned by the server. To do this you need to override the identifiers that JSF provides by specifying your own id attributes. 

               <td><h:inputText value="#{user.name}" id="name"/></td>
               <td><h:inputSecret value="#{user.password}" id="password"/></td>
         <h3><h:outputText id="out" value="#{user.greeting}"/></h3>

Invoking AJAX requires using a new tag. This tag is made available in a different namespace from the one used in the login example.

New Namespace New Tag

AJAX functions are defined in a namespace declared at http://java.sun.com/jsf/core. Within index.xhtml these functions are given the "f:" prefix. 

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

Here is the definition of the command button in the login-ajax example. 

         <p><h:commandButton value="Login">
            <f:ajax execute="name password" render="out"/>
         </h:commandButton></p>

Compare this to the definition in the login example. 

         <p><h:commandButton value="Login" action="welcome"/></p>

The f:ajax tag does not create anything to be displayed in the web page. Instead, it specifies actions to be taken when the command button is clicked, replacing the action attribute of the command button tag.