Ajax - Beyond the Four Lettering

In this article we are going to discuss what is AJAX, how it works, what you can do with it, what are the advantages and the fall backs. The goal here is to try and explain how the Ajax works, by giving you a detailed explanation of the whole process along with some graphics and live examples. So lets get started.

What is it all about?

First lets start with some basic things. What's AJAX standing for - Asynchronous JavaScript and XML. It isn't a programming  language, but a way to use existing standards. AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:

• Standards-based presentation using XHTML and CSS
• Dynamic display and interaction using the Document Object Model
• Data interchange and manipulation using XML and XSLT
• Asynchronous data retrieval using XMLHttpRequest
• And JavaScript binding everything together

The above may sound more or less like aliens talking to you so lets say it one more time in human language.  Ajax is a way of programming for the Web. Data, content, and design are merged together into a seamless whole. When your customer clicks on something on an Ajax driven application, there is very little lag time. The page simply displays what they're asking for. If you don't believe me, try out Google Maps for a few seconds. Scroll around and watch as the map updates almost before your eyes. There is very little lag and you don't have to wait for pages to refresh or reload. To put it in two simple words - instant loading.

So lets go a little deeper and see what is happening and how. In the traditional Web application, the interaction between the customer and the server goes like this:

• Customer accesses Web application 
  
• Server processes request and sends data to the browser while the customer waits
• Customer clicks on a link or interacts with the application
• Server processes request and sends data back to the browser while the customer waits

Ajax Acts as an Intermediary

The Ajax engine works within the Web browser (through JavaScript and the DOM) to render the Web application and handle any requests that the customer might have of the Web server. The beauty of it is that because the Ajax engine is handling the requests, it can hold most information in the engine itself, while allowing the interaction with the application and the customer to happen asynchronously and independently of any interaction with the server.

Asynchronous - This is the key. In standard Web applications, the interaction between the customer and the server is synchronous. This means that one has to happen after the other. If a customer clicks a link, the request is sent to the server, which then sends the results back. With Ajax, the JavaScript that is loaded when the page loads handles most of the basic tasks such as data validation and manipulation, as well as display rendering the Ajax engine handles without a trip to the server. At the same time that it is making display changes for the customer, it is sending data back and forth to the server. But the data transfer is not dependent upon actions of the customer.

After reading this you may still have some questions, so to make it really simple, we will take the above paragraph and give you an example. If you’ve visited eBay recently you would’ve noticed that, as you type in the search box, suggestions appear that match actual item names of listings. The webpage never reloads and you’re not interrupted. The search started before you clicked on the search button, making it interactive, responsive and user friendly.

Everything so far sounds good right? Along with all the advantages, there are some drawbacks, after all nothing is perfect in this world.

Advantages

• More interactive and responsive UI - This is pretty much the most striking benefit behind why several developers and webmasters are switching to AJAX for their websites. AJAX allows easier and quicker interaction between user and website as pages are not reloaded for content to be displayed.
• Only content to be updated is requested and transferred - If the entire web page reloads, requests are made by the browser to the web server to get all the necessary information to render to page. This includes html, images, style sheets, JavaScript files and so forth. Ajax focuses the data request and transportation to just the necessary part of the page to be updated using less network bandwidth and reducing the load time of the page.
• Reduced connections to the web server - The web server handles and serves fewer requests since unnecessary images and sheet styles are not requested with every page update.
• Load delayed content - A page can display different content based on the user’s actions. It is not necessary to load that content with the initial page load. Ajax can be used to dynamically get and store that content only if and when needed.
• Auto save user information - Ajax can be used to save partial data similar to Microsoft Word auto save feature.

Disadvantages

• The back and refresh button are rendered useless - With AJAX, as all functions are loaded on a dynamic page without the page being reloaded or more importantly a URL being changed (except for a hash symbol maybe), clicking the back or refresh button would take you to an entirely different web page or to the beginning of what your dynamic web page was processing. This is the main drawback behind AJAX but fortunately with good programming skills this issue can be fixed.
• It is built on JavaScript - While javascript is secure and has been heavily used by websites for a long period of time, a percentage of website surfers prefer to turn javascript functionality off on their browser rendering the AJAX application useless, a work around to this con is present as well, where the developer will need to code a parallel non-javascript version of the dynamic web page to cater to these users.

So in conclusion we can say that Ajax can bring a wealth of benefits and improvements to your website. Whether you’re upgrading or redesigning your current site or building a new site, you should definitely consider using Ajax.

DMXzone extensions that can help with your Ajax experience:

• DMXzone Ajax Form - Submit any form and retrieve the result on the same page. Load dynamic content or galleries and create a drop-down menus to filter the results.

• Ajax DataGrid - Create awesome looking Ajax Grids. Use inline search to find any content and connect with any datasource, whether it’s MySQL or MS SQL Server, using auto generated ASP or PHP Code.

• Ajax AutoComplete - Enter a few characters get a filtered drop-down with choices enabling quick search and selection without having to enter long text. You can generate your search using a database thanks to the Ajax technology. Full support with Google Maps and Address search.

• Ajax Event Calendar - Display all your events, appointments, reservations or availability in a stylish event Calendar. Customize the display by Day/Month/Week/Year. Load data dynamically from database or Google Calendars and load everything inline!