There's a craze on the web at the moment, and that craze is
named AJAX. What's that? Well, according to some people, it's a
technology that's going to redefine the web. Just how many times
have you heard that statement.
The classic web application model works like this: Most user
actions in the interface trigger an HTTP request back to a web
server. The server does some processing -- retrieving data,
crunching numbers, talking to various legacy systems -- and then
returns an HTML page to the client.
What Does AJAX Stand For?
AJAX means 'Asynchronous Javascript and XML'. Adaptive Path came
up with the term in this essay:
http://www.adaptivepath.com/publications/essays/archives/000385.p
hp. However, the word is really a bit of a misnomer: AJAX
doesn't really rely on XML at all, but rather on a Javascript
function that happens to be named XMLHttpRequest.
All About XMLHttpRequest.
XMLHttpRequest was originally invented and implemented by a
Microsoft team who were working on a webmail application, and
it's been around for a while now (since 1999, in fact). The
reason it has suddenly come to prominence now is that Google
used it in three projects, Gmail, Google Suggest and Google
Maps, and in each case managed to create a much better user
interface than they would have been able to otherwise.
So what does XMLHttpRequest do? To put it simply, it lets your
Javascript go back to the server, fetch some new content, and
write it back out onto the page - all without the user having to
change pages. This gives a 'smoother' feel to web applications,
as they can do things like submit forms without the whole
browser window needing to go blank and reload the page. Take a
look at maps.google.com now, and notice how you can drag the map
around anywhere you want to go without having to reload the
page. This would be unthinkable without XMLHttpRequest.
One of the biggest reasons XMLHttpRequest has become popular now
is that browsers other than Internet Explorer have started to
support it, mainly due to the fuss over its use in Gmail. The
function is, by all accounts, a very simple one in technical
terms: it was just a matter of someone having the idea.
Getting Started with AJAX.
The first thing to do to get started with AJAX, then, is to
create an XMLHttpRequest object in your Javascript code. As
ever, Internet Explorer has to be difficult, doing this a
different way to every other browser out there. That means that
you should use this Javascript code:
var ajax; onload = function () { if (window.ActiveXObject) {
ajax = new ActiveXObject("Microsoft.XMLHTTP"); } else { ajax =
new XMLHttpRequest; } }
What you've done there is declared ajax as a global variable
(usable by all functions), and then created a new AJAX object
when the page loads, either using ActiveX for Internet Explorer
or the XMLHttpRequest function in other browsers.
The next step is to write two more functions: one to get data
from a URL, and one to handle the data that comes back.
function getText(url) { ajax.open("GET", url, true);
ajax.send(null); }
ajax.onreadystatechange = function () { if (ajax.status ==
"200") { // do things with retrieved text (in ajax.responseText)
} }
All you need to do then is call getText from the relevant part
of your code with a URL you want to get text from, and put that
text wherever you want it to be in the state change function.
The most powerful thing about this approach is that the URL you
send to the server can contain variables, using the old REST
(question marks and equals signs) way of doing things.
That means that, using the code above, you can easily send a
request to ajax.php on your server, and include the current
value of, say, an input box for a username on a registration
form. The ajax.php script checks whether that username is
already in use, and then sends either '1' or '0' as its only
output. All you would then need to do is check whether
ajax.responseText was 1 or 0, and change the page accordingly,
preferably using getElementByID.
Should I Use It?
The question remains over just how useful this is: it's
certainly good for some applications where users would otherwise
have to submit data over and over again, but it's not much use
for smaller ones. AJAX coding has a tendency to take a lot of
time, especially the first time you try it, and this is often
time that could have been better spent on other parts of the
project. In short, don't be afraid of AJAX, but make sure you
use it when you find a project that's well-suited to
asynchronous transfer - don't go trying to fit AJAX to a website
that doesn't suit it, just because you think it's cool.
About the author:
Original Source:
Articles-Galore.com
Information supplied and written by Lee Asher of Eclipse Domain
Services
Domain Names, Hosting, Traffic and Email Solutions.
