To start, I will create a new project in Icenium using the jQuery template.
Next, we need some data to read so I will just consume a twitter feed. The request is quite simple:I will clean up the html to remove what we don’t want and modify one of the template's page div tags to show our found tweets.
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
title
>Get Service Data</
title
>
<
link
href
=
"jquery-mobile/jquery.mobile-1.2.0.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"styles/main.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"cordova.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"jquery-mobile/jquery-1.8.2.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"jquery-mobile/jquery.mobile-1.2.0.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"http://maps.google.com/maps/api/js?sensor=true"
></
script
>
<
script
src
=
"js/hello-world.js"
type
=
"text/javascript"
></
script
>
</
head
>
<
body
>
<
div
data-role
=
"page"
id
=
"home"
>
<
div
data-role
=
"header"
>
<
h1
>Get Service Data</
h1
>
</
div
>
<
div
data-role
=
"content"
></
div
>
<
div
class
=
"nav"
>
<
ul
data-role
=
"listview"
>
<
li
><
a
href
=
"#twitterData"
data-transition
=
"slide"
>Twitter Example</
a
></
li
>
</
ul
>
</
div
>
</
div
>
<
div
data-role
=
"page"
id
=
"twitterData"
data-add-back-btn
=
"true"
>
<
div
data-role
=
"header"
>
<
h1
>Twitter Search</
h1
>
</
div
>
<
div
data-role
=
"content"
>
<
div
id
=
'searchTermInput'
>
<
label
for
=
"txtSearchTerm"
>Enter text to search for:</
label
>
<
input
type
=
"text"
id
=
"txtSearchTerm"
value
=
""
/>
</
div
>
<
div
id
=
'searchTermText'
style
=
"display:block;"
></
div
>
<
div
align
=
"center"
>
<
div
data-role
=
"controlgroup"
style
=
"display:inline-block;"
data-type
=
"horizontal"
>
<
button
data-theme
=
"a"
onClick
=
"twitterSearch();"
>Search</
button
>
</
div
>
</
div
>
<
div
align
=
"center"
>
<
ul
id
=
"twitterResults"
></
ul
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
Now that we have a UI let's look at making the call to get the data
function
twitterSearch() {
var
searchTermElem = document.getElementById(
'txtSearchTerm'
);
$.getJSON(
'http://search.twitter.com/search.json?q='
+ searchTermElem.value,
function
(data) {
var
items = data.results;
var
list = $(
'#twitterResults'
);
list.html(
""
);
$.each(items,
function
() {
list.append($(document.createElement(
'li'
)).html(
this
.from_user));
});
});
}
The code will get the JSON data from Twitter and then we show the user where each tweet is from. The response can further be explored to display all the information desired. This method of calling a service is simple and straight forward but will only load data via a HTTP GET request. The pattern will not allow any flexibility for more complex JSON calls. You can see the full documentation for the jQuery.getJSON() api at http://api.jquery.com/jQuery.getJSON/.
If this only allows for get requests, how can we make more use of JSON? It turns out that jQuery.getJSON() is a shorthand method function. I would suggest if you really want to get deep, do some exploring of the jQuery.getJSON() method - you will learn a lot (maybe more than you wanted to). If we look there is a jQuery.ajax() method provided by jQuery that gives complete control of any asynchronous HTTP request. Using the jQuery.ajax() method is a little more complex but once the pattern is learned it will provide all the flexibility you will need to make all types of service calls. You can see the full documentation for the jQuery.ajax() api at http://api.jquery.com/jQuery.ajax/
Let see what our code looks like if we use jQuery.ajax():
function
twitterSearch() {
var
searchTermElem = document.getElementById(
'txtSearchTerm'
);
$.ajax({
url:
'http://search.twitter.com/search.json?q='
+ searchTermElem.value,
success:
function
(data) {
var
items = data.results;
var
list = $(
'#twitterResults'
);
list.html(
""
);
$.each(items,
function
() {
list.append($(document.createElement(
'li'
)).html(
this
.from_user));
});},
error:
function
(){ alert(
'error getting result'
); },
datatype:
'json'
,
type:
'GET'
});
}
In this version of the code we can see we now have access to a lot more functionality and this is just the tip of the usage capabilities. For the purposes of this post I will stick with what is here. First, you will see we need to create an object with the settings we want specified for the call. In the settings object we specify the “type” of call and the “datatype” we expect. These two settings give a lot of flexibility and control. In this instance the call is the same. It is a HTTP GET and returned JSON data.
Now let's see what we need to do to make a different service call.
This time let’s get some data about names using the behindthename.com api. We will get a random set of names and have the option to specify the gender and the originating usage of the names. The response from this service is in XML format. We will do a simple finding of the data we are interested in for the response but there a several options for parsing simple XML in to JSON or right in to JavaScript objects.
Note: This service requires an api key that you will need to get in order to make this call, I have redacted my key from the code here and from what I have posted. To get your key go here and register for one, it is quick and simple.
The UI looks like:
<
div
data-role
=
"page"
id
=
"nameData"
data-add-back-btn
=
"true"
>
<
div
data-role
=
"header"
>
<
h1
>Name Search</
h1
>
</
div
>
<
div
data-role
=
"content"
>
<
div
id
=
'optionSelect'
>
<
label
for
=
"selGender"
>Gender:</
label
>
<
select
id
=
"selGender"
>
<
option
value
=
'f'
>Female</
option
>
<
option
value
=
'm'
>Male</
option
>
</
select
>
<
label
for
=
'selUsage'
>Select Name Usage:</
label
>
<
select
id
=
'selUsage'
>
<
option
value
=
'anci'
>Ancient</
option
>
<
option
selected
value
=
'bul'
>Bulgarian</
option
>
<
option
value
=
'eng'
>English</
option
>
</
select
>
</
div
>
<
div
id
=
'nameSearchText'
style
=
"display:block;"
></
div
>
<
div
align
=
"center"
>
<
div
data-role
=
"controlgroup"
style
=
"display:inline-block;"
data-type
=
"horizontal"
>
<
button
data-theme
=
"a"
onClick
=
"nameSearch();"
>Search</
button
>
</
div
>
</
div
>
<
div
align
=
"center"
>
<
ul
id
=
"nameResults"
></
ul
>
</
div
>
</
div
>
</
div
>
Note: I removed a lot of the usage options to save space here. You can get the full list in the source code.
And the code to get the names is:
function
getNames(){
var
genderElem = document.getElementById(
'selGender'
);
var
usageElem = document.getElementById(
'selUsage'
);
$.ajax({
url:
'http://www.behindthename.com/api/random.php?key=xxxxxxx&number=6&usage='
+ usageElem.value +
'&gender='
+ genderElem.value,
success:
function
(data) {
var
name = $(data).find(
'name'
);
var
list = $(
'#nameResults'
);
list.html(
""
);
$.each(name,
function
() {
list.append($(document.createElement(
'li'
)).html(
this
.childNodes[0]));
});
},
error:
function
(){ alert(
'error getting result'
); },
datatype:
'xml'
,
type:
'GET'
});
}
With this code we will need to use the jQuery.ajax() method because we are expecting XML data in response. The response is a simple xml document that we just iterate through all the name nodes adding each name to a list.
The xml document looks like this:
<
response
>
<
script
/>
<
names
>
<
name
>Evvie</
name
>
<
name
>Nicky</
name
>
<
name
>Mavis</
name
>
<
name
>Richardine</
name
>
<
name
>Charis</
name
>
<
name
>Alice</
name
>
</
names
>
</
response
>
We have seen different ways to call some simple services and how to handle different response types. This is just scratching the surface of what can be done in Icenium with jQuery to retrieve data from services. We would like to know what type of services you are using.
To see the full code you can see it in my Github repo at https://github.com/woodyp/getServiceData-Demo.
Happy coding!