RESTful web services and jQuery make it easy to create an enterprise mashup. This 2 part article discusses how to create a simple enterprise mashup using jQuery. Part 1 introduces what is required of your enterprise services, the simplicity of JSON, and how to consume your RESTful web services using jQuery. Part 2 will cover consuming services from across the enterprise with JSONP, accessing secure resources, and handling error conditions.

Enterprise Web Services: Got REST?

First things first, we need RESTful web services to provide the data we intend to consume. Are there already web services exposed in your enterprise that provide a RESTful API? Do these services support JSON? If not, there are a wide array of technologies that make it simple to expose RESTful web services from your existing applications.

If you have RESTful web services, but they only support an XML result it is quite simple to support JSON with JAX-RS. JAX-RS uses the HTTP Accept header to determine what media type should be sent back as a result. The following HTTP header entry would indicate that the client is requesting a JSON result:

Accept: application/json

RESTEasy provides a portable JAX-RS implementation that makes it simple to expose services supporting a variety of media types. If you happen to be using Seam, exposing RESTful services through RESTEasy is a no-brainer. See the Seam documentation for more details.

Why use JSON when you have XML?

It is now common to expose REST services that return a result in JSON format. The format is described as a lightweight data-interchange format. The major advantage to JSON is that it is JavaScript native format. This means if a RESTful service is invoked through a JavaScript AJAX call and returns a JSON result, the data returned by the service can be used without additional parsing.

For example, we could have the following URL tied to a consultants list resource.

http://solutionsfit.com/services/rest/consultants

When a GET request is received for this URL the following JSON response is generated.

[{
 "consultant" : {
   "firstName": "Jacob",
   "lastName": "Orshalick",
   "blogFeed": "http://solutionsfit.com/blog/feed"
 },
{
 "consultant" : {
   "firstName": "Nirav",
   "lastName": "Assar",
   "blogFeed": "http://assarconsulting.blogspot.com/feeds/posts/default"
 }
}]

If this JSON result was stored in a JavaScript variable named solutionsfitConsultants, I could alert the user of Jacob Orshalick’s blog URL with the following JavaScript snippet.

var consultant = solutionsfitConsultants[0].consultant;

alert(consultant.firstName + ' ' + consultant.lastName);

Obviously this makes it very easy to render results to the user by removing the additional step of parsing that is required with XML.

Request and display JSON data with jQuery

jQuery makes it simple to consume a RESTful service providing a JSON result through a simple AJAX call. Let’s look at an example. The following HTML provides the shell for the service results I want to display in my mashup.

<table width="100%">
  <thead>
    <tr>
      <th>
        Consultant
      </th>
      <th>
        Blog Feed
      </th>
    </tr>
    <tbody id="consultants">
    </tbody>
</table>

The jQuery getJSON function makes it simple to consume the service that provides us the list of consultants. The getJSON function sends an AJAX GET request to the resource URL with an HTTP Accept header of application/json.

jQuery.getJSON(
  'http://solutionsfit.com/services/rest/consultants&callback=?',
  function(data) {
    jQuery.each(data, function(i,item) {
      var consultant = item.consultant;
      var consultantHtml = '<tr>' +
        '<td>' + consultant.firstName + ' ' 
          + consultant.lastName + '</td>' +
        '<td><a href="' + consultant.blogFeed + '">' +
          'Blog Feed</a></td>' +
        '</tr>';

      jQuery("#consultants").append(consultantHtml);
    });
  }
);

Notice that we also use the jQuery each function to loop through the JSON results. Each result in the returned JSON array is set into the variable item.

We then generate the HTML to add to the table for each consultant and set it into the consultantHtml variable. We then select the
element that will contain the consultant results using it’s element ID and use the jQuery append function to append the consultantHtml.

When the page is fully rendered, the resulting HTML will be:

<table width="100%">
  <thead>
    <tr>
      <th>
        Consultant
      </th>
      <th>
        Blog Feed
      </th>
    </tr>
    <tbody id="consultants">
      <tr>
        <td>
          Jacob Orshalick
        </td>
        <td>
          <a target="_blank" 
              href="http://solutionsfit.com/blog/feed/">
            Blog Link
          </a>
        </td>
      </tr>
      <tr>
        <td>
          Nirav Assar
        </td>
        <td>
          <a target="_blank" href=
            "http://assarconsulting.blogspot.com/feeds/posts/default/">
            Blog Feed
          </a>
        </td>
      </tr>
    </tbody>
</table>

Note that only JavaScript libraries and HTML have been used to consume the service. This provides the flexibility to render this content in a web application, a portal, or even a static HTML page!

That’s it for round one of enterprise mashups. Stay tuned for part 2 which will discuss how to gather data from across the enterprise with JSONP and how accessing secured services is made easy.