My first steps in AJAX

are you tired of this? then return to latest posts

posted by André Luís
posted on fri, 19 aug 2005 05:41

First Steps in Ajax I had to start sometime, given my past experiences with Javascript, but i had to get some stuff out of the way first – namely, this website – so that i could dedicate an evening messing around with this new technique – not technology – without other stuff in my head.

It wasn't hard to pick up and i was a bit surprised by the simplicity of it all. I had some issues putting it to work, but that was mostly due to the fact i was working on a computer without access to the internet, thus no google for me. I figured it out in the end, and put together a very simple page which basically asks for an XML file through AJAX, handles it and displays it on the page – i still need to check if XSLT works in this environment.

Here's an example of an XML file:

helloworld.xml

<sentence>

    <word>Hello</word>

    <word spaced="false">World</word>

    <word spaced="false">!</word>

</sentence>

To complicate things a little, i had an attribute named spaced which when set to false means that the word is not supposed to be followed by a space. I know that semantically speaking, it's not a very correct XML structure... the punctuation sign ! is not a word, but hey... this is just a test. ;)

This file should display the obvious message:

Hello World!

A final note

Just like every other over-hyped techniques, AJAX can be misused, but if used right... its potential is enormous. Also, accessibility should not be forgotten, actually, it should be even more important. If you're performing a critical operation through AJAX, make sure it can also be performed by users without Javascript support.

Test it

I have tested it on Mozilla Firefox 1.0.6 and Internet Explorer 6.0, both on Windows XP. If you run into any bugs, let me know in the comments. I don't want to start with browser incompatibilities. ;) Thanks.

Here's the link:
workshop.andr3.net/ajax-firststeps

Related files

Feel free to have a peek at the files. It's no break-through, but it might help, if you're trying to get started.

ajax.js
this file has the functions related to the XMLHttpRequest Object. Initializing, sending request and showing debug messages.
helloworld.js
this one is in charge of starting the whole deal.

↓ Comments

Civ2boss on fri, 19 aug 2005 07:46

Iâ€™ve always wanted to try doing an XML photo gallery, but not the Flickr/AJAX kind. Google Picasa can export your photos in XML form so that would be a good way to upload photos to a gallery that you only have to code once. Similar to what Doug Bowman did with his photos. I suppose that could work for Flickr/AJAX too with a few javascript codes.

Oh and good job on the AJAX program. It works on everything Iâ€™ve thrown at it so far, even a Â© works.
meechwings on fri, 19 aug 2005 08:52

Cool.
I just learned about AJAX the other day (I know, I'm behind on the times :P). It sounds interesting and like you, I think it's something I should definately try, seeing as I've done the whole JavaScript thing too. Plus I'd like to learn more about how sites like GMail work.
This might be a good starting point for me, thanks!
andr3 on fri, 19 aug 2005 13:03

@Civ2boss: My goal would be to have a PHP script create an XML file based on the contents of a folder... and then an AJAX interface to load them all interactively. I still need to practice a bit more with all this. I haven't tried sending big chunks of text -- like comments -- to the server. But i believe it's very doable.

@meechwings: First of all, welcome. :) Hadn't seen you around yet. You should do that, since you already have JS background it shouldn't be too hard.
I've been an adept of Javascript for a long time, and it's with great pleasure that i see it reborn from its ashes -- popups and other icky stuff gave javascript a very bad name -- with all this hype around ajax. But not every hype is bad. Just take it in small dosages. :)

Good luck. I'll be posting more of my experiences as i go along. :)
Comments have been disabled

Sorry about that.

Feel free to engage with me via twitter.

Tweet to @andr3

↑ top

an ordinary blog — andr3.net