Consume RESTful Service Using jQuery in Two Simple Steps

jQuery can simplify the AJAX call for a RESTful service. So, when we need to consume a RESTful service and then rendering the received XML/JSON data in a Web Application, jQuery automatically becomes a good option.

In this WCF tutorial, we will call a simple RESTful service using a GET request and then display the received data. Since its a continuation of my previous article, I am will not create a new RESTful service now. Please go through my last article "5 simple steps to create your first RESTful service", I will call the same service I created there.

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

1. Add client project to the same solution.

• Open the solution MyRESTService in Visual Studio.
• Add new project to this solution using "File" -> "New Project". Choose the "ASP.NET Web Application" template.
• Name the project as "MyRESTClient".
• Choose "Add to Solution" in the solution dropdown and press "OK" button.
  
  

You can now see two projects under a solution. MyRESTService project and the new 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 the client project and name it "MyRESTServiceCaller.aspx".
  
  
  
• Add a reference to the jQuery Library from Scripts.

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

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

  <tableborder='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 a script tag for calling the service and rendering the 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>

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

• type is the request method. Possible values can be GET, POST, DELETE, PUT and so on. Here we are making a "GET" request.

• URL represents a resource on web. In our case we are providing a service URL.

• datatype specifies the type of data returned from server, in other words XML, text, HTML, script, JSON, JSONP.

• success is the callback function that will be invoked when the request is completed.

• error is also a callback function that will be called in case of request failure.

When you run the application, it will call the service, the data is fetched and displayed 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 Create, Read, Update, Delete (CRUD) operations for the RESTful service.