apex:actionFunction

1<!-- Page: -->
2<apex:page controller="exampleCon">
3    <apex:form>
4        <!-- Define the JavaScript function sayHello-->
5        <apex:actionFunction name="sayHello" action="{!sayHello}" rerender="out" status="myStatus"/>
6    </apex:form>
7
8    <apex:outputPanel id="out">
9    <apex:outputText value="Hello "/>
10    <apex:actionStatus startText="requesting..." id="myStatus">
11        <apex:facet name="stop">{!username}</apex:facet>
12    </apex:actionStatus>
13    </apex:outputPanel>
14            
15    <!-- Call the sayHello JavaScript function using a script element-->
16    <script>window.setTimeout(sayHello,2000)</script>
17            
18    <p><apex:outputText value="Clicked? {!state}" id="showstate" /></p> 
19            
20    <!-- Add the onclick event listener to a panel. When clicked, the panel triggers
21    the methodOneInJavascript actionFunction with a param -->
22    <apex:outputPanel onclick="methodOneInJavascript('Yes!')" styleClass="btn"> 
23        Click Me 
24    </apex:outputPanel>
25    <apex:form>
26
27    <apex:actionFunction action="{!methodOne}" name="methodOneInJavascript" rerender="showstate">
28        <apex:param name="firstParam" assignTo="{!state}" value="" />
29    </apex:actionFunction>
30    </apex:form>
31</apex:page>
32
33/*** Controller ***/
34public class exampleCon {
35    String uname;
36
37    public String getUsername() {
38        return uname;
39    }
40            
41    public PageReference sayHello() {
42        uname = UserInfo.getName();
43        return null;
44    }
45            
46    public void setState(String n) {
47        state = n;
48    }
49            
50    public String getState() {
51        return state;
52    }
53            
54    public PageReference methodOne() {
55        return null;
56    }
57            
58    private String state = 'no';
59}