What is it all about?
First lets start with some basic things. What's AJAX standing for -
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
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
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
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.
- 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
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
- 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.
long period of time, a percentage of website surfers prefer to turn
application useless, a work around to this con is present as well, where
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!