To start, I will create a new project in Icenium using the jQuery template.
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.
>Get Service Data</
>Enter text to search for:</
Now that we have a UI let's look at making the call to get the data
searchTermElem = document.getElementById(
items = data.results;
list = $(
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():
'error getting result'
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.
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:
>Select Name Usage:</
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:
genderElem = document.getElementById(
usageElem = document.getElementById(
+ usageElem.value +
name = $(data).find(
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:
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.