I had already written a downloadable fingering chart application for shakuhachi using Microsoft Visual C# 2010 Express. However, this meant only Microsoft users were able to take advantage of it. This was a huge disadvantage as many shakuhachi players are artists, and being artists are likely to use Apple operating systems.

So, while I was taking an online AJAX class I discovered some of the power AJAX had to offer, and set off to creating a web-based shakuhachi fingering chart application using AJAX.

AJAX is an acronym for Asynchronous Javascript and XML. At the heart of AJAX is the XMLHttpRequest object. What the XMLHttpRequest object allows a web developer to do is write a web page that can request XML or text files from the web-host and display that information without refreshing or navigating to another web page. This is a tremendous boost in speed right there. However, AJAX goes a step further. Note that the first word represented in the acronym AJAX is “asynchronous”. This means that the request for the data can be performed in the background, as opposed to a “synchronous” request where the javascript code requesting the data must stop and wait while the data is downloaded. This gives AJAX web applications the ability to have the look, speed, and feel of PC-based applications.

Although it looks complicated, my web-based shakuhachi fingering chart application is a very simple AJAX solution. The javascript code runs on the client’s browser, and when an action is taken such as a dropdown box selection being made or a graphic clicked, the appropriate javascript function is started to issue XMLHttpRequests to gather data based on the action. For my AJAX-driven solution, only text items are requested, and they are simply text files sitting on the web server. More advanced AJAX solutions could have server-side programs (typically PHP or ASP.NET) invoked to collect the data from a database and possibly perform manipulations on the data before being returned.

You may be curious about how, if I only requested only text items in my fingering chart solution, how I got the various graphics to change. Well, what happens is that the text that is requested for the graphics are HTML image tags. When retrieved via the XMLHttpRequest, the image tags are placed in the appropriate spot within the HTML document for the web page. The browser then goes about using the new HTML image tags to go to the server, locate, and download the requested image.