In this first example we demonstrate how to handle Ajax requests with a DefaultAjaxBehavior. DefaultAjaxBehavior is the default implementation of the AjaxBehavior interface. Below is the Page class, AjaxBehaviorPage.java, showing a DefaultAjaxBehavior added to an ActionLink, called link with an HTML ID of link-id. The DefaultAjaxBehavior onAction method will be invoked to handle the Ajax request. The onAction method returns an ActionResult that is rendered to the browser.

public class AjaxBehaviorPage extends BorderPage {

    private static final long serialVersionUID = 1L;

    private ActionLink link = new ActionLink("link", "here");

    public AjaxBehaviorPage() {
        link.setId("link-id"); 

        addControl(link);

        // Add a DefaultAjaxBehavior to the link. The DefaultAjaxBehavior will be invoked when the
        // link is clicked.
        link.addBehavior(new DefaultAjaxBehavior() { 

            @Override
            public ActionResult onAction(Control source) { 

                // Formatted date instance that will be added to the
                String now = format.currentDate("MMM, yyyy dd HH:MM:ss");

                String msg = "AjaxBehavior <tt>onAction()</tt> method invoked at: " + now;

                // Return an action result containing the message
                return new ActionResult(msg, ActionResult.HTML); 
            }
        });
    }
} 

	We assign to ActionLink the HTML ID: link-id. The ID will be used to identify the ActionLink as the Ajax target control. The client-side JavaScript code is expected to send this ID as an Ajax request parameter.
	Next we add the DefaultAjaxBehavior to the ActionLink. Adding a Behavior to a control will also register that control with the ControlRegistry as a potential Ajax target control.
	We also implement the DefaultAjaxBehavior onAction method in order to handle the Ajax request.
	Finally we return an ActionResult containing some HTML content that is rendered to the browser.

Below we show the Page template ajax-behavior.htm, containing the client-side JavaScript code that will initiate the Ajax request.

Note: the example below uses the jQuery library, but any other library can be used. Also see the online Click examples for more Ajax demos.

<!-- // $link is a Velocity reference that will render an ActionLink at runtime. -->
Click $link to make an Ajax request to the server.

<div id="result">
    <!-- // Ajax response will be set here -->
</div>

<!-- // JavaScript code below -->

<!-- // Import the jQuery library -->
<script type="text/javascript" src="$context/js/jquery.js"></script>

<!-- // The client-side JavaScript for initiating an Ajax request -->
<script type="text/javascript">
    // This example uses jQuery for making Ajax requests:

    // Register a function that is invoked as soon as the entire DOM has been loaded
    jQuery(document).ready(function() { 

        // Register a 'click' handler that makes an Ajax request
        jQuery("#link-id").click(function(event){
            // Make ajax request
            makeRequest();

            // Prevent the default browser behavior of navigating to the link
            return false;
        })
    })

    function makeRequest() {
        // Get a reference to the link
        var link = jQuery('#link-id');

        // In order for Click to identify the Ajax target, we pass the link ID
        // attribute as request parameters
        var extraData = link.attr('id') + '=1'; 

        // The Ajax URL is set to the link 'href' URL which contains all the link default parameters,
        // including it's name/value pair: 'actionLink=link'
        var url = link.attr('href'); 

        jQuery.get(url, extraData, function(data) {
            // 'data' is the response returned by the server

            // Find the div element with the id "result", and set its content to the server response
            jQuery("#result").html("<p>" + data + "</p>"); 
        });
    }
</script> 

	We start off with a jQuery ready function that is executed as soon as the browser DOM has been loaded. This ensures that the function body is executed before the page images are downloaded, which results in a more responsive UI.
	This is an important step. We need to pass the link's HTML ID attribute as request parameters in order for the server to identify which server-side control is the Ajax target. We use the jQuery attr function to lookup the link's HTML ID attribute. Click doesn't actually use the value of the parameter, it is enough that the name is present. In this example we pass a value of 1, but any other value could be used, or even left out.
	This is another important step. In addition to the ActionLink HTML ID pararameter, we also need to send the link's href parameters, otherwise the ActionLink onProcess method won't fire the AjaxBehavior onAction event. An easy way to achieve this to set the Ajax URL to the ActionLink href value.
	Finally we the jQuery html function to update the div content with the server response.