Nowadays a significant number of people surf the Web using tablets or smartphones. Responsive websites have become the standard, not only to provide (...)Read more
Dynamic User Interactions powered with AJAX
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?
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.
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
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:
SEO and dynamic content
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" 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.
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.
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.