The tours in this section make use of several Jitsu features (e.g. lists, databinding, templates etc) that are covered in more depth in later tours.

Here we are showing Jitsu working with a JSON data services. Several JSON data services, implemented in PHP, are bundled with Jitsu.

JSON is a popular lightweight data-interchange format.

On this page we're using the "presidents" data service, one of several PHP data services bundled with Jitsu. The Presidents service runs on the server and has a small database of information on presidents of the United States.

To work with a data service, there are two steps:

1. Load type definitions for the service:

Place a <j:using> element in the page, referencing the xml document defining the types for the service:

    <j:using src="../services/presidents/types.xml"/>
    

If you look at the file types.xml , you'll see it defines a President type, with firstName and lastName properties. You'll need to load the type definition so the compiler will recognize these types.

2. Add a DataSet using the data service's URL.

We add a dataset, setting its src attribute to point to the URL endpoint for the data service:

    
    <j:data>
        <p:DataSet id="presidents" src="/jitsu/services/presidents/"/>
    </j:data>
    

The src attribute here is a URL, so /jitsu/services/presidents/ is expanded by the browser to a fully resolved URL - e.g. if you are running this page from jitsu.org, the fully expanded URL is http://www.jitsu.org/jitsu/services/presidents/ .

[todo: should DataSet use href instead of src for the name of the dataset url?]

That's it - after these two steps, data objects from the data service are availble on the page. We can bind to the dataset as usual, e.g.

    <j:List items="#bind(data.presidents)">
        <j:template>
            <div>
                <j:Label text="#bind(item.lastName)"/>
            </div>
        </j:template>
    </j:List>
    

See Lists for more on the List control.

See Binding Lists for more on how List works with binding.

Behind the Scenes

This page demonstrates Jitsu working with active data - data that is loaded at runtime from a service. See Active Data for details of the JSON protocol for active data services.

When you load this page, the Jitsu runtime fetches the president dataset using XmlHttpRequest.

Specifically, it creates an XmlHttpRequest and issues a PUT to /jitsu/services/presidents/, sending the following JSON message:

{
    "dataSet":"presidents",
    "commands":[
        {"op":"load","path":["presidents"]}
    ]
}

This is a command to tell the service to load the presidents dataset.

The data service parses this message and sends the following reply (without all the spaces of course):

{
    "responses":[
        {   "op":"data",
            "path":["presidents"],
            "val":{
                "jsType":"PresidentDataSet",
                "aref":"presidents",
                "items":[
                    {
                        "jsType":"President",
                        "aref":"pres_1",
                        "firstName":"Jon",
                        "lastName":"ADAMS",
                      },
                      {
                        "jsType":"President",
                        "aref":"pres_2",
                        "firstName":"John Quincy",
                        "lastName":"ADAMS",
                      },
                      ...
                ],
                "startIndex":0,
                "endIndex":24,
                "totalItems":61,
                "page":1,
                "totalPages":1,
                "itemsPerPage":25,
            }
        },
        {   
            "op":"consoleMessage",
            "val":"load dataset ok."
        }
    ]
};

Its the data for the presidents dataset. You can see some presidents in there, together with extra data on the dataset itself such as information on what page is currently being views.

When Jitsu receives this a JSON message, it uses it to populate the dataset. Then, in turn, data bindings cause the page to update. This is all transparent to the application programmer.