如何在不進行完整服務器往返的情況下在jsf頁面中調用ajax？

Question

我正在寫一個簡單的用戶註冊過程。
我想要做的是，當用戶輸入用戶名時，我想檢查用戶名是否已被其他人佔用。如果是，那麼我想在輸入字段下顯示一條消息，要求用戶選擇一個不同的用戶名。

我已經寫了數據庫查詢/ EJB /休息等等

我想知道的是...
如何撥打電話到後端（EJB/REST）和show屏幕上的消息無需完整往返服務器並刷新整個頁面？

更新1： 我已經改變了我的代碼看起來像從西蒙的例子（不知道爲什麼它沒有出現之前）。

<h:form> 
    <h:panelGrid columns="2"> 
     <h:outputLabel for="username" value="Please enter a user name :" /> 
     <h:inputText id="username" value="#{userNameCheckBean.signInName}" 
      autocomplete="off" size="20" onfocus="blankOut();" required="true" 
      requiredMessage="Error: Username is required." maxlength="25"> 
      <f:ajax execute="@this" render="message" listener="#{userNameCheckBean.verifyIfUsernameIsAlreadyTaken()}" /> 
     </h:inputText> 
     <h:outputText rendered="#{userNameCheckBean.userExists}" id="message" value="#{userNameCheckBean.message}" /> 
    </h:panelGrid> 
    <h:commandButton id="checkUser" action="#{userNameCheckBean.userExists}" value="Check"> 
    </h:commandButton> 
</h:form> 

對我來說，令人困惑的事情是，我如何打電話時的用戶名的inputText失去集中verifyIfUsernameIsAlreadyTaken（）方法？以及如何更新整個表格的位？是否必須有一個命令按鈕提交用戶名字段？我認爲ajax是爲了在後臺進行服務器調用。

更新2： 我已將.xhtml文件更改爲下面給出的文件。我仍然需要點擊按鈕來調用支持bean。它只是無視事件。任何幫助將非常appriciated。

<h:form> 
    <h:panelGrid columns="2"> 
     <h:outputLabel for="username" value="Please enter a user name :" /> 
     <h:inputText id="username" value="#{userNameCheckBean.signInName}" autocomplete="off" size="20" onfocus="blankOut();" required="true" requiredMessage="Error: Username is required." maxlength="25"> 
      <f:ajax execute="@this" event="blur" render="message" listener="#{userNameCheckBean.checkIfUsernameIsAlreadyTaken()}" /> 
     </h:inputText> 
     <h:panelGroup> 
      <h:outputText rendered="#{userNameCheckBean.userExists}" id="message" value="#{userNameCheckBean.message}" /> 
     </h:panelGroup> 
    </h:panelGrid> 
    <h:commandButton id="checkUser" action="#{userNameCheckBean.checkIfUsernameIsAlreadyTaken}" value="Check"> 
    </h:commandButton> 
</h:form> 

更新3： 下面是支持豆，當我點擊按鈕的工作原理。

package co.uk.dakia.beans; 

import java.io.IOException; 
import java.util.logging.Logger; 

import javax.ejb.EJB; 
import javax.faces.bean.ManagedBean; 
import javax.faces.bean.RequestScoped; 
import javax.faces.event.AjaxBehaviorEvent; 
import javax.naming.NamingException; 
import javax.validation.constraints.NotNull; 

import example.UserManager; 
import example.ServiceLocator; 

@ManagedBean 
@RequestScoped 
public class UserNameCheckBean { 

private static Logger logger = Logger.getLogger(UserNameCheckBean.class.getName()); 

@EJB(beanName = "UserManager", mappedName = "jndi:ext://example/UserManagerRemote") 
UserManager userManager; 

String signInName; 

String password; 

String message = "Message: "; 

boolean userExists = false; 

public void checkIfUsernameIsAlreadyTaken(AjaxBehaviorEvent event) throws NamingException, IOException { 
    userManager = (UserManager) ServiceLocator.locateService("UserManagerRemote"); 
    logger.info("Checking if username [" + signInName + "] has already been taken by some other user"); 
    userExists = userManager.userExists(signInName); 
    if(userExists) { 
     message = "Username is already taken!"; 
    } else { 
     message = ""; 
     logger.info("Username [" + signInName + "] is available."); 
    } 
} 

public void checkIfUsernameIsAlreadyTaken() throws NamingException, IOException { 
    checkIfUsernameIsAlreadyTaken(null); 
} 

public String getSignInName() { 
    return signInName; 
} 

public void setSignInName(String signInName) { 
    this.signInName = signInName; 
} 

public String getMessage() throws NamingException, IOException { 
    checkIfUsernameIsAlreadyTaken(); 
    return message; 
} 

public void setMessage(String message) { 
    this.message = message; 
} 

public boolean isUserExists() { 
    return userExists; 
} 

public void setUserExists(boolean userExists) { 
    this.userExists = userExists; 
} 

public String getPassword() { 
    return password; 
} 

public void setPassword(String password) { 
    this.password = password; 
} 
} 

Answer 1

你沒有提供任何代碼，所以很難確切地告訴你該怎麼做，但這裏有一個模板（假設你使用JSF 2）：

.xhtml：

<h:form> 
    ... 
    <h:inputText id="username" value="#{myBean.username}"> 
     <f:ajax execute="@this" render="username-already-taken-wrapper" listener="#{myBean.verifyIfUsernameIsAlreadyTaken()}"/> 
    </h:inputText> 
    <h:panelGroup id="username-already-taken-wrapper"> 
     <h:outputText rendered="#{myBean.usernameAlreadyTaken}" value="Username is already taken!"/> 
    </h:panelGroup> 
    ... 
</h:form> 

MyBean.java：

public void verifyIfUsernameIsAlreadyTaken() 
{ 
    usernameAlreadyTaken = verify(username); 
} 

private boolean verify(String username) 
{ 
    ... 
} 

訣竅是使用AJAX來提交你的只有形式的一部分（在這種情況下：在用戶名），並只刷新頁面的一部分（在這種情況下：username-already-taken-wrapper）。如果用戶名已被佔用，則會顯示該消息。如果不是，則不會顯示。