Dojo in XPages – 19: Using AJAX to Retrieve Data from a REST Service

AJAX is a critical component to creating applications that are highly responsive (performance-wise) in the browser. When you initiate an asynchronous request, the rest of the page is not blocked while some server action is executed. AJAX wrapper classes are built into the Dojo base module, so they’re automatically available to use in XPages. In this post, I’ll show how you can make an AJAX call with Dojo to retrieve data from a REST service in XPages.

Dojo in XPages Series

Dojo in XPages — All Blog Posts

The Test Data and REST Service

I created some test documents that have FirstName, LastName, and Address fields. I created an XPage named REST.xsp and added a REST service (viewJsonService) to provide the data. The pathInfo property of the REST service is set to People, so the URL to reference it from within the same application is REST.xsp/People.

Here is the source of the REST service:

<xe:restService id="restService1" pathInfo="People">
  <xe:this.service>
    <xe:viewJsonService defaultColumns="true"
      viewName="People">
    </xe:viewJsonService>
  </xe:this.service>
</xe:restService>

Here’s what the data looks like when I display it in the browser:

Dojo 19 - A - REST Data

Tip: Remember to always test your REST service output in the browser so you can verify that it’s returning data that you expect.

Retrieving the Data with AJAX

To retrieve that data from another XPage, I can use this dojo code:

// Retrieve data from a REST service and write it out to the console
dojo.xhr.get({
  url:"REST.xsp/People",
  handleAs:"json",
  load: function(data){
    for(var i in data){
      console.log("#" + i + ": value", data[i]);
    }
  }
});

XHR is short for XMLHttpRequest — the object that’s used to make an asynchronous request. xhr.get() is the Dojo wrapper function for making that asynchronous call from client-side JavaScript.

The url parameter refers to my page with the REST service (including the pathInfo property that refers to a specific REST service). This can be any URL that you need.

The load property is a callback function that runs after data has been retrieved. It’s an anonymous function that automatically receives a handle to the data that was retrieved. The parameter name can be whatever you want.

Since the JSON data returned by the REST service is an array of objects, this code loops through the array and prints the retrieved data to the console.
Dojo 19 - B - REST Data

And there you have it – an asynchronous call that retrieves data and writes it out to the console.

In the next post, I’ll dig a little more into the callbacks and demonstrate displaying the returned data on the page.

Advertisements

3 responses to “Dojo in XPages – 19: Using AJAX to Retrieve Data from a REST Service”

  1. Wilberth Lucas Lemes da Silva says :

    I need to send parameters of an XPage to the agent. Has as?

  2. May says :

    I’m using Rest Service with viewJsonService to retrieve 7000 documents for my gridx. I experience slow performance to retrieve the data (12 seconds)

    What could be possible cause(s) for this slow performance ?

    • May says :

      I resolved my problem by removed everything in System Columns except Unid and notesid and it give me better performance instead 12 sec I got 5 sec.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: