RESTful Communications: JSON Request-Response

Select a planet from the choices below. The request string necessary for a successful XMLHttpRequest communication will be displayed below. Clicking the ‘Send XMLHttpRequest’ button initiates communication between this JavaScript client and the PHP Web Service. The result of this communication will be output above the planetary choices.

Mercury: Venus: Earth: Mars: Jupiter: Saturn: Uranus: Neptune: Pluto:

Explanation of Web Page Functionality

A JavaScript function is triggered when the user selects a planet. This function formats the request string that will be sent off to the server, and displays it in a paragraph above so that the user can check that the correct planet has been selected.

For interest, this JavaScript function is displayed below:

Function that is triggered by the user's selection of a planet.
An image of the function that formats and displays the request string in response to the user’s selection of a planet. Click image to enlarge (opens in same tab).

The aforementioned request string is sent off to a PHP-based Web Service. If this Web Service receives a correctly-formatted request string, it responds with an HTTP header of ‘200 OK’ and a succession of JSON-encoded statistics relating to the selected planet. Once received, this JSON communication is converted into a JavaScript object; relevant properties of this JavaScript object are then accessed in order to output a series of questions and answers relating to the selected planet.

If this Web Service receives an incorrectly-formatted request string, it responds with an HTTP header of ‘400 Bad Request’ and a paragraph of text that explains the expected request string format. You can test this response by clicking the ‘Send XMLHttpRequest’ button without selecting a planet; the explanatory paragraph will be displayed above.

The Web Service will only respond with either a ‘200 OK’ or ‘400 Bad Request’ HTTP header. For all other communication issues – for example, a loss of internet connection – an error message will be displayed in red font, informing the user that an ‘unforeseen communication issue’ has occurred.

For interest, the JavaScript function that facilitates client-server communication in response to clicking the ‘Send XMLHttpRequest’ button is displayed below:

Function that initiates and responds to client-server interaction.
An image of the function that initiates and responds to client-server interaction. Click image to enlarge (opens in same tab).

Forty-year-old father of three wonderful children [William, Seth, and Alyssa]. Works as an Assistant Technical Officer in the Sterile Services Department of Treliske Hospital, Cornwall. Enjoys jogging, web design, learning programming languages, and supporting Arsenal FC. Obtained a BA degree in English from the University of Bolton in 2008, and has continued to gain qualifications in a diverse range of subjects thereafter.

Tagged with: , , ,
Posted in RESTful Communications

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: