What is the use of Action Function and how to implement it in a Salesforce Visualforce Page?

Hi,

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>.

Below is a sample snippet of code :

<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>