March 1, 2021
Hot Topics:

Real World REST Using Jersey, AJAX and JSON

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

Setting the REST Entry Point

Notice please that in Listing 3 above we've set the entry point for REST URLs to be /rest/*. The line of code below shows an example of a REST entry point that conforms to the entry point configured in Listing 2.


http://localhost:9090 is the domain
/card-dealer-rest/ is the web app
/rest/ is the REST entry point

We are directing REST traffic to /rest/* because we want to leave the root open so that the web server can process URLs for standard web traffic such as:



The benefit here is that we can setup our web app to be both a REST server and a web site that feeds usual web pages that use the REST Server. The reason for having both REST Server and the web pages share the same domain is that we'll be able to write AJAX call backs to the REST server and avoid the cross site security issue. AJAX does not allow you to make XmlHttpRequest calls into any site other than the originating site. Thus, having everything in the same site makes our REST services available to our web pages.

Defining the Card Images Directory

As mentioned above, CardDealer uses Spring injection to set the location of the card image directory in CardDealerHelper. Also, Spring injection is used to supply the filename of the empty card graphic. This information is part of the Spring context configuration file, as shown below in List 4.

Listing 4: A snippet from the web app file, spring-context.xml, for Spring configuration settings

<context:component-scan base-package="com.edmunds.fun.cards" />
  Inject cardDealerHelper with the information for
  imageDirectoryLocationFileSpec and emptyShoeImageFileSpec
<bean id="cardDealerHelper" class="com.edmunds.fun.cards.CardDealerHelper">
  <property name="imageDirectoryLocationFileSpec" value="C:/Projects/CardGames/card-deck" />
  <property name="emptyShoeImageFileSpec" value="empty-shoe.jpg" />

Getting the REST Server up and running using Jetty

The stage is now set to start the REST server. The Maven POM file for the project has been configured to use the Jetty Web Server. Jetty has set in the project to run as a Maven goal. So starting it up is a simple affair.

First we call the Maven install goal to compile, build and install artifacts in the local machine's repository as shown in Figure 5.

Maven Install
Figure 5: Use the Maven install goal to build the project
(click to view)

Then we change the directory down to the project web app and start up the Jetty server using man jetty:run as shown in Figure 6.

Maven Jetty Run
Figure 6: We'll use the Jetty server to get web pages and access REST services
(click to view)

If all is in order, you'll see the Jetty 'up and running" message in your terminal's window as shown below in Figure 7.

Up and Running
Figure 7:The project's web app runs on port 9090

Now were ready to work on the client-side.

Getting REST Application Information Using WADL

One of nicer features of Jersey is that you can configure it to display a WADL file that describes the REST services available on the server. WADL is an acronym for Web Application Description Language. WADL is an XML file that tells you, among other things, how the Java resource class binds to REST URLs. The CardDealerRest project POM file has configured the necessary artifacts which enables the automatic display. So, to view the WADL file for the project we enter the URL:


The trick to getting the WADL file to display automatically is to provide a URL that has "application.wadl" directly after the entry point to the REST service. Figure 8 below shows the result of calling the WADL for the CardDealer REST Service.

Maven Jetty Run
Figure 8: Web Application Description Language (WADL) is an XML structure that is self describing
(click to view)

Calling a Rest Service Using Ajax

Now we're ready to get some cards via a web page. We call, http://localhost:9090/card-dealer-rest/index.html which is the page that has the client side card retrieval code. We click the Get Card button and a card appears. How? By way of AJAX.

The button's click event is bound to a JavaScript getCard() function. getCard() makes an AJAX call back to the REST Server. (Please see Listing 5.) The REST server sends back a string that describes a card as a JSON version of the RestCard object. RestCard is a facade object that presents the Card.imageBytes property as a Base64 encoded string.

Listing 5: The JavaScript function getCard() is called when the Get Card button is clicked.

function getCard()
    if (window.XMLHttpRequest)
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
     else if (window.ActiveXObject)
         // code for IE6, IE5
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          alert("Your browser does not support XMLHTTP!");
     //get the card's shoeId, if one is in play
     var currentShoeId = document.getElementById("shoeId").value;
     //Prepare the REST URL 
     var URL = "rest/card-dealer/card?shoeId=" + currentShoeId;

The JSON-ized RestCard object publishes three properties, code, image and shoeId. The code property reports the suit and rank of the card using the card code convention described above. shoeId reports the particular shoe from which the card was dealt and the property. Image is a Base64 encoded string that contains a graphic of the playing card. Listing 6 below shows the an example of a JSON string that describes a playing card retrieved from the CardDealer REST service.

Listing 6: The JSON Card object publishes the properties, code, image, and shoeId where the property image is a Base64 encoding of a card graphic


Page 3 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