| Tags | skill/web_intro |
| Hard Prerequisites | |
| IMPORTANT: Please review these prerequisites, they include important information that will help you with this content. | |
|
|
In the last part of our story, you used the “search” function, and you were redirected to a new page containing your search results.
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:
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.
AJAX is what happened. AJAX stands for “Asynchronous JavaScript And XML”, so a lot of people think it is way more complicated than it actually is.
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 course, 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 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).
A few cool things are happening here:
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:
Pagination is a pretty efficient way to give the user the information they need when they need it.
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.
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
Can you see how JavaScript was used to manipulate the HTML and CSS of the website?
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.
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.