What is Difference between action support and action function 

1. Both action support and function can be used to call a controller method using an AJAX request.

• for example call controller onclick of a inputcheck box
• or call a controller method onfocus of a input field

Well, they both do the same thing of calling controller method.

Difference between both:

1. Action function can call the controller method from java script.
2. Action support adds AJAX support to another visualforce component and then call the controller method.
    for example:

<apex:outputpanel id="outptpnl">
             <apex:outputText value="click here"/>
         <apex:actionSupport event="onclick" action="{!controllerMethodName}"  rerender="pgblck" />
     </apex:outputpanel>


Here action support adds AJAX to output panel, so once you click on output panel controller method will be called.

3. Action function cannot add AJAX support to another component. But from a particular component which has AJAX support(onclick, onblur etc) action function can be called to call the controller method.
Example:

 <apex:actionFunction name="myactionfun"  action="{!actionFunMethod}" reRender="outptText"/> <apex:inputcheckbox onclick="myactionfun" />


In this example onlick of input checkbox "myactionfun" action function is called from where controller method "actionFunMethod" gets called.
Apart from this, the main difference between the "two" action support and action function is that, the action function can also be called from java script.Example:

<apex:actionFunction name="myactionfun"  action="{!actionFunMethod}" reRender="outptText"/>
 <apex:inputcheckbox onclick="myJavaMethod()" />
<script>
   function myJavaMethod(){
     myactionfun();// this call the action function
  }  </script>


Here onclick of the inputcheck box java script is called from where the action function gets called and ultimately your controller method.

Lets demo both as a full fledged example:

Click in the Input text to call controller method using action support
Click the input check box to call Java script, then confirm in java script, upon confirmation controller method is called using action function.

Tex in the lower pageblock gets changed depending on whether the controller method is called by action support or action function.

 


Controller Class :

public class ActionSupController {

Public string Display_This_String{get;set;}
    Public ActionSupController(){
     Display_This_String = 'value set in constructor';
    }
   
    Public void actionFunMethod(){
      Display_This_String = 'value set in action function method';
    }
   
    Public void actionSupMethod(){
      Display_This_String = 'value set in action Support method';
    }

}

Visualforce Page: 

<apex:page controller="ActionSupController">
 <apex:form >
  <h1>Demonstration of difference between Action function and Action Support</h1>

  <apex:actionFunction name="myactionfun"  action="{!actionFunMethod}" reRender="outptText"/><br></br> <br></br>

  Input Text <apex:inputText >
                <apex:actionSupport action="{!actionSupMethod}" event="onclick" reRender="outptText" />
             </apex:inputText> <br></br>
            
Click me to call action function method   <apex:inputcheckbox onclick="myJavaMethod()" /><br></br> <br></br>  
    <apex:pageBlock >
        <apex:outputText value="{!Display_This_String}" id="outptText"/>
    </apex:pageBlock>        

  <script>
   function myJavaMethod(){
   var checkinput = confirm('Are sure you wnat to call action function method?');
   if(checkinput == true)
      myactionfun();
  }
  </script>
 </apex:form> 

 </apex:page>