Building Apps with jQuery and JAX-RS – Sample App

In my previous post, I discussed the process of building RESTful services in Java using JAX-RS and Jersey. As an example, I shared a web application that provides a simple RESTful API for an Employee directory application:

In this post, I share a simple client application that uses these services to provide a basic User Interface for the application. The client is built with jQuery and uses JSON as the data exchange format.

Accessing the JAX-RS REST services using jQuery is easy. For example, here is the function used to retrieve and display a list of employees:

function getEmployeeList() {
	$.getJSON('http://localhost/directory/rest/employees', function(data) {
		$('#employeeList li').remove();
		var employees = data.employee;
		$.each(employees, function(index, employee) {
			$('#employeeList').append(
				'<li><a href="employeedetails.html#' + employee.id + '">'
				+ employee.firstName + ' ' + employee.lastName + ' ('
				+ employee.title + ')</a></li>');
		});
	});
}

Retrieving the data “Ajax-style” has many benefits:

  • Your UI code doesn’t have a dependency on a specific server-side technology.
  • Your data access logic doesn’t have a dependency on a specific UI technology.
  • You can manipulate the data on the client side (i.e. sort using different criteria) without reloading the page.
  • That decoupled architecture also works offline when working with a local database.
  • You don’t have to reload a page to change the data it displays.

As an illustration of the last bullet, the application uses the “employeedetails.html” page to navigate up and down the org chart (when the user clicks on an employee’s manager link or on one if his/her direct reports). When that happens, the application just loads another employee object in the same page without reloading it.

Run the Application

Click here to run the application. The UI is intentionally plain. I’ll provide a more sophisticated UI in my next post.

Download the Source Code

Click here to download the source code (full Eclipse dynamic web project) or here to download the html and js files only.

5 Responses to Building Apps with jQuery and JAX-RS – Sample App

  1. Sasi August 7, 2012 at 10:15 am #

    Hi Very Nice posts. Thanks for the crisp explanation.

  2. james zhao December 10, 2012 at 5:54 pm #

    Nice article. But I have few questions:
    1. I Import this eclipse project that includes restful web services, and jquery. How can I run jquery and restful web services in Eclipse IDE in the same time?

    2. Do I have deploy separately? How can I deploy restful web services?

  3. Sushil January 25, 2014 at 3:08 pm #

    HI,

    I tried to run the program but it gives “Error Accessing the Server” message.
    I have a Database named “Test”.
    In the JQuery Script, instead of

    var serviceURL = “http://localhost:8080/directory/rest”; I put
    var serviceURL = “http://localhost:8080/test/rest”;

    but still I could not run the program and it gives the same error message. What should I do?

    • Madhavi August 19, 2014 at 10:13 am #

      Hello,

      Were you able o fix this issue? If yes can you please guide me/ I ma having similar problems too.

      Thanks

Trackbacks/Pingbacks

  1. RESTful services with jQuery and Java using JAX-RS and Jersey - December 1, 2011

    [...] is a more in depth version of my previous post on the same topic. The previous article only covered the HTTP GET method for building RESTful [...]

Leave a Reply

css.php