Consume RESTful service using jQuery in 2 simple steps

By | October 6, 2013


jQuery possess 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 its a continuation of my previous post, so 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 above mentioned article, I created a project using Visual Studio 2010 named as “MyRESTService”. So, we will add a new client project to same existing solution.

1. Add client project to 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.

2. 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 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();
varcategory = $(this).find(‘CategoryName’).text();
                         $(‘<tr><td>’ + id + ‘</td><td>’ + name + ‘</td><td>’ + price + ‘</td><td>’ +
category + ”).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 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.

Top 10 Interview Questions and Answers Series:


  • http://www.blogger.com/profile/13925926523381740547 ganesh p

    Useful article

  • http://www.blogger.com/profile/09409890693567652629 Balasubramanian S

    Nice Tech Article..

  • http://www.blogger.com/profile/12926324385610969494 raghu prasad

    nice..
    can you please provide an example for POST request

  • http://www.blogger.com/profile/10867674357364468276 Imran Ghani

    Hi Bojidar,
    It will work for remote hosts as well. As far as all browsers concern, I checked it with IE and chrome and it worked. But in any case, you can modify the output to meet your need. For example, you can go with divs instead of table (if required).

  • http://www.blogger.com/profile/16932453473290992454 Bojidar Ivanov

    Hello,

    Like your tutorial.
    Wonder if this is going to work for remote hosts and all the browsers?

    Regards,
    Bojidar

  • http://www.blogger.com/profile/02521282881283031161 Sam

    Very nice simple tutorial! Thanks Imran!