Action support component adds AJAX support to other component. It allow the component to be refreshed asynchronously by calling the controller’s method when any event occurs (like onclik, onblur etc). It also allows to rerender page sections as desired.
In this article I will demonstrate how to use actionsupport in visualforce page.
Create Apex class with following code:

Public with sharing class TestActionSupport
{
    public Integer Total {get;set;}
     
    Public TestActionSupport()
    {
        Total = 0;
    }
     
    Public void IncreaseNumber()
    {
        Total ++;
    }
}

Now create the Visualforce page:

<apex:page controller="TestActionSupport">
<apex:form>
<apex:pageblock>
<apex:pageblocksection>
<apex:outputpanel id="idPanel1"> 
<apex:outputtext value="Click here to increase number">
<apex:actionsupport action="{!IncreaseNumber}" event="onclick" rerender="idResult">
</apex:actionsupport></apex:outputtext></apex:outputpanel>
<apex:outputtext id="idResult" label="No. of Clicked:" value="{!Total}">
</apex:outputtext></apex:pageblocksection>
</apex:pageblock>
</apex:form>
</apex:page>

In the above apex class, initially variable “Total” value is set to 0. But when we will click on visualforce page “Click here to increase number” then controller action method will be called and variable “Total” will be increase. The action support also rerender the outputText which refreshes the outputText and hence shows the new value set in controller method.

Before Click:

After Click: