How to consume RESTful Services using jQuery and/or Javascript


  Using jQuery against RESTful Web Services powered by Windows Azure
  The diagram below illustrates a browser accessing a cloud-hosted RESTful service powered by Windows Azure. The purpose of the post is to illustrate how Javascript from within a browser can consume RESTful web services hosted in Windows Azure.
Links to previous posts https://bit.ly/MobileToCloud
To create a RESTful service running on Azure you’ll need to download the Windows Azure free 90-day trial:                      Here is the diagram about what we are going to build. 3cvsmctp

  How to consume REST from a browser
  All modern browsers are capable of RESTful calls. Here we can see Internet Explorer making a RESTful web service call and populating <select..> html control using jQuery. After migrating my Azure Project to the cloud, everything worked as expected across the 3 browsers that I tested with. MainImage

    jQueryCallRESTful.htm
  Here is the project right before I deployed it. Previous videos illustrate this step. Essentially, you need to “Package” the application, then go to the portal to upload the package and configuration files. MainImage                    All that is required is adding an html file. HTML + Javascript is all that is needed to consume RESTful data. MainImage

  Include jQuery, add HTML controls and some Javascript
  Our web page is very simple. You start by including some jQuery. Next, you write some Javascript that makes Ajax calls after clicking the button. The Javascript (using jQuery framework) will retrieve the data and then populate a drop down list control. Notice the warning from Internet Explorer. That is because I am running locally, as “localhost,” which is a cross-domain scripting violation. By answering “yes” you are allowing the cross-domain Ajax call. image

  A select and and button control
  cboFastBikes gets loaded with data after making AJAX calls to the Azure hosted RESTful web service. image

  The jQuery call to an Azure-hosted web service
  The code below uses jQuery to retrieve RESTful data. If successful, the Javascript will populate an HTML <select /> control, which is essentially a combo box.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 <script src="https://code.jquery.com/jquery-1.7.js"             type="text/javascript"></script><script type="text/javascript">    $(document).ready(function () {        $('#butCallAjax').click(function () {            jQuery.support.cors = true;            $.ajax(                {                    type: "GET",                    url: 'https://fastmotorcycleservice.cloudapp.net/FastMotorcycleListService.svc/list/Bruno',                    data: "{}",                    contentType: "application/json; charset=utf-8",                    dataType: "json",                    success: function (data) {                        //alert('success');                        $.each(data, function (i, theItem) {                            var combo = document.getElementById("cboFastBikes");                            var option = document.createElement("option");                            option.text = theItem.toString();                            option.value = theItem.toString();                            try {                                //alert('success add combo');                                combo.add(option, null); // Other browsers                            }                            catch (error) {                                alert('error found');                                combo.add(option); // really old browser                            }                        });                    },                    error: function (msg, url, line) {                        alert('error trapped in error: function(msg, url, line)');                        alert('msg = ' + msg + ', url = ' + url + ', line = ' + line);                    }                });            //alert('button click');        });    });</script>

 


  Full Source Code for jQueryCallsRESTful.htm
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html src="https://code.jquery.com/jquery-1.7.js"><head><title>jQuery calling RESTful Services</title><meta xmlns="https://www.w3.org/1999/xhtml" content="text/html; charset=utf-8" /><style http-equiv="Content-Type">body {    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;    font-size: 12px;}p, h1, form, button {    border: 0;    margin: 0;    padding: 0;}.spacer {    clear: both;    height: 1px;}.myform {       margin: 0 auto;    width: 400px;    padding: 14px;}#stylized {       border: solid 2px #b7ddf2;    background: #ebf4fb;}#stylized h1 {    font-size: 14px;    font-weight: bold;    margin-bottom: 8px;}#stylized p {    font-size: 11px;    color: #666666;    margin-bottom: 20px;    border-bottom: solid 1px #b7ddf2;    padding-bottom: 10px;}#stylized label {    display: block;    font-weight: bold;    text-align: right;    width: 140px;    float: left;}#stylized .small {    color: #666666;    display: block;    font-size: 11px;    font-weight: normal;    text-align: right;    width: 140px;}#stylized input, select {    float: left;    font-size: 12px;    padding: 4px 2px;    border: solid 1px #aacfe4;    width: 200px;    margin: 2px 0 20px 10px;}#stylized button {    clear: both;    margin-left: 150px;    width: 246px;    height: 31px;    background: #666666 url(img/button.png) no-repeat;    text-align: center;    line-height: 31px;    color: #FFFFFF;    font-size: 11px;    font-weight: bold;}</style></head><body><script type="text/javascript"             name="cboFastBikes"></script><script name="cboFastBikes">    $(document).ready(function () {        $('#butCallAjax').click(function () {            jQuery.support.cors = true;            $.ajax(                {                    type: "GET",                    url: 'https://fastmotorcycleservice.cloudapp.net/FastMotorcycleListService.svc/list/Bruno',                            data: "{}",                    contentType: "application/json; charset=utf-8",                    dataType: "json",                    success: function (data) {                        //alert('success');                        $.each(data, function (i, theItem) {                            var combo = document.getElementById("cboFastBikes");                            var option = document.createElement("option");                            option.text = theItem.toString();                            option.value = theItem.toString();                            try {                                //alert('success add combo');                                combo.add(option, null); // Other browsers                            }                            catch (error) {                                alert('error found');                                combo.add(option); // really old browser                            }                        });                    },                    error: function (msg, url, line) {                        alert('error trapped in error: function(msg, url, line)');                        alert('msg = ' + msg + ', url = ' + url + ', line = ' + line);                    }                });            //alert('button click');        });    });</script><div id = "stylized" class = "myform">    <form id = "form"        action = "#"        name = "form">        <h1>How to retrieve RESTful Data with jQuery</h1>        <p>This is a basic example</p>        <label>            Fast Motorcycles            <span class = "small">RESTfully Retrieved</span>        </label>        <select id = "cboFastBikes" name = "cboFastBikes"></select>        <button id = "butCallAjax" type = "button" >            Call Azure-hosted RESTful Service</button>        <div class = "spacer"></div>    </form></div></body></html>