Web APIs are a fundamental part of HTML5-based application development and are especially useful to mobile device apps. They allow HTML5 applications to share cloud-based data and functionality over the web so that developers can create brand new applications without extensive use of Objective C or Java. The Comic Director web API is no different; comics submitted from users around the world can be accessed via the API. The Comic Director home page was built using the API as a way for anyone to view comics that are submitted. This lesson will demonstrate how to access API data with a JavaScript-based tool called XHR, and then visualize that data with a combination of HTML and JavaScript.
View user submissions from around the world on the Comic Director home page
Preparing Your API Message
Communicating with a web API requires you to, first, know what data you need, and second, an understanding of how to construct the message that will serve as your request. This message is relayed in the form of a URL; the example below will ask the server using the Comic Director web API to locate and return four comic spotlight items. This dialogue with the server is facilitated with a JavaScript-based communication API called XHR (XMLHttpRequest) which lets you send requests for information directly to a web server using specially formatted HTTP or HTTPS URLs.
XHR URL Example:http://www.comicdirector.com/service/comic/search?spotlight=true&limit=4
Comics featured in the Spotlight section of the Comic Director home page
Using XHR to Communicate with Servers
The XHR API makes it very easy to request information. To begin, you need to create an instance of an XHR object; for an example, see the JavaScript code below. This code tells the XHR object that a request is needed, and provides guidance for handling request changes. This is also where you input the URL message to request data from the previous step.
apiCall = new httpRequest();
apiCall.onreadystatechange = success;
apiCall.open('GET', http://www.comicdirector.com/service/comic/search?spotlight=true&limit=4);
apiCall.send();
Example of the server and XHR communication flow
Monitoring Progress
The XHR API provides the ability to observe the progress of a request as it is being processed. Notifications, in the form of status codes, are supplied to inform you of the progress, alert you to errors, etc. A status code ‘4’ indicates that data was found, and a status code ‘200’ indicates that the data found was exactly what was asked for and that the request was a success.
Viewing the Results with JavaScript and HTML
Following a successful XHR call, it is time to update the HTML code so the data can be visualized. The JavaScript code below may be used to create a loop that will construct the HTML used to visualize returned server data. This JavaScript essentially builds and inserts the API data into the appropriate HTML tags, and automates this process for each of the returned spotlight comics and associated meta data. There are three HTML elements created: the comic title text, the author text, and the comic image itself.
function showComicsInList() {
var list = document.getElementById('list');
for (var i = 0, l = apiData.comics.length; i < l; i++) {
var comic = apiData.comics[i]
, title = document.createElement('dt')
, desc = document.createElement('dd')
, img = document.createElement('img');
title.innerText = comic.title + ' by: ' + comic.author;
img.src = comic.thumbnail_uri;
desc.appendChild(img);
list.appendChild(title);
list.appendChild(desc);
Today’s web API ecosystem is growing immensely. Developers and even large corporations like Twitter and Google are making their APIs available to the larger developer community. Developers will continue to rely on tools like JavaScript and XHR to share data and functionality in order to create new kinds of applications and web-based implementations of those components.
Learn more about web application development at the Intel Developer Zone. Check out the new HTML5 Development Environment and look at code examples at the HTML5 Playground.
Intel HTML5 Development Environment:
The XDK is the world’s first HTML5 powered mobile application development tool. With it, you can create, debug and build customized, robust HTML5 apps in hours, and the XDK runs on either Mac or PC Platforms. Build hybrid HTML5 apps for iOS, Android, Windows 8 and Tizen tablets and smartphones, as well as HTML5 web apps for Facebook, Google and other hosting platforms.
software.intel.com/html5tools
Intel HTML5 Playground:
The HTML5* Playground provides developers with a web based code editor, a live application preview window, and a library of sample code and snippets to use as starting points. Anything you that you create, can be shared using a permalink.
http://software.intel.com/appup/html5-playground