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:
- /rest/employees — Returns all employees
- /rest/employees/1 — Returns an employee identified by id (employee 1 in this case)
- /rest/employees/1/reports — Returns direct reports of an employee (employee 1 in this case)
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.
