Welcome

Overview

This simple website is to demonstrate how AJAX can be used with a RESTful API to exchange data with a web service and dynamically update the website. The brief for the website set the following stipulations:

• Data should be transmitted in the JSON format.
• Both single and multiple data items should be displayed.
• Filtering, searching and polling for data are desirable features.

The author has chosen JSON Placeholder (http://jsonplaceholder.typicode.com/) as the API for these demonstrations.

Users page

The Users page demonstrates a basic usage of AJAX to send HTTP requests to a RESTful API. It allows Create, Read, Update and Delete (CRUD) operations via the POST, GET, PATCH, PUT and DELETE HTTP methods respectively. Validation is applied to input fields to ensure the necessary data is present before a request is sent. Responses in the form of HTTP status codes are presented to the user as an alert with appropriate styling based on whether the request was successful or not.

Posts page

The Posts page demonstrates similar functionality to the Users page, but AJAX is used to make further requests to the API to make the page more user friendly through dropdowns and a simpler interface for deleting records. The comments for each post can be displayed via the 'View comments' buttons. Each 'View comments' button makes an AJAX call to retrieve the comments for that post and displays them in a modal.

Albums page

The Albums page builds on the functionality of the Posts page, but uses features of the API to include parent and child resources of the albums in the GET request JSON data. Details on these features can be found at https://github.com/typicode/json-server. This approach results in more data being returned for the initial request when compared to the GET request on the Posts page, but it means no subsequent requests are required to view the parent and child resources.