IT Jobs in India: AJAX

Chapter: Introducing Ajax

A little more than a year ago, an article by Jesse James Garrett was published describing an advanced web development technique that, even though individual components of it have existed for years, few web developers had ever stumbled across. I can guess the reason for this lack of knowledge; basically, in the last few years, the need to produce measurable results has gotten in the way of the need to practice our craft. Or, as a former manager of mine would say, it's "that mad scientist stuff," except, as I recall, he used another word in place of stuff. Unfortunately, nine times out of ten, the need to produce measurable results gets in the way of "that mad scientist stuff."

However, it's the tenth time that's important. The article didn't stop at just describing the technique; it went on to say that Google used the very same technique. Invoking that single name, Google, was enough to change a point of view. Quicker than you could say, "Igor, the kites!" the phrase "that mad scientist stuff" morphed into "Why aren't we doing it this way?" The reason for this change of perception is that the name Google made this a technique that could produce measurable results. All it took was that single name, Google, to make using the XMLHttpRequest object so that the browser could communicate with the server without the page ever unloading and reloading into an acceptable practice.

This chapter introduces you to that practice, the practice of updating web pages with information from the server. Beyond the XMLHttpRequest object, which has been around for several years as a solution looking for a problem, there is nothing weird needed. Basically, it is how the individual pieces are put together. When they're put together in one way, it is nothing more than a pile of parts; however, when put together in another way, the monster essentially rises from its slab.

What Is Ajax?

As stated previously, Ajax stands for Asynchronous JavaScript And XML, but what exactly does that mean? Is the developer limited to only those technologies named? Thankfully, no, the acronym merely serves as a guideline and not a rule. In some ways, Ajax is something of an art, as with cooking. Consider, for a moment, the dish called shrimp scampi; I've had it in restaurants up and down the East Coast of the United States, and it was different in every restaurant. Of course, there were some common elements, such as shrimp, butter, and garlic, but the plethora of little extras added made each dish unique.

An Ajax Encounter at the First

Now that I've gushed about the why of this technique, let me offer a little insight on the how of this technique. Some readers might not consider this a true example of Ajax, but it does share many of the same qualities of Ajax, in much the same way that a Star Trek fan and a Star Wars fan share many of the same qualities.

HTMLfs.htm

<html>
  <head>
    <title>HTMLfs</title>
  </head>
  <frameset rows="100%,*">
    <frame name="visible_frame" src="visible.htm">
    <frame name="hidden_frame" src="hidden.htm">
    <noframes>Frames are required to use this Web site.</noframes>
  </frameset>
</html>

visible.htm

<html>
  <head>
    <title>visible</title>
    <script language="javascript">
/*
    Perform page initialization.
*/
function initialize() { }

/*
    Handle form visible form onchange events. Values from the visible
    form are copied to the hidden form.
*/
function changeEvent(obj)
{
  parent.frames[1].document.getElementById(obj.id).value = obj.value;
}

/*
    Submits the form in the hidden frame then reloads the hidden frame.
*/
function submitForm() {
  parent.frames[1].document.getElementById('hidden_form').submit();
  parent.frames[1].document.location = "hidden.htm";
}
    </script>
  </head>
    <body onload="initialize()">
      <form name="visible_form" id="visible_form"></form>
    </body>
</html>

hidden.htm

<html>
  <head>
    <title>hidden</title>
    <script language="javascript">
var reBrowser = new RegExp('internet explorer','gi');

/*
    Perform page initialization, waits for the visible frame to load and
clones the hidden form to the visible form.
*/
function initialize()
{
  var hiddenForm = document.getElementById('hidden_form');

  if(reBrowser.test(navigator.appName))
  {
    while(parent.document.frames.item(0).document.readyState !=
'complete') { }

    parent.frames[0].document.getElementById('visible_form').innerHTML =
hiddenForm.innerHTML;
  }
  else
  {
    var complete = false;

    while(!complete)
    {
      try
      {

parent.frames[0].document.getElementById('visible_form').appendChild
(hiddenForm.cloneNode(true));

        complete = true;
      }
      catch(e) { }
    }
  }
}
    </script>
  </head>
  <body onload="initialize()">
    <form name="hidden_form" id="hidden_form" action="post.aspx">
      <h1>Address Information</h1>
      <table border="0" width="100%">
        <tr>
          <th width="30%" align="right">Name: </th>
          <td align="left">
            <input type="text" name="name" id="name" value=""
onchange="changeEvent(this)">
          </td>
        </tr>
        <tr>
          <th align="right">Address Line 1: </th>
          <td align="left">
            <input type="text" name="address1" id="address1" value=""
onchange="changeEvent(this)">
          </td>
        </tr>
        <tr>
          <th align="right">Address Line 2: </th>
          <td align="left">
            <input type="text" name="address2" id="address2" value=""
onchange="changeEvent(this)">
          </td>
        </tr>
        <tr>
          <th align="right">City: </th>
          <td align="left">
            <input type="text" name="city" id="city" value=""
onchange="changeEvent(this)">
          </td>
        </tr>
        <tr>
          <th align="right">State: </th>
          <td align="left">
            <input type="text" name="state" id="state" value=""
onchange="changeEvent(this)">
          </td>
        </tr>
        <tr>
          <th align="right">Zip Code: </th>
          <td align="left">
            <input type="text" name="zip" id="zip" value=""
onchange="changeEvent(this)">
          </td>
        </tr>
      </table>
      <br>
      <input type="button" value="Submit" onclick="submitForm()">
    </form>
  </body>
</html>

XML

In its simplest form, XML is nothing more than a text file containing a single well-formed XML document. Come to think of it, the same is pretty much true in its most complex form as well. Looking past all of the hype surrounding XML, it is easy to see that XML is merely the text representation of selfdescribing data in a tree data structure. When this is understood, all that is left are the nitty-gritty little details, like "What's a tree data structure?" and "How exactly does data describe itself?"

A tree data structure is built of nodes, with each node having only one node connected above it, called a parent node. The sole exception to this rule is the root node, which has no parent node. Nodes can also have other nodes connected below, and these are called child nodes. In addition, nodes on the same level that have the same parent node are called children.

XSLT

XSLT is an XML-based language that is used to transform XML into other forms. XSLT applies a style sheet (XSLT) as input for an XML document and produces outputin most cases, XHTML or some other form of XML. This XHTML is then displayed on the browser, literally in the "wink of an eye."

One of the interesting things about XSLT is that, other than the XML being well formed, it really doesn't make any difference where the XML came from. This leads to some interesting possible sources of XML. For example, as you are probably aware, a database query can return XML. But did you know that an Excel spreadsheet can be saved as XML? XSLT can be used to transform any XML-derived language, regardless of the source.

Next Chapter

AJAX