Should I use ajax? If yes, when, where and why?

Sat Aug 17 2013

Paul Shan

What is AJAX?

AJAX, an acronym for Asynchronous Javascript and XML is not basically a programming language. It is a technique for web applications to send and receive data from server asynchronously, without impacting the other contents or reloading the page. AJAX uses XMLHttpRequest object to communicate with the server, JavaScript/DOM to make the requests and XML as a format to transfer data.  AJAX became popular on 2005 when Google used it in Google Suggest.

How Ajax can improve your site?

1. Making it fast:

Sometimes the user need some particular data only and loading a whole page to provide that to him, is simply unnecessary, waste of time. So by using ajax you can provide him that data without reloading the whole page.

2. Making it cool:

Now if you are running a chatting website and every time after posting something if the user has to reload the page, ofcourse it won’t be cool. Every time if to sort the search results the user has to call new pages it will be a hectic. Every time if the user gets the validation results only after submitting the form it will be irritating. So, you can understand now how ajax can make your site cool.

3. Reducing server load:

Asynchronous http request means less number of requests, means less execution for the server, means reducing load and saving bandwidth.

4. Making it user friendly:

Few features of facebook, like live feeds, auto new comment display and live notification are some examples to describe this point I think.

How Ajax can ruin your site?

1. Bad for SEO:

Search engine crawlers can’t access ajax normally. So there is a huge chance that the contents of your page will not be readable by the crawlers or they will find the link broken and will index your site down. (Though if you use Google's new ajax crawling method, it will help you).

2. Bookmark problem:

Suppose in your site the contents load with scroll. So in that case it will be hard for a user to bookmark some content which he got after scrolling a way down.

3. Multiple HTTP Requests:

Suppose you have 5 tabs in your page and only the content of the 1st tab is loaded with the page and rest by ajax. In that case if a visitor visits all those tabs, he is making 4 http requests for tabs and 1 for page, total 5 http requests. But if you don’t use ajax and load all the contents with the page, the visitor had to make only 1 http request. So it’s not like ajax makes the site faster always.

When should you use Ajax?

Do not use ajax because it’s cool, or one of the most hyped techniques in past few years. Cause it’s still immature and has a lot of disadvantages. Use ajax only in those cases for what it has been invented. If you can do something without using ajax, than never try to make it done using ajax. If you really want some asynchronous communication then only then use it. The next paragraph describes where exactly should you use it.

Where should you use Ajax?

1. Form validation:

As I said earlier, if every time if the user gets the validation results only after submitting the form it will be irritating. So you can use ajax in form validation.

2. Light Box:

Popups are always irritating and maximum browsers block them too. So a nice and cool alternative of popup is lightbox which is a nice implementation of ajax.

3. Sort or Filter:

Sometimes we want to filter the search results or some other thing by date, popularity, cost and blah blah. In that case ajax is a really nice technique.

4. Vote or Rating:

The whole site need not to be refreshed if a user votes for something or rates your product. The voting and displaying result can be done using ajax.

5. Chat websites:

Chatting is always real time. That’s why you must use ajax if you are going to make a chatting panel in your website.

6. Blog Comments:

Comments of your blogs are not useful for search engines. So you can load the previous comments or can post a new one with ajax.

7. Captcha:

To make captcha (reloading captcha basically) you should use ajax.

Major advantages of Ajax:

1. It makes things short and fast. 2. Get read of reloading page. 3. Very much useful for real time applications. 4. Reduces server load and saves bandwidth.

Major Disadvantages:

1. Bookmarking problem. 2. Very bad for SEO. 3. Screen readers can’t access ajax. 4. Only the modern browsers supports it and if javascript is not enabled at the user end, your site will look ugly.

Summary:

AJAX is not bad, but it is still immature. It can be really handy if somewhere you really need asynchronous communication, otherwise try to avoid it as it can hamper your SEO and sometimes irritates your user. But there are some cases like Google Maps, Chat Server, Live Notifications, Live Feed where ajax is the ultimate option.

SHARE THIS ARTICLE

post-thumbnail
Today everyone knows the importance of a lightning-fast website and how the speed impacts the conversion rate of a business. Today, everyone wants the site to be a PWA so that the mobile users can have an app-like experience with the website because, for the majority of the merchants, the customers come through mobile devices.
Tue Apr 20 2021
post-thumbnail
Here we are going to see how you can manage backup and restore of Postgres database with docker.
Thu Sep 03 2020
post-thumbnail
Image sliders or carousels always have increased the UI attraction of websites and they are pretty useful for reflecting the major roles/products too. In case, I am having a website that sells tee-shirts,
Mon Apr 30 2018

About VoidCanvas

This blog was created out of hobby and talks mostly about technology, web development, JavaScript, NodeJS and related topics. Thank you for reading my blog.

Copyright 2022 - www.voidcanvas.com

Popular Articles

Authentication using Google's oAuth api with node.js

Thu Mar 10 2016

OAuth authentications are pretty popular now a days and another thing which is popular is JavaScript. This article shows how to plugin google’s oAuth api for authentication in your own node application.

CSS3 Loader Snippet Collection: (Part 2 - Squares)

Sat Mar 01 2014

This is a continuation of my CSS3 loader snippet collection series. I've provided spinning css3 animation loader in the part 1 of this series and here in part 2, I'm providing various square type loading