Marcos Vainer Loeff

Calling RESTful services using jQuery

Blog Post created by Marcos Vainer Loeff Employee on Nov 19, 2013

Some of my previous blog posts were about mapping in HTML5. In order to create the map, some JavaScript code snippets were required.

 

In this scenario, if you want to integrate your PI System with maps in an HTML5 page, you need to fetch PI System data into JavaScript variables. In order to achieve this, one of the options is to call RESTful services using jQuery and get the data from the PI System.

 

PI Web API, which is an unreleased product, will provide RESTful  services on top of the PI System so that you can call it directly from a HTML5 page using jQuery. Developing your own RESTful API is also possible using ASP.NET Web API and PI AF SDK. You can find more information about it here.

 

Given a REST web service that is working, this blog post will focus on how to access it from a HTML5 using jQuery.

Introduction to jQuery

jQuery is not a language, but it is a well written JavaScript code. As quoted on official jQuery website, "it is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development."

 

In order to work with jQuery, you should be aware of the basics of JavaScript, HTML and CSS.

 

jQuery JavaScript file can be downloaded from jQuery Official website.

Creating a HTML5 page that will consume RESTful Web Service 

The jQuery client will be accessed by opening the index.html file in your browser, and will consume the service accepting requests at:

 
http://date.jsontest.com/

 The service will respond with a JSON representation:

 
{
   "time": "04:20:03 PM",
   "milliseconds_since_epoch": 1385569203092,
   "date": "11-27-2013"
}

 The jQuery client will render the time, UTC and date into the DOM.

Create a jQuery Controller

First, you will create the jQuery controller module that will consume the REST service:

 
$(document).ready(function () {
    $.ajax({
        url: "http://date.jsontest.com/"
    }).then(function (data) {
        $('.time').append(data.time);
        $('.ms').append(data.milliseconds_since_epoch);
        $('.date').append(data.date);
    });
});

This controller module is represented as a simple JavaScript function. It uses jQuery’s $.ajax() method to consume the REST service at:

 
http://date.jsontest.com/

If successful, it will assign the JSON received to data. The time,ms and date are then appended to the time,ms and date DOM elements respectively.

 

Note the use of the jQuery promise .then(). This directs jQuery to execute the anonymous function when the $.ajax() method completes, passing the data result from the completed AJAX request.

Create the Application Page

Now that you have a jQuery controller, you will create the HTML page that will load the client into the user’s web browser:

 
<!DOCTYPE html>
<html>
<head>
    <title>Hello jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jsontest.js"></script>
</head>
<body>
    <div>
        <p class="time">Current time is </p>
        <p class="ms">Current UTC in seconds is </p>
        <p class="date">Current date is </p>
    </div>
</body>
</html>

Note the following two script tags within the <head> section.

 

The first script tag loads the minified jQuery library (jquery.min.js) from a content delivery network (CDN) so that you don’t have to download jQuery and place it in your project. It also loads the controller code (jsontest.js) from the application’s path.

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jsontest.js"></script>

Also note that the <p> tags include class attributes.

 
<p class="time">Current time is </p>
<p class="ms">Current UTC in seconds is </p>
<p class="date">Current date is </p>

These class attributes help jQuery to reference the HTML elements and update the text with the values from the time,ms and date properties of the JSON received from the REST service.

Conclusion

Another example of using Ajax method is: 

 
                            function Get_REST_Data(url, SuccessCallBack, ErrorCallBack) {
                                $.ajax({
                                    type: 'GET',
                                    url: url,
                                    cache: false,
                                    async: false,
                                    success: SuccessCallBack,
                                    error: ErrorCallBack
                                });
                            }

 

 

In this example the function SuccessCall is called in case the ajax function executes successfully and if this doesn't happen then the function ErrorCallBack would be called.

 

Ajax method from jQuery provides many different options which is described here.

 

I hope you find this blog post interesting and stay tuned for my upcoming blog posts!

Outcomes