What is AJAX?
By Stephen Bucaro
|
One of the most recent buzz words going around the Internet is "AJAX". What is AJAX?
Is it a new and extremely powerful programming language? Is it an all-purpose cleaner?
In plain-simple English, what exactly is AJAX? Well it's neither a new programming
Language nor an all-purpose cleaner, it's mainly a new way of using the programming
languages we already know.
|
In the early days of the Web, the only way to make a webpage interactive was for
the user to enter data into the webpage and submit it back to the server. The server
would respond by creating a new webpage, which it would send back to the user, the
user's browser would load the new webpage.
DHTML (Dynamic HTML), introduced in 1997, made it possible to create interactivity
on the client machine. Data and Java Script programming is sent in or along with
the webpage. Java Script is used to detect events on the webpage, such as user clicks,
and in response, use the XML data to modify HTML elements on the webpage. The user
could interact with the webpage without having to submit it back to the server, and
without having to load a new webpage. This gave the user quicker response and saved
a lot of Internet bandwidth and server processing time.
The problem with DHTML is that you can send only a limited amount of data along with
the initial webpage. For example, you can't send an entire database with millions of
records. That would take too long. So if the scope of the user's interactivity went
outside of the data sent with the initial webpage, you still needed to make a request
to the server and load the new webpage returned by the server.
AJAX (Asynchronous Java Script and XML) uses Java Script in a webpage to submit
requests to the server, receive XML data from the server, and modify HTML elements on
the webpage, without having to load a new webpage. This greatly expands the functionality
of the users webpage without the overhead of loading a new webpage after each request
to the server.
AJAX functionality became available in 1999 when Microsoft implemented the
XMLHttpRequest ActiveX Object in Internet Explorer 5. The Mozilla project
followed by implementing the XMLHttpRequest functionality natively in the Mozilla 1.0 browser.
Creating an instance of the XMLHttpRequest object for Internet Explorer:
var req = new ActiveXObject("Microsoft.XMLHTTP");
Creating an instance of the XMLHttpRequest object for Mozilla:
var req = new XMLHttpRequest();
• Creating an XMLHttpRequest object requires a branch structure (not shown) to acomodate for browser
differences in the way the objects are created.
To make a request, tell the XMLHttpRequest object the kind of request, the url
you want to request, the function to be called when the request is made, and what,
(if any) information you want sent along in the body of the request.
req.open("GET", "test.txt", true);
req.onreadystatechange = function()
{
if (req.readyState == 4)
{
alert(req.responseText)
}
}
req.send(null);
• This code checks the readyState property, and when its value is 4, indicating the load is complete,
it displays a message to the user.
So, in plain-simple English, AJAX allows a webpage to submit data to the server and
retrieve new XML data or load new Java Script functionality, without loading a new webpage.
It's a way to use languages we already know, to provide functionality similar to a Web
service, without the steep SOAP, WSDL, UDDI, alphabet soup learning curve.
More Web Design Coding Issues:
• Increase Your Traffic by Recovering Your Lost Visitors
• Web Design Troubleshooting Guide
• Advantages and Disadvantages of Frames
• Web Designer's Reference
• Syndicate your own content Using aspSyndicator
• Video - Optimizing the Order of Scripts and Styles
• Web Design Blunders That Can Cost You Lost Profits
• Seven WordPress Security Tips
• RSS Basics
• What is AJAX?
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
