Two interwoven technologies are popping up all over the Web. They provide the means for websites like Gmail, Yahoo! Mail (beta), .Mac Webmail, and several others to behave dynamically without using Flash. The best way to tell if a site is using Ajax and the Document Object Model (DOM), is to see if you can submit a form or change something on a page without it reloading. Reducing reloads gives the user a faster, more enjoyable experience.

Ajax is a sort-of-acronym that stands for Asynchronous JavaScript and XML. I've always known a little JavaScript, which is the backbone of Ajax and the DOM, but I decided to delve into it a little deeper lately. I read Head Rush Ajax which was well-written and sufficiently thorough. I recently purchased another JavaScript book that will cover more of the syntactic capabilities of the language. I'm pretty excited to read it.

Anyway, since I've now bored you to death, allow me to introduce you to one of the first Ajax-based web interfaces I've made publicly available. It's the big, phat, one-and-only, Contact Page. Note what happens when you don't fill in a field and click Send or Submit, and note what happens when you correctly fill in all the fields. It's like magic mixed with a lot of programming. Since I'm always trying to find simple examples for things on the Web, I'll provide the code I used to validate the notification form (the one at the bottom of the Contact page). Here it is:

//+++++++ Notify Checker Code +++++++++++

function submitNotified(){
   var notifiedEmail = document.getElementById("comment-email-notify").value;
   //Error Checking
   if(notifiedEmail.length <= 0){
      var notifiedError = document.getElementById("notifiedError");
      notifiedError.className = "error2";
      var notifiedID = document.getElementById("comment-email-notify");
      notifiedID.className = "bad";
   } else {
      var notifiedID = document.getElementById("comment-email-notify");
         notifiedID.className = "good";
         var notifiedError = document.getElementById("notifiedError");
         notifiedError.className = "invisible";

      //Get rid of any error warnings...
      var notifiedError = document.getElementById("notifiedError");
      notifiedError.className = "invisible";

      //Processing... indicator text
      var processingspan = document.getElementById("theprocessing");
      processingspan.className = "processing";

      //Send the data to the PHP processor
      var url = "notified.php";
      request.open("POST",url,true);
      request.onreadystatechange = showConfirmation;
      request.setRequestHeader("Content-Type","application/
x-www-form-urlencoded");
      request.send("notifiedEmail="+escape(notifiedEmail));
   }
}

function showConfirmation(){
   if(request.readyState == 4){
      if(request.status == 200){

      //Locate form on page
      var successspan = document.getElementById("thesuccess");
      var notifiedForm = document.getElementById("notifiedForm");
      var beta = document.getElementById("beta-home-middle-inner");

      //Create some confirmation text
      successspan.className = "success";

      //Replace the form with the confirmation
      beta.removeChild(notifiedForm); //Remove the form
   } else {
      var message = request.getResponseHeader("Status");
      if((message.length == null) || (message.length <= 0)){
         alert("Error! Request status is "+ request.status);
      } else {
         alert(message);
         }
      }
   }
}

You'll also need some simple PHP to send the information to an e-mail account:

<?php

   $email = $_REQUEST['notifiedEmail'];

      $message = "
      E-mail: $email

      $themessage
      ";

      $receiver = "clifton@fusionfox.com";
      $subject = "New Fusionfox Notification Subscription";

   //E-mail Sending Code
   mail($receiver, $subject, $message, "From: $email");

?>

I'll be adding this information to this site's usability updates page (note the new link on the bottom-right of the home page). I'm anxious to work more with Ajax, and I'll be sure to yap about any new stuff I make.