Dynamic User Interactions powered with AJAX

Dynamic User Interactions, such as infinite scroll, has become standard in modern web development - what makes them possible is 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.

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 of us encounters on 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.

www.zaful.com

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.

Order form from Chop-Chop.org

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.

Screen from getuikit.com

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.

Twitter feed is an example of dynamic user interactions, showing in content filtering

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.Dynamic sorting/filtering might show when we type out only the first couple of letters of the searched phrase to be prompted with matching results 1 Dynamic sorting/filtering might show when we type out only the first couple of letters of the searched phrase to be prompted with matching results 2

Dynamic sorting/filtering might show when we type out only the first couple of letters of the searched phrase to be prompted with matching results 3
www.amazon.com

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, that 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.

Common uses of AJAX in modern websites - dynamic sorting/filtering and lazy loading, present in Twitter or Facebook feeds.
Facebook gallery

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 pagination panel and load next pages when 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

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.

Subscribe to our Newsletter and get hand-picked articles

(Monthly updates. Good vibes only!)

The data you submit in the above form will be received and processed by Chop-Chop Sp. z o.o., located at Wloclawska 161, 87-100 Torun, Poland, EU. We will process the data in order to be able to provide you with marketing information. To read more on the way we handle data, please visit our Privacy Policy.