Consume RESTful service using jQuery in 2 simple steps

By | October 6, 2013
11 Comments

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:

Category: Uncategorized Tags: ,

About IMRAN ABDUL GHANI

Imran Abdul Ghani is working as Software Developer(Senior) with extensive knowledge in Web development technologies especially C#, ASP.NET, MVC, WCF, Web API, ADO.NET Entity Framework, jQuery etc. He has several years of experience in designing/developing enterprise level applications. He is Microsoft Certified Solution Developer for .NET (MCSD.NET) since 2005. You can reach his blogging at www.webdevelopmenthelp.net, www.topwcftutorials.net, and www.sharepointfordummies.net.

11 thoughts on “Consume RESTful service using jQuery in 2 simple steps”

  1. RedDog

    Ya, the code works as described, IF you use IE, if you try using Chrome you get “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”

    Please provide the steps to use Chrome.

  2. Shaik Raffi

    yes dude, If Service and .aspx page same as single project its working fine if it is different projects your code not working we nee to go for Proxy.

  3. pvi143007@gmail.com

    Can you please provide complete aspx page snapshot for code for reference as my javascript is not getting called at all.

    1. Shaik Raffi

      If Service and .aspx page same as single project its working fine if it is different projects your code not working we nee to go for Proxy.

  7. 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).

Comments are closed.