How AJAX Works | SYS-CON MEDIA

The i-Technology Media!	Register \| Log in

.NET · AJAX · CLOUD · ECLIPSE · FLEX · OPEN WEB · iPHONE · JAVA · LINUX · OPEN SOURCE · ORACLE · PBDJ · SEARCH · SILVERLIGHT · SOA · VIRTUALIZATION · WEB 2.0 · WIRELESS · XML

Comments

Drool, Britannia? Is the UK Failing the Cloud?

By Roger Strukhoff

Richard Davies wrote: The UK has a good crop of technology pioneers in cloud computing - for example ElasticHosts, FlexiScale, Flexiant, OnApp - and also some strong government initiatives such as G-Cloud. We will have to see whether this kind of technical leadership converts into swift mass-market adoption or not.

Jan. 8, 2012 11:38 AM EST

read more & respond »

Cloud Expo on Google News

Did you read today's front page stories & breaking news?

Cloud Expo & Virtualization 2011 West

Keynotes

Oracle

Opening Keynote | An Enterprise Cloud for Business-Critical Applications

Abiquo

Day 2 Keynote | The Enterprise Cloud Tightrope - Balancing for Success

Akamai

Day 3 Keynote | The DNA of an Enterprise Cloud

DIAMOND SPONSOR:

Oracle

Many Clouds, Many Choices'Cloud

PLATINUM PLUS SPONSORS:

Abiquo

Enterprise Cloud Best Practices - Town Hall - Join the discussion…

PLATINUM SPONSORS:

Intel

Progressing Toward the Federated, Automated and Client-Aware Cloud

New Relic

How to build an app with Twitter-like throughput

Rackspace

Computing in the Cloud Era

GOLD SPONSORS:

Gale Technologies

Practical Cloud Migration

IBM

Re-think IT. Re-inventing Business.

Intel/McAfee

Identity Driven Security in the Cloud

PerspecSys

Hackers Hackers Everywhere, Is My Public Cloud That Safe?

Red Hat

Unlock the Value of the Cloud

SHI

Mission Critical Applications and the Cloud - Myth or Reality?

SoftLayer

Not Your Grandpa's Cloud

Terremark

Integrating Enterprise Clouds

VMware

Upgrade to a vCloud

POWER PANELS:

Cloud Expo Silicon Valley: CTO Power Panel

Cloud Expo Silicon Valley: CEO Power Panel

Cloud Expo Silicon Valley: Cloud SuperStars Panel

Cloud Expo Silicon Valley: CloudNOW Panel

Click For 2010 West
Event Webcasts

Cloud Expo & Virtualization 2011 East

DIAMOND SPONSOR:

Dell

Dell & VMware Deliver the Enterprise Hybrid Cloud

PLATINUM PLUS SPONSORS:

Abiquo

Are Financial Services Organizations Risking Security by Avoiding Cloud Computing?

Oracle

From Consolidation to Enterprise Private PaaS

PLATINUM SPONSORS:

Intel

Driving the Transformation to Next Generation Cloud Data Centers

Rackspace

The Inevitability of an Open Cloud

GOLD SPONSORS:

CA Technologies

Follow YOUR path to Cloud Computing

Interxion

Who Keeps the Cloud in the Air?

Microsoft

Patterns for Cloud Computing

PerspecSys

War in the Clouds: Are you ready?

ServiceMesh

The Big Win: Stop Playing Small-Ball with Your Cloud Strategy

Terremark

Evaluating Enterprise Clouds

Xiotech

Cloud Storage: Myths and Realities

POWER PANELS:

Cloud Expo New York: CTO Power Panel

Cloud Expo New York: CEO Power Panel

Cloud Expo New York: CMO Power Panel

Cloud Expo New York: Wrap-Up Power Panel

Click For 2010 West
Event Webcasts

Live Google News by SYS-CON!

Top Three Links You Must Click On

Java Industry News

How AJAX Works

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

By: Yakov Fain

Oct. 30, 2006 12:30 AM

From Farata Systems Blog

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…

About Yakov Fain
Yakov Fain is a Managing Director 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. He is an Adobe Certified Flex Instructor. Yakov co-athored the O'Reilly book "Enterprise Application Development with Flex". He twits at twitter.com/yfain.

Reader Feedback: Page 1 of 1