How AJAX Works @ JAVA DEVELOPER'S JOURNAL

How AJAX Works

When I was learning how to work with AJAX, I went through a number of 101-type articles

Oct. 30, 2006 12:30 AM

While the term Ajax was introduced in 2005, the technique of using XMLHttpRequest object was known since 1999 (this object became available in Internet Explorer 5). But up till now XMLHttpRequest object was never standardized by World Wide Web Consortium. This technically means that each Web Browser vendor can implement it differently.

Such Internet giants as Google, Yahoo, Amazon started using Ajax in their applications, which brought interest of business application developers who always wanted to make their Web applications less static and minimize page refreshes. A discussion on usability of Ajax for business applications is out of the scope of this article.

When I was learning how to work with AJAX, I went through a number of 101-type articles. The biggest problem with these tutorials is that the authors are trying to explain several things at once, which is confusing. I’ll try to offer you a very simple example of an Ajax application that will illustrate the “refreshless” nature of Ajax. Here’s a simple HTML page:

Click on the link, and the text area will be populated with the content of the server side file, which in our example has the text “Hello from the server!”

What’s the big deal? There is no entire Web page refresh! The XMLHttpRequest object sends an asynchronous request to the server, gets the data back and changes the content of just one object on this HTML page – the text area.

Here’s the code of the ajaxSample.html:

<html lang="en" dir="ltr">
<head>
    <title>Ajax sample application</title>

        <script type="text/javascript">
        var myXHR= new ActiveXObject("Microsoft.XMLHTTP");

        function goGetIt(){

          myXHR.open("GET", "/theriabook/hello.txt",true);
           myXHR.onreadystatechange=updateTheData;
           myXHR.send();
        }

        function updateTheData(){
          if (myXHR.readyState==4){
             myForm.someText.value=myXHR.responseText;
          }
        }
     </script>

</head>
<body>
    <p>Click on <a href="javascript:goGetIt()"> this link</a> to populate the text area
            below from the server side text file without the entire page refresh

    <form name="myForm">
       <textarea name="someText" rows="5" cols="30">
       </textarea>
    </form>
</body>
</html>

I deployed this file under Apache Tomcat that ran locally on my PC. In this example both ajaxSample.html and the data file hello.txt are located in directory webapps\theriabook. To test this program, make sure that Tomcat is up and running and direct your Internet Explorer to the URL of this HTML file, which in my case is http://localhost:8080/theriabook/ajaxSample.html.

In this example, the JavaScript code creates an instance of the XMLHttpRequest object in a way that is specific to Microsoft Internet Explorer. This sample will not work in other than IE browsers, because instantiation of the XMLHttpRequest object should have been done a little differently there, which is out of the scope of this article.

The click on the link calls the JavaScript function goGetIt() that starts with creating an HTTP GET request for the file hello.txt.

          myXHR.open("GET", "/theriabook/hello.txt",true);

The third argument here is equal to true, which means that we want asynchronous communication with the server. The next line tells which function to call when the data arrive:

           myXHR.onreadystatechange=updateTheData;

And finally, we send an asynchronous request to the server with no arguments:

           myXHR.send();

When the request completes (the readystate is equal to 4) and the data arrive, the JavaScript function updateTheData() assigns the text received from the server to the text area called someText:

             myForm.someText.value=myXHR.responseText;

For the sake of simplicity I did not include in this example multi-browser support or error processing, but this application illustrates the “refreshless” nature of Ajax Web applications.

And the last advice: always keep your fingers crossed when you start your Ajax application. Hey, you never know…

Published Oct. 30, 2006 — Reads 23,508
Copyright © 2008 SYS-CON Media. All Rights Reserved.

About Yakov Fain
Yakov Fain is a managing principal of Farata Systems, consulting, training and product company. He has authored several Java books, dozens of technical articles. SYS-CON Books released his latest co-authored book , "Rich Internet Applications with Adobe Flex and Java: Secrets of the Masters" in Spring 2007. Sun Microsystems has nominated and awarded Yakov with the title Java Champion. He leads the Princeton Java Users Group. Yakov teaches Java and Flex 2 part time at New York University. He is an Adobe Certified Flex Instructor and an Editor-in-Chief of Flex Developers Journal.

LATEST JAVA STORIES & POSTS

JavaOne 2008: Sun Talks Up its Late-to-the-Party AIR-Silverlight Rival

By Maureen O'Gara

At Java One this week Sun has been selling its year -old-but-still-upcoming - and definitely late-to-the-party - Adobe AIR- and Microsoft Silverlight-competitive JavaFX Rich Client environment as a potential revenue-generator capable of putting ads on mobile applications and JavaF

Borland Finally Dumps CodeGear Tools Division

By Maureen O'Gara

It's only taken Borland two years but it's finally dumped its CodeGear tools division, responsible for Borland's hereditary JBuilder, Delphi and C++ Builder lines as well as its new web ventures into PHP and Ruby, said to be used by 7.5 million developers. Embarcadero Technologie

JavaOne 2008: Uncommon Java Bugs

By S G Ganesh

Any large Java source base can have insidious and subtle bugs. Every experienced Java programmer knows that finding and fixing these bugs can be difficult and costly. Fortunately, there are a large number of free open source Java tools available that can be used to find and fix d

JavaOne 2008: Sun Challenges Linux

By Maureen O'Gara

Sun's mule train has finally pulled into Indiana after three years on the road. Indiana is the Linux-friendly Fedora-like OpenSolaris project meant to move the Solaris-shy Linux community off Linux and on to Solaris tempted by Solaris widgetry like the highly scalable, rollback-e

JavaOne 2008: Chris Keene's Prescription for Curing the Java Flu

By Christopher Keene

At WaveMaker, we have hitched our wagon to Java so I hope very much that JavaOne is showing us the ghost of Java present, not the ghost of Java to come. The Sun promise to put Java runtimes everywhere is meaningless if nobody wants to develop for those runtimes. Adobe and Microso

JavaOne 2008: A Day 1 Report From the Sessions

By Yagiz Erkan

My first technical session was about Java SE presented by Danny Coward from Sun. It was about the current situation of Java SE 6 and the roadmap to Java SE 7. The talk started with a few encouraging stats. For example, Java?s performance increased 220% between Java SE 5.0_04 and