Hi Lakshman,

 ActionFunction is used to execute a method in your Apex Class from within your Visualforce Page asynchronously via AJAX requests. What does asynchronous AJAX requests mean ? This means that Visualforce Pages(otherwise HTML pages when rendered at the Client Side via the Browser) can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. So when we execute an Apex Method via the ActionFunction, the page is not disturbed and the request to the servers(Apex Code compiles and runs on the Salesforce servers while the Visualforce pages which are nothing but HTML pages are rendered by browser at the Client Side) are sent and received in the background. The other way of doing such AJAX requesst to Apex Methods include the Visualforce Remoting. The only difference between the same is that when using the Visualforce Remoting you will have to write some extra lines of JavaScript which is not needed in case of the ActionFunction.

Now, a very simple and a common example of ActionFunction is mimicking the Field Dependency feature on Visualforce Pages. Say for example you had two Picklists – Select the Object and Select the Field. When a user selects an Object, the next Picklist automatically gets populated with the Fields that belong to the object.

Well, I will not be using this one since that might get a bit complicated with couple of Describe calls but let us consider an another one. For example say you had two Picklists like this- Select the Alphabet(from which you can select from choices like –A, B, C and D) and then a Select the Fruit(from which you can select the fruit of your choice). So when a User selects A, all the Fruits starting with A gets populated in the 2nd picklist and when the User selects B, all the Fruits starting with B gets populated and so on.

public class Controller{
    public List<SelectOption> Alphabets {get; set;}
    public List<SelectOption> Fruits {get; set;}
   
    public String SelectedAlphabet {get; set;}
   
    /*A Constructor which will build the intial list of Alphabets*/
    public Controller(){
        Alphabets = new List<SelectOption>();
        Fruits    = new List<SelectOption>();
       
         /*This is to add the NONE option for our Picklists*/
        SelectOption option = new SelectOption('--None--', '--None--');
        Alphabets.add(option);
        Fruits.add(option);
       
        option = new SelectOption('A', 'A');
        Alphabets.add(option);
       
        option = new SelectOption('B', 'B');
        Alphabets.add(option);       
    }
   
    /*This Method that will actually build the Fruits list for us. The ActionFunction will be calling this function as and when a User changes an Alphabet from the 1st List.*/
    public void createFruitList(){
        /*Always clear the List when begin so that previous values will be removed.*/
        Fruits.clear();
       
        Fruits.add(new SelectOption('--None--', 'None'));
       
        if(SelectedAlphabet == 'A'){
            Fruits.add(new SelectOption('Apple','Apple'));
            Fruits.add(new SelectOption('Apricot','Apricot'));
        }
        else if(SelectedAlphabet == 'B'){
            Fruits.add(new SelectOption('Banana','Banana'));
            Fruits.add(new SelectOption('Blackberry','Blackberry'));
        }
    }
}

 

<apex:page controller="Controller">
    <apex:form>
        <apex:actionFunction action="{!createFruitList}" name="generateFruits" reRender="selFruits" />
        <br/>
        Select the Alphabet:
        <apex:selectList id="selAlphabets" value="{!SelectedAlphabet}" size="1" onchange="generateFruits()">
            <apex:selectOptions value="{!Alphabets}">
            </apex:selectOptions>
        </apex:selectList>
        <br/> 
        Select the Fruit:
        <apex:selectList id="selFruits" size="1">
            <apex:selectOptions value="{!Fruits}">
            </apex:selectOptions>
        </apex:selectList>           
    </apex:form>
</apex:page>

REMOTE ACTION:

@RemoteAction in Visual force page
JavaScript remoting in Visualforce provides support for some methods in Apex controllers to be called via JavaScript.

JavaScript remoting has three parts:
The remote method invocation you add to the Visualforce page, written in JavaScript.
The remote method definition in your Apex controller class. This method definition is written in Apex, but there are few differences from normal action methods.
The response handler callback function you add to or include in your Visualforce page, written in JavaScript.
To use JavaScript remoting in a Visualforce page, add the request as a JavaScript invocation with the following form:

    [namespace.]controller.method(
       [parameters...,]
       callbackFunction,
       [configuration]);
namespace is the namespace of the controller class. This is required if your organization has a namespace defined, or if the class comes from an installed package.
controller is the name of your Apex controller.
method is the name of the Apex method you’re calling.
parameters is the comma-separated list of parameters that your method takes.
callbackFunction is the name of the JavaScript function that will handle the response from the controller. You can also declare an anonymous function inline. callbackFunction receives the status of the method call and the result as parameters.
configuration configures the handling of the remote call and response. Use this to specify whether or not to escape the Apex method’s response. The default value is {escape: true}.

<apex:page controller="sample">
    <script type="text/javascript">
    function getAccountJS() 
    {
        var accountNameJS = document.getElementById('accName').value;        
        sample.getAccount( accountNameJS, 
        function(result, event)
        {
            if (event.status) 
            {
                // demonstrates how to get ID for HTML and Visualforce tags
                document.getElementById("{!$Component.theBlock.thePageBlockSection.theFirstItem.accId}").innerHTML = result.Id;
                document.getElementById("{!$Component.theBlock.thePageBlockSection.theSecondItem.accNam}").innerHTML = result.Name;
            } 
            else if (event.type === 'exception') 
            {
                document.getElementById("errors-js").innerHTML = event.message;
            } else 
            {
                document.getElementById("errors-js").innerHTML = event.message;
            }
        }, {escape:true});
    }
    </script>
    Account Name :<input id="accName" type="text" />
    <button onclick="getAccountJS()">Get Account</button>
    <div id="errors-js"> </div>
    <apex:pageBlock id="theBlock">
        <apex:pageBlockSection id="thePageBlockSection" columns="2">
            <apex:pageBlockSectionItem id="theFirstItem">
                <apex:outputText id="accId"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="theSecondItem" >
                <apex:outputText id="accNam" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

 

<apex:page controller="sample">
    <script type="text/javascript">
    function getAccountJS() 
    {
        var accountNameJS = document.getElementById('accName').value;        
        sample.getAccount( accountNameJS, 
        function(result, event)
        {
            if (event.status) 
            {
                // demonstrates how to get ID for HTML and Visualforce tags
                document.getElementById("{!$Component.theBlock.thePageBlockSection.theFirstItem.accId}").innerHTML = result.Id;
                document.getElementById("{!$Component.theBlock.thePageBlockSection.theSecondItem.accNam}").innerHTML = result.Name;
            } 
            else if (event.type === 'exception') 
            {
                document.getElementById("errors-js").innerHTML = event.message;
            } else 
            {
                document.getElementById("errors-js").innerHTML = event.message;
            }
        }, {escape:true});
    }
    </script>
    Account Name :<input id="accName" type="text" />
    <button onclick="getAccountJS()">Get Account</button>
    <div id="errors-js"> </div>
    <apex:pageBlock id="theBlock">
        <apex:pageBlockSection id="thePageBlockSection" columns="2">
            <apex:pageBlockSectionItem id="theFirstItem">
                <apex:outputText id="accId"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="theSecondItem" >
                <apex:outputText id="accNam" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

Hope this helps you! 
Best Regards,
Deepthi