rad!ance

Homepage and Weblog of Fleur Jeanquartier

Introduction to AJAX

AJAX – not only a football team

AJAX Text in picture

There are many many projects, which concentrate on building there interaction design on WEB UIs. Therefore the research and development in interactive web technologies is carried on rapidly, communicated and new technologies are applied to various projects throughout the web and intranets.

The Next Generation of Web Applications

Ajax itself is not only a technology, moreover it describes an approach to using a number of existing technologies together, namely XHTML, CSS, JavaScript, DOM, XML, XSLT and XMLHttpRequest.

To use the AJAX technologies effectively one must understand the the philosophy behind its technique and become familiar with this new approach to web development.

Ajax suggests taking XHTML and CSS for standard-based presentation, creating dynamic display and interaction with the DOM, change and manipulate data with XML and XSLT, use JavaScript and DHTML to define events and put it together and using XMLHttpRequest for asynchronous data retrieval (to let browser and server communicate without having to refresh the page).

AJAX makes many things simpler and more pleasant, but you may not notice its existence until having visited a site a second time. However, AJAX is there, if you fill out a form for instance, and press a send-button and suddenly, the recently typed in input-text is displayed without reloading the page. To easily understand what AJAX is and what potential or impact it might have, let us look at some examples:


Screenshot of Google Maps

Such as Google Maps and Yahoo Maps. See a nice demo of both of them together, side by side. If you play around with the demo, you will notice that the maps are drag- and droppable and some other features too.


Flickr Logo

Moreover, Flickr also makes use of AJAX, or respectively DHTML, instead of Flash (like before).


Screenshot of Shift Edit

A Testblog using “Shift Edit” in WordPress is a quite nice idea/application too, which shows some possibilities, blog-developers face, when using Ajax, namely for dynamically editing a website’s content. By the way, there is also a Shift Edit Extension for Firefox.


ObjectGraph Logo

The Object Graph Dictionary also shows an example of AJAX in use. At the time you type a word in the textbox a response from page is displayed in a div tag under the textbox; but the page is not refreshed or reloaded as everything is done by javascript objects that allow XMLHttpRequests in the page.

And many others, such as del.icio.us, MSN Virtual Earth, Google Suggest, etc.

List of PROs

Ajax…

  • uses tested, accepted and approved technologies that will work,
  • provides a mechanism to mix and match XML with XHTML,
  • faster interaction due to not fetching things from a server all-the-time,
  • loads quicker than a comparable traditionally build website,
  • reduces initial load times,
  • supports the creation of webhosted versions of desktop applications,
  • is compatible with any standard webserver and serverside-language,
  • offers more user experience in the browser without any plug-ins,
  • and most important – is based on open standards – supports many many browsers and platforms (mostly independent)

Stay tuned, there will follow more about AJAX soon…

Ressources & Links

One Comment

  1. Pingback: rad!ance » Blog Archive » AJAX - not only a football team

Leave a Reply