How to use apex:actionFunction and apex:actionStatus in Salesforce Visualforce Page?

How to use apex:actionFunction and apex:actionStatus in visualforce page ?

apex:actionFunction -

It provides support for calling an apex method from JavaScript code using an AJAX request. An <apex:actionFunction> component must be a child of an <apex:form> component. An apex:actionFunction cannot be placed inside an iteration component <apex:pageBlockTable>, <apex:repeat>. [1]

apex:actionStatus -

A component that displays the status of an AJAX update request. An AJAX request can either be in progress or complete. [2]

A snippet of code for the Salesforce Visualforce Page:

<apex:page standardController="Opportunity" showHeader="false" Sidebar="false" extensions="actionfunctionDemo">
    <style>
        .m-top25{margin: 5px 0 10px 0}
        .m-buttom{margin-top: -13px;position: absolute;left: 7.5%;}
        body .order-create-btn{display:block;text-align:left;padding-left:30%}
        body .order-create-btn .btn{display: inline-block;vertical-align: middle;padding: 5px;text-decoration:none;margin-left:7px}
        body .order-create-btn .btnDisabled{display: inline-block;vertical-align: middle;padding: 5px;text-decoration:none ;margin-right:15px}
        .order-create-btn .loading{display: inline-block;vertical-align: middle;}
    </style>
 
    <div class="m-top25"><apex:pageMessages id="errorId" /></div>
    <apex:form id="theform">
        <div class="m-buttom"/> 
        <apex:outputPanel>    
            <span class="order-create-btn">
                <a class="btn" onclick="checkDoubleSubmit(this)" target="_top">Update Opportunity</a>  
                <apex:actionStatus startText="Updating...." id="statusId" styleclass="loading"></apex:actionStatus>
            </span>
        </apex:outputPanel> 
        <apex:actionfunction name="updateOpportunity" action="{!updateOpp}" rerender="theform,errorId" oncomplete="lod({!reloadPage});" status="statusId"/>
        <script>  
            function lod(isReLoad) {
                if(isReLoad == true) {
                    top.location.href="/"+"{!thisOpportunity.Id}";
                }
            }
        </script>
        <script>
            var isClicked = false;
            function checkDoubleSubmit(obj){
                if (isClicked) {
                    alert('Please wait. Updating TRACT....');//For testing message only.
                    return false;
                } else {
                    isClicked = true;
                    obj.className = 'btnDisabled';//only shows the button as disabled.
                    updateOpportunity();
                    return false;
                }
            }
        </script>
    </apex:form>
</apex:page>

A snippet of code for the Salesforce Apex Controller:

public class actionfunctionDemo {
    public Opportunity thisOpportunity{get;set;}
    public boolean reloadPage{get;set;}
    
    public actionfunctionDemo(ApexPages.StandardController controller){
        reloadPage = true;
        thisOpportunity = (Opportunity) controller.getRecord();
    }
    public void updateOpp(){
        thisOpportunity.Name = 'UpdateName';
        try{
            update thisOpportunity;
        }
        catch(Exception ex){
            ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.FATAL, ex.getMessage());
            ApexPages.addMessage(myMsg);    
        }
    }
}

Here are some screenshots which are showing our apex:actionFunction and apex: actionStatus. We have embedded our Visualforce Page in a section on an opportunity. The page will look like below screenshot :

On click of 'Update Opportunity' button, an apex action will call that update the opportunity.

Here is a video that shows the working of apexfunction :

Look into the video before the click of  'Update Opportunity' button the opportunity name was 'Test opportunity' and after a click of the button the name update to 'Update Name'.

Resources:

(1) http://sfdcsrini.blogspot.com/2014/06/how-to-use-apexactionfunction-in.html
(2) https://developer.salesforce.com/forums/?id=906F0000000kCGDIA2