Head First AJAX

Currently reading a great AJAX book, Head First AJAX, by Rebecca Riordan. I was a little skeptical at first by the format of these “Head First” books. I had heard so much about these books that I decided to give it a shot. I have to say I’m very pleased. It makes the material very easy to understand, and I certainly need a good book to review my AJAX.

So what is AJAX?

At its core, AJAX is just making a part of the page do something else while not refreshing the entire page. So for example, you can press a button, and just the button alone would load data from the server and display it on another part of the page (maybe right above it) while not loading the entire page. This is benefit one. It uses the JavaScript XmlHttpRequest (XHR) object .

Benefit two, is that with that XHR object, you can make HTTP requests that traditional HTML pages cannot. An HTML page can make a GET or POST request (e.g. via a form). With an XHR object, you have all HTTP request methods available.

When AJAX first came out, it used just XML – the server side script (e.g. ASP page) would generate XML data and the XHR object would retrieve it. Now, you can use JSON (a native JavaScript data structure) or any form of data structure you want. So the “X” in AJAX really is any type of data structure you want to pass the data from the ASP page to the XHR object.

Some JavaScript frameworks make AJAX extremely easy to use. jQuery can make a GET request using one line of code (compared to the many in the example code from my site). Also, jQuery is part of the .NET framework (last I heard MS announcing it) and should be integrated into Visual Studio.NET.

Here’s a great snippet that bundles the logic to return an XmlHttpRequest object if the browser can in fact create the object. I find it quiet useful.

function createRequest() {
  try {
    request = new XMLHttpRequest();
  } catch (tryMS) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (otherMS) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = null;
      }
    }
  }	
  return request;
}

Some additional code, wrapped in functions, that sends the request object to the server, and fires the showUsernameStatus function. This is grabbed from the book site. Posting it here for my own benefit.

window.onload = initPage;
 
function initPage() {
  document.getElementById("username").onblur = checkUsername;
  document.getElementById("register").disabled = true;
}
 
function checkUsername() {
  document.getElementById("username").className = "thinking";
  request = createRequest();
  if (request == null)
    alert("Unable to create request");
  else {
    var theName = document.getElementById("username").value;
    var username = escape(theName);
    var url= "checkName.php?username=" + username;
    request.onreadystatechange = showUsernameStatus;
    request.open("GET", url, true);
    request.send(null);
  }
}
 
function showUsernameStatus() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      if (request.responseText == "okay") {
        document.getElementById("username").className = "approved";
        document.getElementById("register").disabled = false;
      } else {
        document.getElementById("username").className = "denied";
        document.getElementById("username").focus();
        document.getElementById("username").select();
        document.getElementById("register").disabled = true;
      }
    }
  }
}

Here’s a simple way to read a text file (data.txt), barebones, on Firefox, without checking if XMLHttpRequest object exists or not.

<html>
<head>
<script language="JavaScript">  
ajax = new XMLHttpRequest();
 
function ShowData()
{  
  ajax.open( "GET", "data.txt", true );  
  ajax.onreadystatechange = function() 
  {
    if ( ajax.readyState == 4 ) 
    {      
      document.getElementById("DataPanel").innerHTML = ajax.responseText;
    }
  }    
  ajax.send(null);
}  
</script>
 
<title>hey!</title>
</head>
<body>
  <button onclick="ShowData()">Show Data</button>   
  <div id="DataPanel"></div>  
</body>
</html>

This is data.txt, which is in the same directory as the html page above:

05/12/2009  10:32 PM             1,024 .rnd
10/03/2009  12:55 AM               428 1.txt
05/11/2009  10:37 PM                 0 AUTOEXEC.BAT
09/29/2009  09:56 PM             5,256 bar.emf
05/11/2009  10:37 PM                 0 CONFIG.SYS
12/06/2009  12:43 AM    <DIR>          Dan
12/06/2009  12:45 AM                 0 data.txt
05/11/2009  11:00 PM    <DIR>          DELL
05/11/2009  10:40 PM    <DIR>          Documents and Settings
05/11/2009  11:28 PM    <DIR>          Intel
11/24/2009  11:53 PM    <DIR>          Program Files
07/18/2009  12:21 AM    <DIR>          temp
11/24/2009  11:57 PM    <DIR>          WINDOWS