# I made an AJAX web page!

**URL:** <https://boards.straightdope.com/t/i-made-an-ajax-web-page/353842>\
**Category:** Miscellaneous and Personal Stuff I Must Share\
**Created:** [April 23, 2006, 8:07am UTC](https://boards.straightdope.com/t/i-made-an-ajax-web-page/353842 "2006-04-23T08:07:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Baraqiyal](https://avatars.discourse-cdn.com/v4/letter/b/ecccb3/32.png) [@Baraqiyal](https://boards.straightdope.com/u/Baraqiyal)\
**Post date:** [April 23, 2006, 8:07am UTC](https://boards.straightdope.com/t/i-made-an-ajax-web-page/353842/1 "2006-04-23T08:07:26Z")

</div>

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](http://www.dictionary.hm/) 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](http://me.eae.net/stuff/litespellchecker/litedemo.html).

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](http://openwebdesign.org/).

Oh yeah, I also had to learn AJAX. For that I used IBM’s wonderful [5 part series](http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro5/) 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](http://www.zapatec.com/website/main/products/prod3/index.jsp) 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](http://www.ritlabs.com/en/products/tinyweb/) - only 53k! I’m hosting it on my cable line, so I don’t know how it’s going to hold up.

[Here’s](http://24.143.163.63) the page. Tell me what you think.

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

---

<div class="post-metadata">

**Author:** ![gum](https://avatars.discourse-cdn.com/v4/letter/g/bbe5ce/32.png) [@gum](https://boards.straightdope.com/u/gum)\
**Post date:** [April 23, 2006, 9:06am UTC](https://boards.straightdope.com/t/i-made-an-ajax-web-page/353842/2 "2006-04-23T09:06:03Z")

</div>

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](http://www.ajax.nl/)_😉

---

<div class="post-metadata">

**Author:** ![Ice\_Wolf](https://avatars.discourse-cdn.com/v4/letter/i/dfb087/32.png) [@Ice\_Wolf](https://boards.straightdope.com/u/Ice_Wolf)\
**Post date:** [April 23, 2006, 9:48am UTC](https://boards.straightdope.com/t/i-made-an-ajax-web-page/353842/3 "2006-04-23T09:48:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![enipla](https://avatars.discourse-cdn.com/v4/letter/e/54ee81/32.png) [@enipla](https://boards.straightdope.com/u/enipla)\
**Post date:** [April 23, 2006, 1:08pm UTC](https://boards.straightdope.com/t/i-made-an-ajax-web-page/353842/4 "2006-04-23T13:08:33Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![GorillaMan](https://avatars.discourse-cdn.com/v4/letter/g/50afbb/32.png) [@GorillaMan](https://boards.straightdope.com/u/GorillaMan)\
**Post date:** [April 23, 2006, 1:18pm UTC](https://boards.straightdope.com/t/i-made-an-ajax-web-page/353842/5 "2006-04-23T13:18:26Z")

</div>

‘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).

---

<div class="post-metadata">

**Author:** ![jjimm](https://avatars.discourse-cdn.com/v4/letter/j/ba8739/32.png) [@jjimm](https://boards.straightdope.com/u/jjimm)\
**Post date:** [April 23, 2006, 1:30pm UTC](https://boards.straightdope.com/t/i-made-an-ajax-web-page/353842/6 "2006-04-23T13:30:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Baraqiyal](https://avatars.discourse-cdn.com/v4/letter/b/ecccb3/32.png) [@Baraqiyal](https://boards.straightdope.com/u/Baraqiyal)\
**Post date:** [April 24, 2006, 6:12pm UTC](https://boards.straightdope.com/t/i-made-an-ajax-web-page/353842/7 "2006-04-24T18:12:05Z")

</div>

[QUOTE=jjimm]  
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.  
[/QUOTE]

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.
