Source Viewer : /ajax/ajax-fallback.htm

This example demonstrates how to support both an Ajax and non-Ajax <tt>action</tt>
event. If JavaScript is enabled an Ajax request is made, if JavaScript is disabled
a normal HTTP request is made. On the server an <tt>AjaxBehavior</tt> handles the
Ajax request while an <tt>ActionListener</tt> handles the non-Ajax event.

<p/>

Click $link to call the server (disable the browser JavaScript to see the fallback
behavior in action)

<div id="result">
    <!-- The AJAX and non-AJAX response will be displayed here -->
    #if($msg)
      <p class="infoMsg">
        $msg
      <p/>
    #end
</div>

<script type="text/javascript" src="$context/assets/js/jquery-1.4.2.js"></script>

<script type="text/javascript">
    // This example uses jQuery for making Ajax requests:
    // http://api.jquery.com/jQuery.get/
    // http://api.jquery.com/jQuery.ajax/

    // Register a function that is invoked as soon as the DOM is 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() {
        var link = jQuery('#link-id');
        var extraData = link.attr('id') + '=1';
        var url = link.attr('href');
        jQuery.get(url, extraData, function(data) {
            // 'data' is the response received from the server

            // We select the div element with the ID 'result' and set its
            // content to the server response
            jQuery("#result").html("<p class='infoMsg'>" + data + "</p>");
        });
    }
</script>