Click here to Skip to main content
15,868,141 members
Articles / All Topics
Technical Blog

Consume RESTful Service using jQuery in 2 Simple Steps

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
6 Oct 2013CPOL2 min read 67.8K   4   3
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.

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

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

Other Related Tutorials

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Emaratech
United Arab Emirates United Arab Emirates
Imran Abdul Ghani has more than 10 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 WCF Tutorials, Web Development, SharePoint for Dummies.

Comments and Discussions

 
QuestionNot able to find Product Pin
Member 808304925-Oct-13 3:36
Member 808304925-Oct-13 3:36 
Xml generated from given link of http://www.topwcftutorials.net/2013/09/Simple-Steps-For-RESTful-Service.html[^]

Product node is not accessible from given code...
AnswerRe: Not able to find Product Pin
Imran Abdul Ghani25-Oct-13 21:20
Imran Abdul Ghani25-Oct-13 21:20 
GeneralRe: Not able to find Product Pin
Member 808304927-Oct-13 19:20
Member 808304927-Oct-13 19:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.