<!-- Page: -->
<apex:page controller="exampleCon">
    <apex:form>
        <!-- Define the JavaScript function sayHello-->
        <apex:actionFunction name="sayHello" action="{!sayHello}" rerender="out" status="myStatus"/>
    </apex:form>

    <apex:outputPanel id="out">
    <apex:outputText value="Hello "/>
    <apex:actionStatus startText="requesting..." id="myStatus">
        <apex:facet name="stop">{!username}</apex:facet>
    </apex:actionStatus>
    </apex:outputPanel>
            
    <!-- Call the sayHello JavaScript function using a script element-->
    <script>window.setTimeout(sayHello,2000)</script>
            
    <p><apex:outputText value="Clicked? {!state}" id="showstate" /></p> 
            
    <!-- Add the onclick event listener to a panel. When clicked, the panel triggers
    the methodOneInJavascript actionFunction with a param -->
    <apex:outputPanel onclick="methodOneInJavascript('Yes!')" styleClass="btn"> 
        Click Me 
    </apex:outputPanel>
    <apex:form>

    <apex:actionFunction action="{!methodOne}" name="methodOneInJavascript" rerender="showstate">
        <apex:param name="firstParam" assignTo="{!state}" value="" />
    </apex:actionFunction>
    </apex:form>
</apex:page>

/*** Controller ***/
public class exampleCon {
    String uname;

    public String getUsername() {
        return uname;
    }
            
    public PageReference sayHello() {
        uname = UserInfo.getName();
        return null;
    }
            
    public void setState(String n) {
        state = n;
    }
            
    public String getState() {
        return state;
    }
            
    public PageReference methodOne() {
        return null;
    }
            
    private String state = 'no';
}