action:function in Salesforce

action:function in Salesforce

Apex Class:
public class IncrementCounter {
    public Integer counter {get;set;}
    public IncrementCounter() {
        counter = 0;
    }
    public void incrementCounterValue() {
        counter = counter + 1;
    }
}
Visualforce Page:
<apex:page controller="IncrementCounter" >
    <script>
        function callActionFunction() {
            CallingApexMethod();
        }
    </script>
    <apex:form >
        <apex:actionFunction name="CallingApexMethod" action="{!incrementCounterValue}" rerender="panel1">
        </apex:actionFunction>
        <apex:outputPanel id="panel1">
            <apex:outputText value="Incrementing Counter : {!Counter}"  id="x" /><br/>
        </apex:outputPanel>
        <apex:commandButton value="Increment" onclick="callActionFunction()" reRender="false"/>
    </apex:form>
</apex:page>
Output: