January 24, 2013 AJAX Cycle

What is AJAX?

What is AJAX?

People are always looking for ways to create their websites dynamic and interactive. Most of the time, they ‘usually’ ask google, find this, find that, etc… and when they find what they are looking for, all they do is Copy/Paste, test, and if it works, then boom! they are done. If it doesn’t work, then the cycle repeats, until it does. At least, that’s what I used to do in past. This tends to happen very often when creating interactive websites using jQuery and AJAX. So honestly, how many of you know exactly What is AJAX? Today I feel like writing a little more about what is ajax and how it works.

AJAX

AJAX is just an acronym refering to Asynchronous JAvaScript and XML. Now, if we take a look those words, most of us know what JavaScript and XML are, but the term Asynchronous can be confused, so let’s focus on that.

What does asynchronous refer to?

Asynchronous refers to events that are happening on the background independently of the main application flow. These events do not disturb the flow of the application, allowing the continuation of it’s normal process. A fairly good example of this happening is in your Facebook home page, when all of a sudden, without refreshing your browser window, you notice that there are new status feed updates from your friends. ( Although I did notice, and think many have as well, how they do implement this. If you haven’t then, try leaving your facebook homepage on the browser without moving your mouse for about 1 minute. After that minute, just move your mouse from one point to another, and all of a sudden, you will see the feeds get updated. ) I’m assuming they are using some jQuery mousemove or something similar for this to happen. So what happens there is, facebook sends your profile information ( or your user id ) to their servers. Their servers then look for your friends list, grab their newly added status, return the result to the browser and then add them to your wall so that you can see. All of that, without pressing that refresh button.

So you see, AJAX allos you to update a web page asynchronously on the background by exchanging simple, and small amounts of data. Some more examples of pages using AJAX is: Youtube, Gmail, Google Maps, StackOverflow and many more on the web.

So you are still asking yourself, What is AJAX? Well, I’m going to ask for forgiveness, as I have no art skills, but the following image should help you just a little bit.

AJAX Cycle

Some advantages

AJAX, you see, is based on internet standards. It uses a combination of the following to accomplish it’s goal:

  • XMLHttpRequest Object(Modern Broswers and IE7+)
  • ActiveXObject (IE6 and below)
  • JavaScript/DOM (Used to interact browser and server)
  • XML (Returned results)
  • JSON (Returned results)
  • HTML (Returned results)

These standards are browser based, making them platform independent. It doesn’t matter where you program this in, as long as you have a browser, then this ‘should’ work. All you would need is a server with the application files, and the browser should do the rest.

Another advantage using AJAX would be a better user interactivity. This could be named the most obvious benefit of using AJAX, and why web developers and webmasters are using AJAX more and more every day. AJAX simplifies the flow of an application, thus making it have quicker interaction between user and website since pages are not reloaded for content to be displayed. This activity can be simplified, since the loading times can be reduced from websites.

The advantage above opens up for this next advantage, which you can call it, smoother navigation on a website. While using AJAX, users will not have the need to use the refresh nor the back button, thus, allowing quicker response from the server.

Some Disadvantages

Everything that has an advantage, will most likely have disadvantages, and AJAX surely has some that I will mention.

Even though the back and refresh button are not needed while navigating a website with AJAX, these two buttons can become useless. This is due to the fact that, AJAX ‘navigating’ does not change you URL, so if you were in the middle of a process, and have no direct URL to where you were, then this might be bad. In some cases, the use of Hijaxing is used, which is the use of hashing url (#) at the end.

Another disadvantage would be that it is dependant on JavaScript. While it is ok to depend on it, since most modern (if not all) already use it, but in some cases, there are users who prefer disabling JavaScript. This makes AJAX worthless. Gladly, there is a workaround this problem, as web developers must have in mind, every time they create an AJAX Website, they need to always think of this and make an optional {javascript} {/javascript} version of the AJAXified website they just created.

The last disadvantage I want to point out would be the SEO factor. Since there are no SEO Friendly URL’s, then search engine tend to bypass your application, and it would appear as if that part of your site does not exist.

My recommendations

Before coding your AJAX website, make sure you think of the listed disadvantages and obviously many more. Remeber, when creating a website, you have to think on customer/client satisfaction, not your own. You have to always think of all, and I mean ALL common browsers, including IE6.

If you have trouble creating AJAX website, or forms, here is great website that can help you with creating ajax forms, even with admin areas within minutes. That way, instead of worrying about all the validations, and making sure it works on every browser, you can worry about other things, like project completion. Click here for AJAX Forms!, and find out how easy this can be.

Tagged on:

One thought on “What is AJAX?

  1. Today there are different ways to handle the disadvantage you pointed out.

    About the back and refresh buttons, as you say, you could use the hash part of the url. But you could also handle it with the history.pushstate functionnality… So you will have a proper url for each pages/states and be able to display the content properly. Look at libraries like history.js for example or at framework like backbonejs or angularjs that handle it for you!

    About the dependency on JavaScript, you are right, JavaScript need to be activated and you will not be able to adress the part of your customer who don’t activate js. But this may be a very low percentage of your users. And you could decide to ignore them, or better, with a noscript tag, indicate them to activate javascript. It’s the approach used by some big players like Hulu for example.
    -> là je dis: bof bof, il parle bien de faire un site statique en // plus tard, c’est mieux que la popup “JS n’est pas activé, va te faire …”

    For the SEO factor, the first point should ou mentioned allow to have proper url for each of your content. Then if you follow the Ajax Crawlable Scheme (https://developers.google.com/webmasters/ajax-crawling/docs/getting-started?hl=fr) proposed by Google, your site will be indexed properly, your site will be indexed, even with the hash approach. This works on Google, of course, but also for Bing (and Yahoo), Yandex, Facebook, ….

Leave a Reply

Your email address will not be published. Required fields are marked *

The qTranslate Editor has disabled itself because it hasn't been tested with your Wordpress version yet. This is done to prevent Wordpress from malfunctioning. You can reenable it by clicking here (may cause data loss! Use at own risk!). To remove this message permanently, please update qTranslate to the corresponding version.