How to consume RESTful Services using jQuery and/or Javascript

 

How to consume RESTful Services using jQuery and/or Javascript

  • Comments 6

  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.



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


  • Checkout github.com/.../jquery.rest :)

  • good example, but it's pretty annoying that your code runs off the side of the page so that it is not visible.

     

    Fixed on 1/18/2013
  • oh wow, I can't believe you fixed it that fast.  Good on ya!

  • Interesting to see Microsoft developer working in Firefox instead of Internet Explorer.. :)

  • FYI...I believe he was working in (3) browsers in "How to consume REST from a browser"; and not just Firefox...

  • I would like to authenticate this URL through jquery.

    Authemtication mode is windows.ID there any specific methos to authenticate this type of URL

    cma.tn.gov.in/.../tables(&$format=json

Page 1 of 1 (6 items)
Leave a Comment
  • Please add 6 and 4 and type the answer here:
  • Post