I made an AJAX web page!

Miscellaneous and Personal Stuff I Must Share
1

Being eager to jump all over any new buzzword that comes along, I decided to look into AJAX web programming. AJAX allows web pages to load data from the server without having to refreshing the page. This sounds unexciting, but it opens the door to creating dynamic web applications, without the necessity of additional plugins. One example you’ve probably used is Google Maps.

My first thought was to create an auto-suggest dictionary that gives suggestions as you type, but I found it had already been done.

I thought maybe a spell check for text input boxes that mark errors as you type, similar to a word processor. It would be something any web site could incorporate to replace their boring old-fashioned input boxes, but I found it too had already been done.

I settled on a song lyrics page that would suggest songs or artists as you type. So, for example, if you were looking for “Stairway to Heaven”, you could just type “sta”, then pick “Stairway to Heaven” from the drop-down list.

I found an FTP site that had about 45,000 old song lyrics. The lyrics were at least 8 years old. It would have been cool to have newer songs, but it’s just a programming exercise.

Since I didn’t want to spend a lot of time on design, I downloaded an open source web page template.

Oh yeah, I also had to learn AJAX. For that I used IBM’s wonderful 5 part series on AJAX programming. After reading the tutorial, it just seemed so easy. I felt like Doctor McCoy when he’s wearing “The Teacher”.

So I created the page.

As an afterthought I added a tree type browse function. Instead of re-inventing the wheel on that, I used Zapatec’s Freebie Javascript tree library, then added the AJAX components.

I also added a search engine, so you can search through the actual lyrics, rather than just the Titles and Artists.

To serve the page, I downloaded the world’s smallest web server - only 53k! I’m hosting it on my cable line, so I don’t know how it’s going to hold up.

Here’s the page. Tell me what you think.

Note, I pretty much gave up on supporting any other browsers other than IE and Firefox.

2

Great site, **Baraqiyal **. Fast too.

I did a search for ‘Vincent’ by Don MClean and all I had to do was type in ‘Starry starry’…

Thanks for the link. Well done!

Though I have to admit that, reading: ‘I made an AJAX website’ I thought you were talking about my favorite soccer team :wink:

3

Very cool. But “Enter” doesn’t seem to work for me with Firefox.

4

I had a Doper suggest using AJAX for a mapping site that I’m building. Pretty much saved the project. Or at least, let me do some things that would have other wise been impossible.

5

‘Enter’ worked fine for me on Firefox. One observation, though - the results appearing in the left-hand column felt counterintuitive (initially, I though nothing had happened).

6

Nice one!

I got the words “thinkin problem” when I entered “David” into the artist box. Was thinkin of David Bowie myself. I also found that “enter” didn’t work unless my cursor was in the bottom box.

I am fascinated by AJAX, so thanks for the link to the tutorial.

7

Isn’t that always the case - you can test the hell out of something but as soon as someone from the outside world tries it, bugs will pop up.