Anatomy of a web app - part 3 - AJAX
This is the third part of a series of articles that give a high-level overview how web applications work. You can find the rest of the articles in this series here.
I originally wrote this series of articles as curriculum content for Umuzi. I'm republishing them here with permission.
In the last part of our story, you used the "search" function, and you were redirected to a new page containing your search results.
Loading more
Now let's say you are looking at the listed toasters and you aren't quite finding the one you want. So you scroll to the bottom of the page and click on the "Load more" button.
Now you don't get redirected to a new page. Instead what happens is:
- the button turns into a loading spinner
- then new toasters arrive on the bottom of the page, you can keep scrolling down
So you didn't redirect to a new page, your browser somehow fetched extra information from the server and displayed it without the need for a redirect.
What happened?
AJAX is what happened. AJAX stands for "Asynchronous JavaScript And XML". This sounds really complicated, but it's really just another request and response thing.
Here's how it works:
Your browser has the ability to send HTTP(S) requests to the Takealot server whenever it needs to. So far in this story, you have only seen these requests being triggered when new pages are visited. When you visited the Takealot home page in part 1, then your browser requested some information from the server. Then when you landed on the search results page in part 2, more information was requested.
So requests get sent to the server when you navigate to a new page. But they can also be sent in other circumstances.
If you think back to earlier in this series, you would have been introduced to the 3 languages of the web. HTML, CSS and JavaScript.
HTML describes the content of a web page, and CSS describes the looks. Javascript describes the smarts - you can use JavaScript to implement algorithms.
When you click on the "Load More" button then some JavaScript functionality is triggered. The algorithm looks something like this:
Change the Load More button to look like a spinner
Send a request to the server to fetch the next page of search results
Wait for the results
Draw the new toasters onto the screen
Change the Load More button so it no longer looks like a spinner
AJAX sounds fancy, but it just means: Sending HTTP(S) requests from a browser whenever you need to (instead of just on page load).
Some things to notice
A few cool things are happening here:
Pagination
Not all toasters were loaded when you accessed the search result page for the first time, you needed to load more. Most websites that need to display large listings of information do something similar. The technique is called paging or pagination.
This is useful because if you fetch all the toaster information on the first-page visit then:
- you'd be fetching a lot of data, much of which would be irrelevant (usually the thing you want to see is on the first page of results)
- the server and database would be doing extra work for nothing
- you would need to wait longer for the information, so the page would take longer to load
- the whole web page would take up extra memory and slow your computer down
Pagination is a pretty efficient way to give the user the information they need when they need it.
Javascript can get triggered by buttons
The Load More button is defined in HTML. When a user clicks on that button then it triggers a JavaScript function.
It's possible to tie different JavaScript functions to different events as well, it's not just limited to button clicks.
Javascript can update HTML and CSS
Here is the algorithm again:
1. Change the Load More button to look like a spinner
2. Send a request to the server to fetch the next page of search results
3. Wait for the results
4. Draw the new toasters onto the screen
5. Change the Load More button so it no longer looks like a spinner
JavaScript was used to manipulate the HTML and CSS of the website. It took the response from the AJAX request and then figured out how to turn it into something visual.
A possible point of confusion is that, even though HTML and CSS are being manipulated, Javascript isn't changing any of the original files.
When a browser receives HTML and CSS files then it draws a picture called the DOM (Document Object Model). When you use Javascript to make changes to what is displayed then you are not changing the original files, you are editing the DOM.
This technique is referred to as DOM manipulation.
In conclusion
You have now seen how JavaScript fits into the picture, and you've been introduced to AJAX and DOM Manipulation.
Next up, we're going to learn about authentication and authorization.
Here is the next part of the series: Anatomy of a web app - part 4 - Auth
Want to join one of my upcoming workshops?
I run hands-on, small-group, expert-led, hyper-practical online workshops covering a variety of different tools and technologies.