Consume RESTful Service using jQuery in 2 Simple Steps

Imran Abdul Ghani

0/5 (0 vote)

Oct 6, 2013

CPOL

2 min read

68241

How to consume RESTful Service using jQuery in 2 simple steps

jQuery possesses the functionality that simplifies the AJAX call for a RESTful service. So, when we think about consuming a RESTful service and then rendering received XML/JSON data in a Web Application, jQuery automatically becomes a good option.

In this WCF tutorial, we are going to call a simple RESTful service using a GET request and then display the received data. As it's a continuation of my previous post, I am not going to create a new RESTful service now. Please go through my last post “5 simple steps to create your first RESTful service”, because I am going to call the same created service.

As in the above mentioned article, I created a project using Visual Studio 2010 named as "MyRESTService". So, we will add a new client project to the same existing solution.

Add client project to the same solution.
- Open the solution MyRESTService in Visual Studio.
- Add new project to this solution. From File -> New Project. Choose "ASP.NET Web Application" template.
- Name the project as "MyRESTClient".
- Choose "Add to Solution" against solution dropdown and press "OK" button.
- Now, you can see two projects under a solution. MyRESTService project and newly added MyRESTClient project.

We will call that existing service using jQuery's Ajax function in our MyRESTClient project.

Add a new ASP.NET WebForm page to client project and name it as "MyRESTServiceCaller.aspx".

Add reference to jQuery Library from Scripts.

<script src="Scripts/jquery-1.4.1.min.js" 
type="text/javascript"></script>

Add a table to HTML body to contain contents rendered from RESTful service.

         <table border='1' id="products">
            <!-- Make a Header Row -->
            <tr>
                <td><b>Product Id</b></td>
                <td><b>Name</b></td>
                <td><b>Price</b></td>
                <td><b>Category</b></td>
            </tr>
        </table>

Add the following jQuery code snippets in script tag for calling service and rendering returned XML data.

<script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://localhost/MyRESTService/ProductRESTService.svc/GetProductList/",
                dataType: "xml",
                success: function (xml) {                   
                    $(xml).find('Product').each(function () {
                        var id = $(this).find('ProductId').text();
                        var name = $(this).find('Name').text();
                        var price = $(this).find('Price').text();
                        var category = $(this).find('CategoryName').text();
                        $('<tr><td>' + id + '</td><td>' + 
                        name + '</td><td>' + price + '</td><td>' +
                                     category + '</td></tr>').appendTo('#products');                       
                    });
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        });
      </script>

jQuery Ajax function basically performs an asynchronous HTTP request with parameters, I mentioned in bold.

type is the request method. Possible values can be GET, POST, DELETE, PUT, etc. Here we are making a "GET" request.
url represents a resource on the web. In our case, we are providing service URL.
datatype specifies the type of data returned from server, i.e., xml, text, html, script, json, jsonp.
success is the callback function that will be invoked when request gets completed.
error is also a callback function that will be called in case of request failure.

When you run the application, it will call service, fetch data and display in a tabular format as shown in the following figure:

Now, hopefully, you can create a simple WCF RESTful service and consume it using jQuery as well. My next article will contain all CRUD (Create, Read, Update, Delete) operations for RESTful service.

Consume RESTful Service using jQuery in 2 Simple Steps

Other Related Tutorials