Welcome back there is one missing piece with the diagram we created in the previous video on
HTTP.
We talked about URL parameters such as the "google.com/about" and query string parameters we
can do with GET but what about the data
when we post something. Can we post anything?
Well not really. When exchanging data between a browser and a server the data can only be text.
So we can't just send a javascript object such as a user with first name John and last name doe.
One because HTTP won't understand it.
But also if we were sending this data to Google servers-
Well unlike the Front-End the web browser where HTML, CSS and Javascript is a standard when I send
a user object to the server.
A server can use any type of language like Python,
Go, PHP. If we send them a java script type, like an object they will really be confused because they
would have no idea what it is.
That's not really their language.
Text on the other hand can be understood by all.
So we need a way to have a standard way to send data over the wires and receive it.
That is what JSON is and what we're going to talk about it in this video.
JSON stands for javascript object notation. It's a syntax for storing and exchanging data and it's text
written with javascript object notation.
Let's look at the second point here.
JSON is a syntax for storing and exchanging data.
It's used to send data between machine.
Is it the only way? No, there's also XML. Both XML and JSON can be used to receive data from
a web server.
And you can see the differences between the two.
These are the same data.
Just first names and last names of employees and XML uses
this HTML like syntax while JSON uses well an object - javascript object like syntax. But the
standard is now more towards JSON because when you're writing front end code in Javascript getting a
JSON data back makes it easier to load that data into an object tree because it's so similar to
a javascript object than an XML.
And JSON format is a more succinct way which saves bandwidth and improves response times when sending
messages back and forth between client and server.
And XML is just not very efficient. So JSON now is more of a standard you'll still see XML but it
is outdated so we won't be talking about it in this video.
But they both are used to transfer data between two machines that might not speak the same language.
JSON however although it looks similar to Javascript it is a little bit different.
It has these double quotes for even properties.
Everything has to be a string and wrapped around double quotes.
And well it looks like it's a object syntax. But JSON can be read by any language.
If Google servers was running a different language they'll understand JSON they'll be able to modify
that JSON which is just text into their own version.
So now we can convert this into a JSON object, send it over HTTP.
And then the Google servers or whatever it is will change it to their own language understand it and
then send a response.
Again let's say for example it was returning - the user has money 345 dollars.
Well it will then modify this to JSON send it over the wire and then the web browser will change it
from JSON to javascript.
But how can we do that?
Luckily for us javascript comes with its own JSON function.
We have JSON.parse and JSON.stringify with JSON.parse
if we had JSON again this form, we simply wrap it as the parameter of parse and it will return a object.
In the opposite way with stringify
we can give it an object such as the one we just created and it will return JSON.
So this myJSON variable can now be put into the HTTP request to send it over the wire or the server
can respond with myJSON.
So let's review JSON is text and we can convert any javascript object into JSON and send JSON to
the server.
We can also convert any JSON received from the server into javascript objects. This way we can work
with data as javascript objects with no complicated translation and this text can be used as a data format
for any programming language.
So lets go through the flow one more time
now with this complete. User object before I send it with HTTP I will do
"JSON.stringify(user);"
So now its converted into a JSON string and this JSON string will be sent over HTTP to the Google
servers.
It is then going to say JSON.parse this user so it understands it.
Lets say it was running Javascript or Node.
Now it'll understand the user. They'll say - oh he wants the money amount for this user.
So now it gets money 345 from the account. It stringify's it the money variable. Sends it with a status
code of 200
And now the web browser can parse this string that it received and see that oh yeah I have a variable
money of $345. And don't worry when we get to the backend section in a few videos we are going to show
you exactly how to do this in code. How to make HTTP requests, use JSON, use GET, POST, PUT, DELETE
methods and I'm going to show you how to do that
in our final project as well.
But now this diagram although a little bit messy should make a little bit more sense and you should
understand now how things are working.
In the next video I'm going to introduce you to something that changed web browsing in 2006.
I'll see you in that one. Bye-bye.