VRaptor's Ajax support

Since version 2.2.3 VRaptor offers ajax support for your logics. That means you can access VRaptor's logics using asynchron javascript.

@Remotable

In order to use your logics for ajax calls you must mark them @Remotable. For example:

@Component
public class UserLogic {

        private List<User> users;

        @Remotable
        public void list() throws ParseException {
                users = new ArrayList<User>();

                users.add(new User(1, "Paulo",          new SimpleDateFormat("dd/MM/yyyy HH:mm").parse("11/10/1979 14:22")));
                users.add(new User(2, "Guilherme",      new SimpleDateFormat("dd/MM/yyyy HH:mm").parse("10/03/1982 20:11")));
        }
        
        public List<User> getUsers() {
            return users;
        }
        
}

and the model class:

public class User {

        private Integer id;
        private String name;
        private Date birthday;

        //getter and setters

        public User(Integer id, String name, Date birthday) {
            this.id = id;
            this.name = name;
            this.birthday = birthday;
        }
}

You can now use the URL user.list.ajax.logic for ajax calls.

JSON

VRaptor uses JSON (JavaScript Object Notation) as data exchange format. JSON is a subset of javascript, used by many javascript libraries and is supported by any standard browser.

If you call user.list.ajax.logic you get the user list in JSON format:

{"users":[{"birthday":308510520000,"id":1,"name":"Paulo"},{"birthday":384649860000,"id":2,"name":"Guilherme"}]}

Both, Date and Calendar objets return the object value in milliseconds.

Client

VRaptor is already configured for ajax. All we need to do now is create the client. There are many options here, I will show the asynchron ajax using prototype javascript framework.

So let's import prototype library: 

<script type="text/javascript" src="prototype.js"></script>

... and define a function ajaxRequest(). In this method we create a new Ajax.Request(). This is one prototypes useful function.

function ajaxRequest() {
        
                var url = 'user.list.ajax.logic';
                var pars = '';
        
                //create the ajax request
                var myAjax = new Ajax.Request(
                        url, 
                        {
                                method: 'get', 
                                parameters: pars, 
                                onComplete: showResponse
                        }
                );
                        
        //more stuff :)
}

The onComplete parameter defines the name of the ajax callback method (showResponse). In this callback method we will create the json object from the ajax response.

The method recieves a data parameter. We have to call data.responseText and must eval the recieved data in order to create a valid json object.

As already mentioned, Java Date and Calendar Objects will be return in milliseconds. You can also create a Javascript Date object from milliseconds.

Date in Javascript:

new Date(value_in_milliseconds)

We just have to format the date. I'm using the function formatDate from Matt Kruse's javascript date functions.

So in order to format the user's birthday I call the formatDate function and pass the a new javascript Date object and the desired format. The functions returns the formated string.

formatDate(new Date(users[i].birthday),"dd/MM/yyyy HH:mm")

The rest is pure javascript, getting the users jsonObject.users and updating the dom tree. 

function showResponse(data) {

        //get the jsonObject
        var jsonObject = eval('(' + data.responseText + ')');

        //get the user array from the json object
        var users = jsonObject.users;

        //update html, getting the name and birthday
        var html = "";
        for(i=0;i<users.length;i++) {
                html += users[i].name + " - " + formatDate(new Date(users[i].birthday),"dd/MM/yyyy HH:mm") + "<br/>";
        }
        
        var div = document.getElementById("ajaxResultDiv");
        div.innerHTML = html;
}

The complete solution would be:

<html>
<head>

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="date.js"></script>

<script>

        function ajaxRequest() {

                var url = 'user.list.ajax.logic';
                var pars = '';

                //create the ajax request
                var myAjax = new Ajax.Request(
                        url,
                        {
                                method: 'get',
                                parameters: pars,
                                onComplete: showResponse
                        }
                );      
        }

        //ajax callback method
        function showResponse(data) {

                        //get the jsonObject
                        var jsonObject = eval('(' + data.responseText + ')');

                        //get the user array from the json object
                        var users = jsonObject.users;

                        //update html
                var html = "";
                for(i=0;i<users.length;i++) {
                                html += users[i].name + " - " + formatDate(new Date(users[i].birthday),"dd/MM/yyyy HH:mm") + "<br/>";
                }
                
                var div = document.getElementById("ajaxResultDiv");
                div.innerHTML = html;
        }

</script>

</head>
<body >

        <input type="button" value="vraptor's easy ajax" name="click" onclick="javascript:ajaxRequest();" >

        <br/>
        
        <div id="ajaxResultDiv"></div>
        
</body >
</html>

Put the html file in your web projecto and don't forget the prototype library. Finished ....