This is a prototype of a project done on a client website.
For a client’s About page, my designer wanted to have an uncluttered look when the page loads. The page was designed to have details about the company, mission, board member profiles, and some other interesting facts.
She designed the page to have the team member’s info hidden as the page loads initially, with a big fancy button promoting the user to click in order to find out about the team member’s details.
To keep the team member’s bio and other information easy for the client to update, we decided to build out a JSON file with the speaker’s name and a short bio. The information was stored as javascript objects.
In order to prevent, the page from reloading when the user clicks on the button, I decided to use AJAX. Using Ajax, I parsed the JSON and loaded the output into a JSON object. I then created an unordered list of the bios and displayed them on the page. The button ‘onclick’ event triggered the process.
What is a JSON file?
JSON stands for Javascript Object Notation. It is a text file used to exchange data between browser and server. The data is stored as javascript objects.
Example of a JSON file
[
{
"name":"Barot Bellingham",
"shortname":"Barot_Bellingham",
"reknown":"Royal Academy of Painting and Sculpture",
"bio":"Barot has just finished his final year at The Royal Academy of Painting and Sculpture, where he excelled in glass etching paintings and portraiture. Hailed as one of the most diverse artists of his generation, Barot is equally as skilled with watercolors as he is with oils, and is just as well-balanced in different subject areas. Barot's collection entitled \"The Un-Collection\" will adorn the walls of Gilbert Hall, depicting his range of skills and sensibilities - all of them, uniquely Barot, yet undeniably different"
}
]About AJAX
- AJAX stands for Asynchronous Javascript and XML.
- This means the client can request new pieces of information from the server any time without loading the entire page. The new request can be triggered by an event on the browser such as clicking on a button, hovering on an image, etc.
- Javascript handles the events, creating new requests, etc. and also takes care of updating the part of the document that needs to be changed.
- Javascript talks to the server using APIs called XHR-XML HTTP Request.
- Data transferred from the server to the client using XHR can be a text file, HTML file, or JSON object.
The html code on the page for the carousel
<p>Click the button below, to load the speaker bio details</p>
<button id="loadMore">Load Speaker Bios </button>
<div id="update"></div>Javascript code to create an AJAX request and load the JSON with the bio details
document.getElementById("loadMore").onclick = function(){
/* Supporting Older IE Browsers */
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}
else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET', 'data.json');
request.onreadystatechange = function(){
if((request.readyState === 4) && (request.status === 200)){
var items = JSON.parse(request.responseText);
console.log(items);
var output = "<ul>";
for(var key in items){
output += "<li>" + items[key].bio + "</li>";
}
output += "</ul>";
document.getElementById("update").innerHTML = output;
}
}; request.send();
}I hope you found this article useful and interesting.