February 28, 2021
Hot Topics:

Real World REST Using Jersey, AJAX and JSON

  • By Bob Reselman
  • Send Email »
  • More Articles »

Rendering JSON Based Images in a Browser

The AJAX callback JavaScript function that provides the intelligence to apply information in the returned RestCard JSON object to the browser DOM is shown below in Listing 7. Poetically enough the callback function is named, callback().

Listing 7: The JavaScript code called upon a successful AJAX HttpRequest

function callback(){
    //Create the card JSON object
    var card = eval( "(" + xmlhttp.responseText + ")" );
    //Get the <img> element
    var img = document.getElementById("cardViewer");
    //Apply the Base64 string, telling the image element about the nature of
    //the data
    img.src="data:image/" + card.fileFormat + ";base64," + card.image;
    //Put the card code in the image alt text
    img.alt = card.code;
    //Get the hidden element and apply the shoeId value
    var shoeId = document.getElementById("shoeId");
    shoeId.value = card.shoeId;
    //Also, display the shoeId value on the page          
    var shoeIdDiv = document.getElementById("shoeIdDiv");
    shoeIdDiv.innerHTML = card.shoeId;
    //Display the card code on the page          
    var cardCodeDiv = document.getElementById("cardCodeDiv");
    cardCodeDiv.innerHTML = card.code;

Basically the function, callback(), runs the Javascript eval() method on the xmlhttp.responseText (formally XMLHttpRequest.ResponseText), which is the string returned by the REST server. Running eval() converts the string into the JSON RestCard object. Once the string has been objectified, the JavaScript finds the relevant DOM objects on the web page and applies the associated values from the JSON RestCard object onto the DOM. Notice please in this line of the code below, taken from the JavaScript above:

img.src="data:image/" + card.fileFormat + ";base64," + card.image;

This is the piece of code that allows the JavaScript in the callback to render the Base64 string as an image on a web page. The code is short, but it does a lot. Blasting bytes into a web page as an image at runtime is no small undertaking. This is all possible because of the use of the data URL scheme.

data:[<mediatype>][;base64],<data> is a URL scheme that defines a URL as pure data. Thus, we can attach the Base64 encoded string to the image element on the fly!

Getting the code

Before we bring things to a close you might like to take a look at the Java and JavaScript source code that used in this project. Table 2 below provides a list of links that will take you to a particular piece of code. Also, a description is provided with each link.

Table 2: The CardDealer project source code

Code Filename Description Layer
index.html Web page that provides random card Display Web Site
CardDealerRest.java The Jersey Java resource class that exposes REST services REST
RestCard.java A facade object that exposes the Card image a Base64 string. REST
Card.java A Plain Old Java Object (POJO) that describes a playing card Service
CardDealerHelper.java A helper class the provides access to image files on the host computer Service
EmptyShoeException.java Thrown when a Shoe is empty of cards Service
InvalidCardDeckException.java Thrown when the image directory does not have all of the necessary image files, one for each playing card, named according to the CardDealer card-code convention. Service
Shoe.java A POJO that is an abstraction of the card shoe, as you find in a casino. You access a Shoe via the ShoeFactory Service
Shoeable.java The interface that describes the base services provided by a Shoe Service
ShoeFactory.java A singleton that creates, provides and manages Shoe objects Service


Whew! This has been a long trip to show a playing card on a web page. But getting a card on a page is only the facade that masks the significance and use of REST and Jersey, which is the purpose of this article. REST is not going away and Jersey continues to grow in use. You've learned that by mastering the basics of Jersey annotations and URL paths you can bring the power of REST to your Java code very quickly. So hopefully you've found this trip has been worthwhile undertaking.

Installing the CardDealer sample project

The sample project for this article, CardDealer is a fully configured Maven project. Thus, you need to have Maven installed on the machine that you are using to run this code.(Maven is supported by Windows, Linux and Mac OSX.) To get the project up and running take the following steps.

  1. Download the project source code zip file here, and the project's card image directory zip file here.
  2. Unzip the project code zip file, card-dealer-1.0.zip onto your machine
  3. Unzip the project's image directory zip file, card-deck.zip to onto your machine
  4. Set the location of the image directory in the node, <property name="imageDirectoryLocationFileSpec" value="LOCATION_OF_IMAGE_DIR_ON_YOUR_MACHINE" /> in the file, /YOUR_INSTALLATION_DIRECTORY/card-dealer-1.0/card-dealer-rest/src/main/webapp/WEB-INF/spring-context.xml.
  5. Install the code in your local Maven repository, as shown above in Figure 5.
  6. Start the Jetty web server, under Maven as shown in Figure 6.
  7. In your browser, enter the URL, http://localhost:9090/card-dealer-rest/index.html

Related Resources

About the Author

Bob Reselman is a Senior Technical Writer and Technical Editor for Edmunds Inc. Edmunds Inc. is a leading publisher of high volume, high availability, state of the art, Java based Web sites dedicated to empowering the automotive consumer. Experience Edmunds technology by visiting, www.Edmunds.com and www.InsideLine.com.

Page 4 of 4

This article was originally published on October 9, 2009

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date