learning ‘apex:actionFunction’

<apex:actionFunction> is a standard VisualForce component which allows you to invoke Apex controller action methods directly from a JavaScript code using AJAX request. An <apex:actionFunction> component must be a child of an <apex:form> component. It is different from <apex:actionSupport>, which only provides support for invoking controller action methods from other VisualForce components, <apex:actionFunction> defines a new JavaScript function which can then be called from within a block of JavaScript code.

The below code snippet explains the functionality of how it works – In the VisualForce code, I used actionFunction component to define a new JavaScript function called – ‘fetchDetails‘ which in turn then calls the action method of the controller with the same name. The JavaScript function is invoked by the ‘window.setTimeout(fetchDetails,2000)’ during page load defined within script block.  In the outputPanel component, we are displaying the user information and have used another component actionStatus to display the AJAX text refresh while the information is being fetched.

Click here for demo

VisualForce code :

Apex Controller :

Feel Free to provide your valuable comments or point out any issues or scope of improvement in the above post.