Most of you would have heard of AJAX. What is it? Is it a language? No. It's JavaScript.

Basically, AJAX lets us get the content from an external page without reloading! It's especially useful when you need to get information from a serverside script (e.g. A php page that gets information from a database), and you don't want the page reloading all the time.

So how do you use AJAX? Let's make an example.
Make a new html document. Let's call it ajaxexample.htm.

Make it look something like this:

Note this line:
<a href="#" onClick="doAjax();">Click here!</a>
We make the href parameter "#", because just plain "" would cause the page to reload when we clicked the link, and not putting the href parameter at all would mean the link wouldn't be coloured/underlined. This doesn't matter all that much, but it makes a nicer effect that just clicking on text.
This line:
<span id="ajaxspan"></span>
Will be used when we actually make the script, which we're doing now!

Place this in the head tags of your page:

Big bit of code, isn't it!

Basically, it sets the xmlHttp variable to whatever's the best Ajax XmlHttp variable for the browser, then it tells the client to load the page "ajaxpage.php", and puts "Loading..." onto the page while it loads, then when it loads, it replaces the loading text with whatever's on the page!

Now for the final bit, ajaxpage.php. You can do this however you want, here's a simple example that just shows "Hello world!"

Simple, huh?

Your final ajaxexample.htm page should look like this:


And if it all goes well, when you click the "Click here!" link, the text "loading..." should appear, then once it's loaded, "Hello world!"

It should be easy to fiddle around and modify it to suit your needs. I hope you learned a little about AJAX!

This post has been edited by Habble: Nov 22 2007, 05:53 AM

http://craig.veritynet.net/~roly/

Doesn't work for me. Really good tut though, I do understand it now.

Thats a nice introduction tutorial. Thanks, got anything else for us anytime soon?

Nice tutorial. There's also some javascript framework that you don't have to write much code to implement AJAX. If you are interested,

1. Prototype
2. JQuery
3. Mootools

Cheers

Oops, my bad! JavaScript's case sensitive, it should be responseText, not responsetext

I'll change it now!

Thanks.

What changes? Is it the ajaxspan, the loading and the xmlhttpopen? What different parameters can be in that last one?

Great job...

The next step could be the tutorial in this post http://www.astahost.com/index.php?showtopi...502&hl=ajax

Regards.

That's another nice tutorial for those interested in Ajax. If for those who wants to get a feel and some background of it, I found this particular article that cover the whole of Ajax in an overview. Read it in your free time as its 9 pages .

http://www.peachpit.com/articles/article.a...425820&rl=1

Ajax is one of the few web based tech's I haven't had the chance to try my hand at yet, but luckily I'm in a course now that will be hitting on ajax a bit near the end so that should be a nice treat. I know it seems like a fairly powerful step forward for dynamic webpage generation so I'm excited to see what its capable of once I dig into it a bit. I always enjoy the new technologies they put out on web platforms so this should be entertaining as well.

AJAX (like javascript) is browser-dependable.
That's way XMLHttpRequest object can be created in different browsers using different javascript methods.
Open-source library Larissa hides this dependancy and provides some cross-browsers methods.