Ajax

AJAX

ASYNCH

RON

OU

S JAVASCR I P

T +

XML

Geek Speaker: Veronica NettCOM 585 – Fall 2011Nov. 2, 2011

AJAX

AJAX stands for Asynchronous JavaScript and XML, and is a web application that is responsible for such things as the list of suggestions that drop down as you enter text into a Google search box or the ability to zoom in and out in Google Maps, all without reloading the entire page.

THE LITTLE ENGINE

AJAX utilizes several different web-based technologies and standards to create an intermediary – an AJAX engine – between the user and the server. While a user browses a webpage, the AJAX engine communicates with the server in the background, updating parts of the webpage without interfering with the entire page and making the user wait while it reloads.

An example is Gmail. An AJAX engine checks and adds new mail as it comes in, without reloading the page.

AJAX: A NEW APPROACH TO WEB APPLICATIONS

“Ajax isn’t something you can download. It’s an approach—a way of thinking about the architecture of web applications using certain technologies.”

-- Jesse James Garrett, Chief Creative Officer of AdaptivePath.com, and the man generally considered to have coined the term AJAX in 2005.

IN A NAME

AJAX refers to two technologies (JavaScript and XML) and a technique (asynchronous) for loading information. But it incorporates so much more.

TECHNOLOGIESAJAX incorporates:

• XHTML and CSS are standard languages that browsers understand and are used to present information to the user. XHTML for content and CSS for layout and formatting.

• XML and XSLT describes information and distributes it in a platform-independent format. XML is used for the interchange of data from a dynamic data source, and XSLT to process and manipulate it for final output on the webpage

• Document Object Model (DOM) allows programs to access and update the content, structure and style of a document once it is displayed. This allows the user to interact with the content presented, such as greying-out a button once certain information is entered.

• Asynchronous -- being independent of communication with a server – data retrieval using XMLHttpRequest is when a change is made to a page (the user zooms in on a section of a map). Only the part of the webpage to change is transferred from the server, and not the entire page

• JavaScript is the glue that holds all the elements together. JavaScript is a programming language used to perform various tasks, and binds all the AJAX technologies.

BROAD GROUP OF TECHNOLOGIES

AJAX applications can be any size, from the very simple, single function application to the complex and sophisticated. It also is constantly in development and being refined to incorporate new applications or technologies.

ADDING A LAYER

The basic building blocks of AJAX were introduced in the 1990s, when most websites were based on complete HTML pages. Every user action on a webpage, required the page to be re-loaded from the server – all the content re-sent instead of only the changed information -- causing a start-stop-start-stop experience for the user.

THE HTML MODEL

THE HTTP MODEL

THE AJAX ENGINE

Instead of loading a webpage, the browser loads an AJAX engine – written in JavaScript and usually tucked away in a hidden frame. The AJAX engine is responsible for both rendering the interface the user sees and also communicating with the server on the user’s behalf.

With the AJAX engine, a webpage is loaded entirely only once. Every user action takes the form of a JavaScript call to the AJAX engine. This allows for the users interaction with the webpage to happen asynchronously – independent of communication with the server – keeping the user from having to stare at a spinning color wheel or hourglass icon.

AJAX USER MODEL

A SMOOTH APPLICATOR

BUILDING BLOCKS

Asynchronous loading of content first became practical in 1995 when Java applets were written into the first version of Java language. The applets collect user data, such as mouse input, buttons and check boxes, and load data asynchronously from the server after a page has been loaded.

Internet Explorer introduced the iframe element to HTML in 1996, which also enabled asynchronous loading. It took off in 1999, when Microsoft used the iframe technology to update news stories and stock quotes on the default page of Internet Explorer. That same year, Microsoft created the XMLHTTP Active X control in Internet Explorer 5. The programing was adopted by Mozilla, Safari and Opera as XMLHttpRequest JavaScript, which is commonly used in today AJAX applications.

FULL SCALE ONLINE APPLICATION

In 2000, Microsoft filed a patent on the basic AJAX technology.

AJAX began to gain widespread use in 2000, when it was applied to Outlook Web Access and then Oddpost in 2002. It became a web standard in 2004 when Gmail adopted the application, and then in 2005, with Google Maps.

REFERENCES

• Ajax (programming) http://en.wikipedia.org/wiki/Ajax_(programming)

• Ajax: A New Approach to Web Applications http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications

• Beginning Ajax http://www.wrox.com/WileyCDA/Section/What-is-Ajax-.id-303217.html

•  Why use Ajax? http://www.interaktonline.com/support/articles/Details/AJAX%3A+Asynchronously+Moving+Forward-Introduction.html?id_art=36&id_asc=306

• A Brief History of Ajax http://www.aaronsw.com/weblog/ajaxhistory