Welcome back in the previous videos we learned about HTTP and JSON. We learned that we can send requests
and get responses. But there's one issue. Up until now
every time we need to communicate with the server we make that request then the browser when it receives
the response does a page refresh. Originally
page loading on the web was simple you'd send a request for a web site to a server.
And as long as nothing went wrong the assets would be downloaded by the web page and displayed on your
computer.
The trouble with this model is that whenever you want to update any parts of the page for example display
a new set of products like on Amazon. Well you'll have to load the entire program again,
even the outline, even the navigation bar at the top. Everything had to get reloaded- a complete page refresh.
This is extremely wasteful and results in a poor user experience especially as pages get larger and more
complex.
You can think of it on the Udemy website.
If we go to Udemy, well if I click on let's say marketing, The top bar you will remain. Did you see that?
It's a nice user experience.
I can click on tabs and I won't get a complete page refresh.
It's -well it loads data automatically on the page.
Now this issue that we had here led to creation of technologies that allow web pages to request small
chunks of data such as HTML, XML, plain text, JSON and display them only when needed.
Helping to solve this refresh problem.
And the technology was called AJAX.
It allows you to read from a web server after the page has loaded and update a web page without reloading
the page. And finally send data in the background while the user is interacting with the Website.
It was actually pioneered by Google in 2006 and now is what we expect of websites and any web app you
see online uses Ajax now.
You see Google had this big problem when we're searching something, well, you would initially type
in 'apple' and it would do a complete page refresh.
But now with this I can maintain the top bar and have this loaded.
I can even have suggestions
Brought up from the server.
And this is all a response from the server saying these are some of the suggestions based on
Apple store.
So it was a big problem for Google and they were able to solve it with Ajax but now we all have this
ability.
So how are we able to do this.
"What is Ajax?" AJAX is just a technology- a method of combining pieces together to achieve this.
And it was achieved using a tool that browsers built and it was called XML HTTP request.
It looked something like this.
You created a new XML HTTP request object. As you can see it looks a little bit tough.
You make a request -you make a get request at this URL you say onload when it loads. If the
status the response is greater than 200 or less than 400.
It's a success.
We're going to parse the response text remember because we're receiving a string from the server. If it's
not a success well we can return an error and we then send our request and also listen for any errors.
It looks pretty tough but it is things that we've gone over. But don't worry we actually don't do this
anymore.
This was the old way of doing it when Ajax was first introduced.
jQuery came along and said well this is kind of tough to do
every time. We'll make it easy for you by just doing this.
And that was another part of the reason that jQuery was popular.
We can just do Ajax requests doing this method.
But now there's actually an even nicer newer way that we've used actually when we build our react
app and it's supported by the browsers and that is called fetch.
As you remember it was fetch at the URL and then we did this '.then(response)' and we received a response.
Now this is a really good thing because page updates are a lot quicker and you don't have to wait for
the page to refresh.
Meaning that the site feels faster and more responsive.
Also less data is downloaded on each update, meaning less wasted bandwidth.
And this is a major, major issue especially on mobile devices where internet connection might not be
as good.
Ajax allows web pages and by extension web applications to change content dynamically and it is everywhere.
It is something that is just very nice.
It looks intimidating but it's just a matter of doing this fetch that does HTTP for you and all you
do is say if you want to do a GET, a POST and add some JSON data to that request.
So let's review again what happens with Ajax. An event occurs on a web page such as logging in and I
click sign in. XML HTTP request object-
Again something that web browsers have implemented is created and that's created using javascript.
XML HTTP request object sends a request to the web server the server processes the request and then the
server sends a response back to the web page.
The response is read by javascript and the user is able to login. At the same time only updating a small
portion of the window.
That is what a single page application is and its a word that you've probably heard before and it's a trend
in how to make web apps. Where you load a base an almost empty page and build the content on the fly
based on the data fetched from the server.
Let's go back to you Udemy.
When I click on a course, let's do 'public relations' you see that this is loading one at a time. I had
the top bar loaded.
Then I had a pause and then the rest loaded.
If I click on 'Explore course' you'll see again that top bar loaded.
Other parts of the web slowly dynamically load.
And again if I go back to 'photography' for example again parts of the web page load dynamically and that's
the beauty. These applications nearly never do a full reload they destroy the previous content all or
a part of it and we build it based on new data - new page.
And this might sound familiar to you.
Do you remember how we built our 'robofriends' app.
We fetched this URL that gave us users.
So now that we understand these concepts let's go line by line and see what happens.
I used fetch -based on what I said, Fetch should be part of the window object right?
Let's check. If I open up the console and I do
'window.fetch' yeah
fetch is a function that we can use and this URL if you remember returns for us-
What is that?
Yeah, a JSON object.
And this JSON object, fetch allows us to do something called response - 'response.json()'.
Well let's just do this for now and see what happens.
I'm going to copy and paste this. I'm going to open up the console and you know I'm going to open up
a new tab to show you that you can do this from anywhere.
If I copy and paste this fetch I get something called a promise and this is something in javascript
that you'll get used to.
Promise is saying "hey I'm making a request to somewhere over the Internet and I promise to let you know
when I have this value returned."
So the way you access promise is - so you have this: 'once this is returned
give me the value'.
You do '.then'
and it gives you the response. If I add to my previous request .then
And I do 'response console.log(response)'.
Look at that I get a response. Status 200 we'll remember this.
OK that's good.
And we also get this body but it says breathable stream. And fetch-
I mean we learned about JSON.parse to parse JSON.
But fetch actually comes with its own method called well "json".
So on this response if we do "json" it will actually convert it for us.
Let's see. If I go back to that request again I get a response. If instead of console logging, I say
'response.json()'
In that case, I get a promise again.
So that means we need to do .then to receive whenever this returns the promise which is the value.
So again I go up and do .then
And in this case let's see what data we receive we get data and we'll console.log data.
If i press enter. Look at that we receive our users- the same users that were here.
So you see now that we simply use the fetch API which allows us to do an AJAX call after the component
mounted.
So once our robo friends app was loaded we made an Ajax request using the fetch API.
We got a response which was a promise.
So we had to do that then and this response and this is just standard that anytime you do fetch you'll
just remember doing .json
I converted this into something that well we can use in javascript and because this returned a promise
we did .then we got the users and now we have the users object and we never had to refresh the page.
And by the way if you want this JSON whenever you're accessing it to look prettier and be a little
bit more readable I am using a Chrome extension called 'JSONView'.
It's free.
You just add it Chrome it automatically does it for you.
I highly recommend it. Okay
let's go back to this
-this should make sense now.
We now have the ability to dynamically load our web pages make single page applications using AJAX and
Ajax is a combination of tools of using the fetch API, using HTTP, using JSON to communicate with
servers.
And now we have a complete picture of our front end. Our front end can have HTML, CSS, javascript, react.
We can use AJAX to communicate with servers and we use JSON data to send data over the wire. Really
excited for the next couple of videos.
So I'll see in that one. Bye-Bye.