Difference between @RemoteAction Annotation and in visual force

@RemoteAction and apex:actionFunction are essentially polar opposites in terms of functionality, even though they both offer JavaScript functionality.

@RemoteAction methods are static, and therefore can't see the current page state directly, while apex:actionFunction methods are instance methods, and so can see the entire page state.

@RemoteAction methods require less bandwidth, and server processing time, because only the data you submit is visible and the view state is not transferred, while apex:actionFunction has to transfer the page view state.

@RemoteAction methods have to update the DOM manually using explicit JavaScript, while apex:actionFunction methods automatically update the Visualforce DOM and can refresh part or all of the page, and can provide a standard interface for showing a loading status through apex:actionStatus.

@RemoteAction methods can return data directly back to the calling JavaScript, but cannot update the page's view state. apex:actionFunction methods can update the page's view state and DOM structure, but cannot return data directly back to JavaScript (although you can do this with some extra effort using oncomplete).

Because of these polar differences, there is almost always "one right answer" for which method should be used in a given situation. An auto-complete-as-you-type feature would benefit from @RemoteAction, because less data is used, and so it is faster and more responsive; we don't need to modify the view state, so this is a major bonus for the user. Updating the page's view state to show new Visualforce elements, in contrast, would best be served with apex:actionFunction; using a @RemoteAction would force the developer to manage the DOM themselves, which can be more burdensome.

ACTION FUNCTION:

            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.