Dynamic User Interactions powered with AJAX
AJAX, standing for Asynchronous JavaScript and XML, has become a standard in modern web development, enabling smooth and dynamic user interactions. We have all seen this - most probably the most common and typical example is a "load more" button showing new content without actually reloading the page. But there’s much more - dynamic search, infinite scrolling or auto-refreshing Twitter feeds.
Asynchronous actions are great when you don’t want to distract the users by reloading the website they’re currently on, which can be frustrating. Take a look at the examples below and get inspired for your next project!
What is AJAX?
AJAX is a set of web development techniques to create asynchronous web applications. Or, to be more specific, it’s a group of JavaScript methods which allow us to communicate with a server without reloading the whole page. So when and where can we meet AJAX? Let’s take a look at some real-life examples which each and every one of us encounters on an everyday basis.
Dynamic shopping cart
When shopping online, you may sometimes notice that in some web stores the page you’re on doesn’t reload when you add an item to the cart. You just click a button and notice that the number next to the cart icon is increased by one. This is how you know that although the page has not been reloaded, the server has been notified that there is a new product in the cart. The best part? Your item will stay in the cart even if you turn off your computer before making the purchase.
Dynamic web forms
AJAX can be used to create nice dynamic web forms. When you click "send" button, most often a spinning icon will appear and you will be informed if your message has been sent - all without a single page reload.
Dynamic pagination
Yes, we can have functional pagination that doesn’t reload the whole page. With AJAX, we can take a part of the next page and paste it wherever we want. Moreover, we can at the very same time change the URI address in the browser with history API.
Remote server communication
JavaScript can send requests to remote servers. For example, we can query the Twitter database for the most popular tweets from the last 5 minutes.
As we can see, AJAX is an extremely handy and fast method to get or post data from or to our server. Now let’s discuss in more detail two more uses of AJAX that are fairly common in modern websites - dynamic sorting/filtering and lazy loading.
Dynamic sorting/ filtering
Dynamic sorting/filtering is very useful from the UX point of view. We can type out only the first couple of letters of the searched phrase to be prompted with matching results. Here’s an example:
When we type out the letter "a", JavaScript sends a request to the server to check if the database contains any fruits with this character. The server returns a response with the data and JavaScript processes the data to show it on the page. Then, when we type out a second letter, which in our example is "p", JavaScript sends a request to check if there are any items containing the “ap” cluster. Again, the server responds with the data and the script displays it. Everything happens in the blink of an eye, especially when the data are sent in a lightweight format like JSON.
SEO and dynamic content
In the recent years more and more of the web has been populated with AJAX-based applications, replacing static HTML pages. This is a great step forward in terms of user experience because it makes the applications much faster and richer. However, making your application more dynamic comes at a huge cost: web crawlers are not able to see any dynamically created content. As a result, the most modern applications are also the ones that are often the least searchable.
So keep in mind that while the browsers can execute JavaScript and produce content on the fly, the crawlers cannot. To make the crawlers see what a user can see, the server needs to give the crawlers an HTML snapshot, which is the result of JavaScript execution on your page.
If it’s important for you to show data to Google crawlers, you need to make sure that you have a back-end fallback, the aforementioned "snapshot".
Lazy loading
"Lazy loading" is a collective name for the techniques for loading images or web content when they are needed instead of showing them all at once. For example, we might have quite a heavy site full of photos and movies and the problem is that it loads slowly. We can easily solve the problem by applying lazy loading to show only a portion of content and load more with AJAX when a user scrolls down. This solution is probably most common on social media sites. Next time you scroll down your Facebook wall, notice that the content loads dynamically (we call it "infinite scroll") - this is AJAX magic in practice.
How does it work exactly? Imagine that a Facebook wall is a huge list of posts wrapped in pagination. The pagination panel is invisible for us: we cannot see on which page we are and how many pages there are in total. It doesn't matter, though. Initially, we are on the first page and when we scroll down JavaScript detects that we want to see also page two, so AJAX loads it for us. And so on.
Load more
A simpler version of the infinite scroll is "load more". Sometimes when we scroll down to the end of this imaginary first page, we can see a "load more" button. If we click it, we trigger an AJAX event to load the next page.
So in most cases, it’s all based on good, old-fashioned pagination. It has some far-reaching implications for our HTML, though. If we want to create an infinite scroll effect on our website, we should first create it as posts wrapped in pagination. JavaScript can hide the pagination panel and load more pages as a user scrolls down.
This is one of the fastest methods, but of course not the only one. It’s the easiest one to implement both for front-end and back-end teams and it’s the most SEO-friendly solution.
Conclusion
AJAX is an extremely efficient and user-friendly technique, but it’s always quite challenging for developers. They have to consider which data should be requested by JavaScript and what should be the server’s response. Is SEO important here? How big can the database be? Is there a possibility of lagged response? If so, what then? Front-end teams have to cooperate closely with back-end developers to make sure that the AJAX-powered website they’re working on is optimised in terms of usability and performance.