Browsers, Servers
& APIs
HTTP Request/Response
Client Side
(front end)
Server Side
(back end)
Server
Data Storage
Request
Response
Browser
Data Exchange
-
When exchanging data between a browser and a server, the data can only be in text
-
Javascript Object Notation (JSON) is a lightweight data-interchange format (text only)
-
JSON is language agnostic (can be formatted by any programming language)
What a JSON Data Looks Like...
{
"id": "2baf70d1-42bb-4437-b551-e5fed5a87abe",
"title": "Castle in the Sky",
"description": "The orphan Sheeta inherited a mysterious crystal that links her to the mythical sky-kingdom of Laputa. With the help of resourceful Pazu and a rollicking band of sky pirates, she makes her way to the ruins of the once-great civilization. Sheeta and Pazu must outwit the evil Muska, who plans to use Laputa's science to make himself ruler of the world.",
"director": "Hayao Miyazaki",
"producer": "Isao Takahata",
"release_date": "1986",
"rt_score": "95",
"people": [
"https://ghibliapi.herokuapp.com/people/"
],
"species": [
"https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
],
"locations": [
"https://ghibliapi.herokuapp.com/locations/"
],
"vehicles": [
"https://ghibliapi.herokuapp.com/vehicles/"
],
"url": "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
}
JSON Values
- JSON format is very similar to Javascript objects
- JSON data is written as name/value pairs
- Name/value pairs must be in double quotes
- JSON is parsed into a ready-to-use Javascript object
- JSON values must be:
- string
- number
- object (JSON object)
- array
- boolean
- null
Parsing Data from the Server
When receiving data from a web server, the JSON data will be parsed using JSON.parse( ) to convert the data into a Javascript object
//JSON Data
'{ "id": "2baf70d1-42bb-4437-b551-e5fed5a87abe","title": "Castle in the Sky",
"director": "Hayao Miyazaki","producer": "Isao Takahata","release_date": "1986"}'
//Converting into a Javascript object
var jsonData = JSON.parse('{ "id": "2baf70d1-42bb-4437-b551-e5fed5a87abe",
"title": "Castle in the Sky","director": "Hayao Miyazaki",
"producer": "Isao Takahata","release_date": "1986"}');
console.log(jsonData);
//logs
/*
{
director: "Hayao Miyazaki",
id: "2baf70d1-42bb-4437-b551-e5fed5a87abe",
producer: "Isao Takahata",
release_date: "1986",
title: "Castle in the Sky"
}
*/Sending Data to the Server
When sending data to a web server, the data has to converted into a string. JSON.stringify( ) converts a Javascript object into a string
//Javascript Object
var dataInput = {
director: "Hayao Miyazaki",
id: "2baf70d1-42bb-4437-b551-e5fed5a87abe",
producer: "Isao Takahata",
release_date: "1986",
title: "Castle in the Sky"
};
//Converting object to JSON
var jsonData = JSON.stringify(dataInput);
console.log(jsonData);
//logs
/*
"{"director":"Hayao Miyazaki","id":"2baf70d1-42bb-4437-b551-e5fed5a87abe",
"producer":"Isao Takahata","release_date":"1986","title":"Castle in the Sky"}"
*/What is an API?
Application Program Interface is a software-to-sofware interface which allows applications to talk (get access) to each other
Let's Access Some API's!
Browser & Server
By vic_lee
Browser & Server
- 513
