AJAX Introduction

Asynchronous JavaScript and XML (AJAX) is not a technology in itself, but is a term that describes a "new" approach to using a number of existing technologies together, including: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, and the XMLHttpRequest object. When these technologies are combined in the AJAX model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions

AJAX is a type of programming made popular in 2005 by Google (with Google Suggest).

What You Should Already Know

Before you continue you should have a basic understanding of the following:

• HTML / XHTML
• JavaScript

If you want to study these subjects first, find the tutorials on our

AJAX = Asynchronous JavaScript and XML

AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications.

With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page.

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.

The AJAX technique makes Internet applications smaller, faster and more user-friendly.

AJAX is a browser technology independent of web server software.

AJAX is Based on Web Standards

AJAX is based on the following web standards:

• JavaScript
• XML
• HTML
• CSS

The web standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser and platform independent.

AJAX is About Better Internet Applications

Web applications have many benefits over desktop applications; they can reach a larger audience, they are easier to install and support, and easier to develop.

However, Internet applications are not always as "rich" and user-friendly as traditional desktop applications.

With AJAX, Internet applications can be made richer and more user-friendly.

AJAX and the Future of Web Applications

  The ability of technology to be user-friendly has evolved very much in the past years, but there's still along way till we have real intelligent computers. Until then, people need to learn how to work with computers—some to the extent that they end up loving a black screen with a tiny commandprompt on it.Not incidentally, the computer-working habits of many are driven by software with user interfacesthat allow for intuitive (and enjoyable) human interaction. This probably explains the popularity of the right mouse button, the wonder of fancy features such as drag and drop, or that simple text boxthat searches content all over the Internet for you in just 0.1 seconds (or so it says). The software industry (or the profitable part of it, anyway) has seen, analyzed, and learned. Now the market is full of programs with shiny buttons, icons, windows, and wizards, and people are paying a lot of money for them.What the software industry has learned is that the equivalent of a powerful engine in a red sportscar is usability and accessibility for software. And it's wonderful when what is good from thebusiness point of view is also good from a human point of view, because the business profits aremore or less proportional to customers' satisfaction.We love technology to the sound made by each key stroke, so it's very easy to forget that the very reason technology exists is to serve people and make their lives at home more entertaining, and at work more efficient.Understanding the way people's brains work would be the key to building the ultimate software applications. While we're far from that point, what we do understand is that end users need intuitive user interfaces; they don't really care what operating system they're running as long as the functionality they get is what they expect. This is a very important detail to keep in mind, as many programmers end to think and speak in technical terms even when working with end users(although in a typical development team the programmer doesn't interact directly with the enduser). If you disagree, try to remember how many times you've said the word database when talking to a non-technical person.By observing people's needs and habits while working with computer systems, the term softwareusability was born—referring to the art of meeting users' interface expectations, understanding the nature of their work, and building software applications accordingly.Historically, usability techniques were applied mainly to desktop applications, simply because the required tools weren't available for web applications. However, as the Internet gets more mature, the technologies it enables are increasingly potent.Modern Internet technologies not only enable you to build a better online presence, but also allow building better intranet/dedicated applications. Having friendly websites is crucial for onlinebusiness, because the Internet never sleeps, and customers frequently migrate to the next "bigthing" that looks better or feels to move faster. At the same time, being able to build friendly webinterfaces gives alternative options for intranet software solutions, which were previously builtmainly as desktop applications.Building user-friendly software has always been easier with desktop applications than with webapplications, simply because the Web was designed as a means for delivering text and images, and not complex functionality. This problem has gotten significantly more painful in the last few years, when more and more software services and functionality are delivered via the Web.Consequently, many technologies have been developed (and are still being developed) to add flashylights, accessibility, and power to web applications. Notable examples include Java applets and Macromedia Flash, which require the users to install separate libraries into their web browsers.

Delivering Functionality via the Web

Web applications are applications whose functionality is processed on a web server, and isdelivered to the end users over a network such as the Internet or an intranet. The end users use a thin client (web browser) to run web applications, which knows how to display and execute the data received from the server. In contrast, desktop applications are based on a thick client (also called a rich client or a fat client), which does most of the processing.Web applications evolve dreaming that one day they'll look and behave like their mature (and powerful) relatives, the desktop applications. The behavior of any computer software that interacts with humans is now even more important than it used to be, because nowadays the computer userbase varies much more than in the past, when the users were technically sound as well. Now you need to display good looking reports to Cindy, the sales department manager, and you need to provide easy-to-use data entry forms to Dave, the sales person.Because end-user satisfaction is all that matters, the software application you build must be satisfactory to all the users that interact with it. As far as web applications are concerned, the irevolution-to-maturity process will be complete when the application's interface and behavior will not reveal whether the functionality is delivered by the local desktop or comes through fiber or air.Delivering usable interfaces via the Web used to be problematic simply because features that people use with their desktop application, such as drag and drop, and performing multiple tasks onthe same window at the same time, were not possible.Another problem with building web applications is standardization. Today, everything web-accessible must be verified with at least two or three browsers to ensure that all your visitors will get the full benefit of your site.

Advantages of Web Applications

Yes, there are lots of headaches when trying to deliver functionality via the Web. But why bothertrying to do that in the first place, instead of building plain desktop applications? Well, even with the current problems that web applications have with being user-friendly, they have acquired extraordinary popularity because they offer a number of major technological advantages over desktop applications.

• Web applications are easy and inexpensive to deliver. With web applications, acompany can reduce the costs of the IT department that is in charge of installing the software on the users' machines. With web applications, all that users need is acomputer with a working web browser and an Internet or intranet connection.

• Web applications are easy and inexpensive to upgrade. Maintenance costs for software have always been significant. Because upgrading an existing piece of software is similar to installing a new one, the web applications' advantages mentioned above apply here as well. As soon as the application on the servermachine is upgraded, everyone gets the new version.

• Web applications have flexible requirements for the end users. Just have your web application installed on a server—any modern operating system will do—and you'll be able to use it over the Internet/Intranet on any Mac, Windows, or Linux machine and so on. If the application is properly built, it will run equally well on any modern web browser, such as Internet Explorer, Mozilla Firefox, Opera, or Safari.

• Web applications make it easier to have a central data store. When you have several locations that need access to the same data, having all that data stored in one place is much easier than having separate databases in each location. This way you avoid potential data synchronization operations and lower security risks.

Understanding AJAX

AJAX is an acronym for Asynchronous JavaScript and XML. If you think it doesn't say much, we agree. Simply put, AJAX can be read "empowered JavaScript", because it essentially offers a technique for client-side JavaScript to make background server calls and retrieve additional data as needed,updating certain portions of the page without causing full page reloads. When put in perspective, AJAX is about reaching a better balance between client functionality and server functionality when executing the action requested by the user. Up until now, client-side functionality and server-side functionality were regarded as separate bits of functionality that work one at a time to respond to user's actions. AJAX comes with the solution to balance the load between the client and the server by allowing them to communicate in the background while theuser is working on the page.To explain with a simple example, consider web forms where the user is asked to write some data(such as name, email address, password, credit card, etc) that has to be validated before reaching the business tier of your application. Without AJAX, there were two form validation techniques.The first was to let the user type all the required data, let him or her submit the page, and perform the validation on the server. In this scenario the user experiences a dead time while waiting for the new page to load. The alternative was to do this verification at the client, but this wasn't always possible (or feasible) because it implied loading too much data on the client (just think if you needed to validate that the entered city and the entered country match).In the AJAX-enabled scenario, the web application can validate the entered data by making server calls in the background, while the user keeps typing. For example, after the user selects a country,the web browser calls the server to load on the fly the list of cities for that country, without interrupting the user from his or her current activity.To get a better feeling and understanding of what AJAX can do for you, have a look at these live and popular examples:

• Google Suggest helps you with your Google searches. The functionality is pretty spectacular; check it out at http://www.google.com/webhp?complete=1. Similar functionality is offered by Yahoo! Instant Search, accessible at http://instant.search.yahoo.com

• GMail (http://www.gmail.com). GMail is very popular by now and doesn't need any introduction. Other web-based email services such as Yahoo! Mail and Hotmail have followed the trend and offer AJAX-based functionality.

• Google Maps (http://maps.google.com), Yahoo Maps (http://maps.yahoo.com),and Windows Live Local (http://local.live.com).• Other services, such as http://www.writely.com and http://www.basecamphq.com.Just as with any other technology, AJAX can be overused, or used the wrong way. Just having AJAX on your website doesn't guarantee your website will be better. It depends on you to make good use of the technology.So AJAX is about creating more versatile and interactive web applications by enabling web pages to make asynchronous calls to the server transparently while the user is working. AJAX is a toolthat web developers can use to create smarter web applications that behave better than traditional web applications when interacting with humans.The technologies AJAX is made of are already implemented in all modern web browsers, such as Mozilla Firefox, Internet Explorer, or Opera, so the client doesn't need to install any extra modules to run an AJAX website. AJAX is made of the following:

• JavaScript is the essential ingredient of AJAX, allowing you to build the client-side functionality. In your JavaScript functions you'll make heavy use of the DocumentObject Model (DOM) to manipulate parts of the HTML page

.• The XMLHttpRequest object enables JavaScript to access the server asynchronously, so that the user can continue working, while functionality is performed in the background. Accessing the server simply means making a simpleHTTP request for a file or script located on the server. HTTP requests are easy to make and don't cause any firewall-related problems.
• A server-side technology is required to handle the requests that come from the JavaScript client. For the client-server communication the parts need a way to pass data and understand that data.Passing the data is the simple part. The client script accessing the server (using theXMLHttpRequest object) can send name-value pairs using GET or POST. It's very simple to readthese values with any server script.The server script simply sends back the response via HTTP, but unlike a usual website, the responsewill be in a format that can be simply parsed by the JavaScript code on the client. The suggested format is XML, which has the advantage of being widely supported, and there are many libraries thatmake it easy to manipulate XML documents. But you can choose another format if you want (youcan even send plain text), a popular alternative to XML being JavaScript Object Notation (JSON).None of the AJAX components is new, or revolutionary (or at least evolutionary) as thecurrent buzz around AJAX might suggest: all the components of AJAX have existedsince sometime in 1998. The name AJAX was born in 2005, in Jesse James Garret'sarticle at http://www.adaptivepath.com/publications/essays/archives/000385.php, and gained much popularity when used by Google in many of its applications.What's new with AJAX is that for the first time there is enough energy in the market to encourage standardization and focus these energies on a clear direction of evolution. As aconsequence, many AJAX libraries are being developed, and many AJAX-enabledwebsites have appeared. Microsoft through its Atlas project is pushing AJAXdevelopment as well.AJAX brings you the following potential benefits when building a new web application:
• It makes it possible to create better and more responsive websites and web applications.
• Because of its popularity, it encourages the development of patterns that help developers avoid reinventing the wheel when performing common tasks.
• It makes use of existing technologies.
• It makes use of existing developer skills.
• Features of AJAX integrate perfectly with existing functionality provided by web browsers (say, re-dimensioning the page, page navigation, etc).Common scenarios where AJAX can be successfully used are:
• Enabling immediate server-side form validation, very useful in circumstances when it's unfeasible to transfer to the client all the data required to do the validation whenthe page initially loads
• Creating simple online chat solutions that don't require external libraries such as the Java Runtime Machine or Flash.
• Building Google Suggest-like functionality
• More effectively using the power of other existing technologies. ,implement a real-time charting solution using Scalable Vector Graphics(SVG), and in 0, you'll use an external AJAX library to create a simple drag-and-drop list.
• Coding responsive data grids that update the server-side database on the fly.
• Building applications that need real-time updates from various external sourcesPotential problems with AJAX are:
• Because the page address doesn't change while working, you can't easily bookmarkAJAX-enabled pages. In the case of AJAX applications, bookmarking has differentmeanings depending on your specific application, usually meaning that you need tosave state somehow (think about how this happens with desktop applications—there's no bookmarking there).
• Search engines may not be able to index all portions of your AJAX application site.
• The Back button in browsers, doesn't produce the same result as with classic webapplications, because all actions happen inside the same page.
• JavaScript can be disabled at the client side, which makes the AJAX application nonfunctional,so it's good to have another plan in your site, whenever possible, to avoidlosing visitors.Finally, before moving on to write your first AJAX program, here are a number of links that mayhelp you in your journey into the exciting world of AJAX:
• http://ajaxblog.com is an AJAX dedicated blog.
• http://www.navioo.com/ajax/ajaxstart.php is acomprehensive article collection about AJAX.
• http://www.ajaxian.com is the AJAX website of Ben Galbraith and Dion Almaer,the authors of Pragmatic AJAX.
• http://www.ajaxmatters.com is an informational site about AJAX, containingloads of very useful links.
• http://ajaxpatterns.org is about reusable AJAX design patterns.
• http://www.ajaxinfo.com is a resource of AJAX articles and links.contains many links to various AJAX resourcesand tutorials.
• http://ajaxguru.blogspot.com is a popular AJAX-related web blog.
• http://www.sitepoint.com/article/remote-scripting-ajax is Cameron Adams'excellent article AJAX: Usable Interactivity with Remote Scripting.
• http://developer.mozilla.org/en/docs/AJAX is Mozilla's page on AJAX.
• http://en.wikipedia.org/wiki/AJAX is the Wikipedia page on AJAX.The list is by no means complete. If you need more online resources, Google will surely beavailable to help.