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.
 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. |
| 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> |
Comments
Anonymous
January 17, 2013
Checkout github.com/.../jquery.rest :)Anonymous
January 18, 2013
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/2013Anonymous
January 18, 2013
oh wow, I can't believe you fixed it that fast. Good on ya!Anonymous
August 15, 2013
Interesting to see Microsoft developer working in Firefox instead of Internet Explorer.. :)Anonymous
September 16, 2013
FYI...I believe he was working in (3) browsers in "How to consume REST from a browser"; and not just Firefox...Anonymous
September 09, 2014
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=jsonAnonymous
February 25, 2015
I am using this code for cross domain request. The data is retrieved successfully. When i display the data it shows null message. I don’t know whats wrong with my code. pls help me.. $.ajax({ type: ‘GET’, url: “http://localhost:8080/WSwithJson/employee/1, processData: true, data: {}, dataType: “json”, success: function (data) { alert(“data = “+data); } });