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

http://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.

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.

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.

All that is required is adding an html file. HTML + Javascript is all that is needed to consume RESTful data.

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.

A select and and button control

cboFastBikes gets loaded with data after making AJAX calls to the Azure hosted RESTful web service.

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.

   
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 <script src="http://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: 'http://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

   
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html src="http://code.jquery.com/jquery-1.7.js">

<head>
<title>jQuery calling RESTful Services</title>
<meta xmlns="http://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:                      'http://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>