-----
title: "What is AJAX?"
content-type: article
timestamp: 1137047408
tags: "internet|web20|ajax|webdevelopment"
-----
<em>"The Web is changing. The 30-year-old terminal-like technology it was originally is gradually giving way to new ways
    of doing things. The power of AJAX allows for rich user interaction without the trouble that has bugged traditional
    web applications."</em>
<p>This is the introduction to the <a href="http://www.script.aculo.us">script.aculo.us</a> website, and regardless your
    opinion about
    the so-called AJAX <em>programming technique</em>, they are fundamentally right: the web is changing. AJAX is at
    least
    one way to do things in a different way, enhancing - although arguably, in some cases - users' browsing
    experience.</p>

<h3>Application examples</h3>
<p>What is AJAX then? Nothing too new, but not too old
    either. I'd define AJAX as the <em>rebirth of Javascript</em>, for example, it's not only Javascript we're talking
    about. The acronym stands for Asynchronous Javascript And XML and it already gives an idea of the fundamentals of
    the
    technology: something build on <em>asynchronous server requests and responses</em>. This may be clear to coders, but
    the best way to try explaining this to everyday internet users is showing some famous
    applications:</p>

<em>Gmail</em>: The first example? The most famous? The most used? Perhaps. Google aimed to
impress both end users and geeks with its free, long-awaited email service. What's so unusual in this webmail
application?
<ul>
    <li>An innovative and intuitive interface, more similar to a desktop application than a traditional webpage.</li>
    <li>Rich formatting through an effective, easy-to-use editor.</li>
    <li>Online spell checker.</li>
    <li>Instant (one click) email tagging, labels, contact groups etc.</li>
    <li>Email auto save.</li>
</ul>

<em>Kiko</em>: This is a very neat online calendar, free to use and customizable. Features include:
<ul>
    <li>Multiple user/contacts/events administration.</li>
    <li>Personalization of the right click menu (it overrides your browser's default behavior).</li>
    <li>Drag and drop events across the calendar.</li>
    <li>Easily switch through different calendar views without any page refresh.</li>
</ul>

<em>Writely</em>: An online word processor. Although it is not as advanced as its desktop cousins,
this is a truly admirable effort to port a desktop application to the web. The service is free for now and it allows
users to create, edit, share, and export text documents. Among its features there are:
<ul>
    <li>High degree of document formatting - modify font size, style, colors, alignment, insert images and links etc.
    </li>
    <li>Enhanced exporting options - it can create HTML documents, Word documents, zip files etc.</li>
    <li>Online spell-checker.</li>
    <li>Ability to easily share and publish your work.</li>
</ul>

<p>This list can continue, as new "AJAX-powered" applications are created nearly every day.</p>

<blockquote>
    AJAX provides the web developer the ability to create web applications that look and feel like
    applications that run on the desktop. It does this by solving the 'partial update' problem. AJAX makes it
    possible for a web application to request data from the server (usually in response to a button click or other
    javascript 'event') and change a part of the current page to reflect the result of the query. Prior to AJAX, if
    the web developer wanted to retrieve any information from the server, a full page update was required. This may
    mean a full page load when the user clicks a help icon, spell checks a document, or performs a drag and drop
    operation that changes data on the server. AJAX solves this problem and opens the door for a host of
    AJAX-powered web applications.
    <br />
    There were some unconventional solutions to this problem prior to AJAX. I
    have ignored them for the purpose of this article as they were hacky or relied on a feature in a particular
    browser
</blockquote>

<h3>How does it work?</h3>
<p>Ajax is fundamentally the union of various technologies - not something new by itself:</p>
<ul>
    <li>(X)HTML, CSS, etc., used as presentation layer and format the information retrieved by the server: nothing
        special here.</li>
    <li>The XMLHttpRequest object, which allows data exchange between client and server "silently", in an
        asynchronous way, without the need of refreshing and reloading a whole web page.</li>
    <li>The DOM Object Model (DOM), an Object-Oriented way to represent and access HTML or XML.</li>
    <li>XML and XSLT used for data interchange and manipulation.</li>
</ul>

<p>The magic is undoubtedly in the XMLHttpRequest object, originally invented by Microsoft as an ActiveX
    object and then made available as a standard JavaScript class by Mozilla-based browsers. At least something which
    <em>seems</em> to be compatible with <em>most</em> browsers then.
</p>

<p>A necessary step in any JavaScript script using the XMLHttpRequest object would be something
    like:</p>

<pre><code class="javascript">
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
</code></pre>

<p>In order to have an http_request object to use later on which is independent from the browser type.</p>

<p>Let's now examine an example of elementary Ajax application. The following code is broken into different parts and
    commented,
    the uncommented source and a demo is available on <a
        href="http://www.degraeve.com/reference/simple-ajax-example.php">degraeve.com</a>.</p>

<p>For this simple example, we need to create
    a simple server-side script which will be called by our Ajax application. The script can be in any language, this
    one is
    in Perl.</p>

<pre><code class="perl">
#!/usr/bin/perl -w
use CGI;

$query = new CGI;

$secretword = $query->param('w');
$remotehost = $query->remote_host;

print $query->header;
print "<p>The secret word is <b>$secretword</b> and your IP is <b>$remotehost</b>.</p>";
</code></pre>

<p>Basically, it creates a new CGI object named $query, used to access the parameter which will be passed by our
    submission form, "w",
    and get the user's IP address. The script will then print the page header and a phrase containing the word
    entered in our form and the user's IP address.</p>

And here's the simple Ajax application:

<pre><code class="html">
<html>
<head>
<title>Simple Ajax Example</title>
<!-- Just the first HTML tags of the page, and the beginning of the script -->
<script language="Javascript">
    function xmlhttpPost(strURL) {
        var xmlHttpReq = false;
        var self = this;
        // Mozilla/Safari
        if (window.XMLHttpRequest) {
            self.xmlHttpReq = new XMLHttpRequest();
        }
        // IE
        else if (window.ActiveXObject) {
            self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
        }

        self.xmlHttpReq.open('POST', strURL, true);

        self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        <!-- with the method open we initialize the connection, specifying that we want to send a POST request to the page
            "strURL" and that the connection is asynchronous (true). The third parameter is actually true by default and could
            have been omitted in this case. As we want to use the POST method, we need to set the content-type header for
            our request, in this case "application/x-www-form-urlencoded". -->

        self.xmlHttpReq.onreadystatechange = function () {
            if (self.xmlHttpReq.readyState == 4) {
                updatepage(self.xmlHttpReq.responseText);
            }
        }
        self.xmlHttpReq.send(getquerystring());
    }

    function getquerystring() {
        var form = document.forms['f1'];
        var word = form.word.value;
        qstr = 'w=' + escape(word);  // NOTE: no '?' before querystring
        return qstr;
    }

    function updatepage(str) {
        document.getElementById("result").innerHTML = str;
    }

</script>
</head>

<body>
<form name="f1">
  <p>Word: <input name="word" type="text"  ></p>
  <input value="Go" type="button" onclick='JavaScript:xmlhttpPost("/cgi-bin/simple-ajax-example.cgi")'>
  <div id="result"></div>
</form>
</body>
</html>
</code></pre>

<!-- This is the final part of the application, which defines our form containing a text field and a submit button. Note
    that our xmlhttpPost function is called once the button is clicked, through the onclick attribute. -->

<p>That's it.</p>

<p>The first reaction after reading so far would probably be "Ajax is not easy at all", well, I never said it was. To
    create a simple application which just prints something on the screen we had to go through a lot of code, and we
    could have done something similar with much less hassle. This was just a trivial example, very different from those
    large scale applications available online.</p>
<p>There's good news though, there are plenty of frameworks and toolkits which makes life easier for developers
    interested in using this programming technique. There are in particular various libraries built upon the Prototype
    framework such as the already mentioned Script.aculo.us and Rico for examples, and various frameworks which
    integrate Ajax in some way in any server side language, like Ruby on Rails or CakePHP, for example.</p>
<h3>Conclusion</h3>
<p>Undoubtedly Ajax can be used to create really powerful and innovative applications, but it shouldn't be abused or
    mis-used. There are a few things to keep in mind, when developing an Ajax application:</p>
<ul>
    <li>It requires Javascript to be enable on the client browser, and the developer obviously can't control that</li>
    <li>The application may not compatible with all browsers, in particular older browsers will definitely not be able
        to access it.</li>
    <li>It can be too much of a surprise for the user who never used an Ajax application before: it may experience
        delays in responses, some basic functionalities like the "Back" button might not work as expected etc.</li>
</ul>
<p>There are actually many more things to consider before even start planning to develop an application, and can
    basically be summarized as follows:</p>
<p><em>"Do not use Ajax in your web application unless you know what you're doing"</em></p>
<p>Luckily, there are a lot of articles and resources out there, waiting for you.</p>
<h3>Notes and Resources</h3>
<small>
    <p>[1] Script.aculo.us AJAX toolkit: <a href="http://www.script.aculo.us ">http://www.script.aculo.us </a></p>
    <p>[2] Gmail - Google's online webmail: <a href="http://mail.google.com/mail">http://mail.google.com/mail</a></p>
    <p>[3] Kiko - Online calendar: <a href="http://www.kiko.com/">http://www.kiko.com/</a></p>
    <p>[4] Writely - Online word processor: <a href="http://www.writely.com/">http://www.writely.com/</a></p>
    <p>[5] A venture forth Blog - Top 10 Ajax applications: <a
            href="http://www.aventureforth.com/?p=13">http://www.aventureforth.com/?p=13</a></p>
    <p>[6] HTTP - Webopedia entry: <a
            href="http://www.webopedia.com/TERM/H/HTTP.html">http://www.webopedia.com/TERM/H/HTTP.html</a></p>
    <p>[7] AJAX - Wikipedia Page: <a href="http://en.wikipedia.org/wiki/AJAX">http://en.wikipedia.org/wiki/AJAX</a></p>
    <p>[8] XMLHTTP Wikipedia Page: <a
            href="http://en.wikipedia.org/wiki/XMLHTTP">http://en.wikipedia.org/wiki/XMLHTTP</a></p>
    <p>[9] Dom Object Model - Wikipedia Page: <a
            href="http://en.wikipedia.org/wiki/Document_Object_Model">http://en.wikipedia.org/wiki/Document_Object_Model</a>
    </p>
    <p>[10] degraeve.com - Simple Ajax Example: <a
            href="http://www.degraeve.com/reference/simple-ajax-example.php">http://www.degraeve.com/reference/simple-ajax-example.php</a>
    </p>
    <p>[11] Prototype Javascript Framework: <a href="http://prototype.conio.net/">http://prototype.conio.net/</a></p>
    <p>[12] Rico open-source Javascript library: <a href="http://openrico.org/">http://openrico.org/</a></p>
    <p>[13] Ruby on Rails: <a href="http://www.rubyonrails.org">http://www.rubyonrails.org</a></p>
    <p>[14] CakePHP framework: <a href="http://www.cakephp.org">http://www.cakephp.org</a></p>
    <p>[15] Alex Bosworth's Weblog: Ajax Mistakes: <a
            href="http://sourcelabs.com/ajb/archives/2005/05/ajax_mistakes.html">http://sourcelabs.com/ajb/archives/2005/05/ajax_mistakes.html</a>
    </p>
    <p>[16] AjaxMatters.com: <a href="http://www.ajaxmatters.com/r/welcome">http://www.ajaxmatters.com/r/welcome</a></p>
</small>