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?
- 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
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
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.
- 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.
- 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.
- 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.
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!