ActionSupport:
A component that adds AJAX support to another component, allowing the component to be refreshed asynchronously by the server when a particular event occurs, such as a button click or mouseover.
It allows components to be refreshed asynchronously by calling the controller’s method when any event occurs (like click on button). It allows us to do partial page refresh asynchronously without refreshing full page.
ActionRegion: An area of a Visualforce page that demarcates which components should be processed by the Force.com server when an AJAX request is generated. Only the components in the body of the <apex:actionRegion> are processed.

Let's consider a scenario:
1. If Account Industry is "Banking", then "Annual Revenue" field should be mandatory.
2. If Account Industry is "Other", then "Description" field will be mandatory.
We can make a field required using Validation rules, then why should we go for ActionSupport?
Because validation rules will be applied after clicking on Save button i.e. after DML operation is performed on the database. This is time consuming process. Hence we go for action support component <apex:actionSupport>.
Action components are used for improving the page performance by refreshing the part of the page (without loading the whole page)
 
AccountFieldRequired:
<apex:page standardController="Account"   >
<apex:sectionHeader title="Account" subtitle="Edit Page" />
<apex:form >
<apex:pageBlock title="Account Information" mode="mainDetail">
<apex:pageBlockButtons >
<apex:commandButton value="Save" action="{!save}" />
<apex:commandButton value="Cancel" action="{!cancel}" />
</apex:pageBlockButtons>
<apex:pageBlockSection title="Info">
<apex:inputField value="{!Account.Name}" />
<apex:inputField value="{!Account.AccountNumber}" />
<apex:pageBlockSectionItem >
<apex:outputLabel > Account Industry</apex:outputLabel>
<!--Action region specifies what region of the form should be processed by Force.com when an AJAX request is generated -->
<apex:actionRegion >
<apex:inputField value="{!Account.Industry }" >
<apex:actionSupport event="onchange" reRender="revenueRequired" />
<!--Action support component controls the behavior of the form and adds AJAX support to your actionRegion -->
</apex:inputField>
</apex:actionRegion>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:pageBlockSection id="revenueRequired" title="Details">
<!--referring rerender attribute using id -->
<apex:inputField value="{!Account.AnnualRevenue}" required="{!IF(Account.Industry=='Banking', true, false)}"  />
<apex:inputField value="{!Account.Description}" required="{!IF(Account.Industry=='Other', true, false)}"/>
<!-- Here required="{!IF(Account.Industry=='Banking', true, false)}" is used to make a field required based on condition -->
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

Output: If Account Industry is “Banking”, then “Annual Revenue” will be mandatory



Output: If Account Industry is “Other”, then “Description” will be mandatory.


 
Explanation:
In the above example,
"Account" is the Standard Controller.
"mainDetail" is the pageBlock mode used to display the page background color as white.
"ActionRegion" specifies what region of the form should be processed by Force.com when an AJAX request is generated
<apex:actionSupport"> component controls the behavior of the form and adds AJAX support to your actionRegion
"reRender" attribute is used to refresh a particular section or a Visualforce code block.
required="{!IF(Account.Industry=='Banking', true, false)}" is used to make a field required when Account Industry is "Banking"
"Id" is used to refer "reRender" attribute.

Thank You.
Sohel Mohd