Styling “Simple” AJAX

AJAX – “Asynchronous JavaScript + XML”. “Not a technology – several technologies”. That’s probably why I like it so much, its a little bit of everything, to make one thing. Raj over at his website, wrote a short, yet easily understandable way to understand the very basics of AJAX. I liked it so much, that when I tried it out, I truly felt as if I was really getting the hang of it. I strongly suggest that you read his post before reading on with mine. Possibly being able to create my own applications using AJAX, even though we all need to remember not to “overuse” it, just like with any other cliche (haha). The point is, it was understandable, but the “practical application” wasn’t there. You click on a link, and magically a piece of text appears, and walla, you’ve done a little AJAX. Uninspired by that part of the tutorial felt like taking it just a little further. No, I havent really altered his code, all the credit goes to him, but in the way of implementing my own “practical application” i will take credit for. So you want to make it look pretty? Assign some CSS styles? What about just make a nice looking AJAX AFC scoreboard?

Getting Things Together

Okay, so we need to create an AFC scoreboard, we need some “fake” information. We need wins, losses, and teams (not in that order). So you can fill in whatever you want, but we are going to do this all in a table. This is valid, because this IS tabular data. In this case I did get the real AFC division teams together in the correct fields, but not the correct wins/losses.

Why a football scoreboard?

There’s two reasons. One, I have a good friend that knows a lot about football, and he was able to help me put this part of the project together so that it was “real” data, although, not current. Second, on a more serious note, a football scoreboard is one of those “practical applications” that you would want to see using AJAX. This is because, just clicking on another division, the user doesn’t want to wait (especially on dial-up) for the page to load, just to show a difference in a table change. This is the concept of AJAX. Ask your question like this: “Do you want to refresh a page to have all the same content except for this little box changes?”. It’s not only taking up bandwidth on the owners hosting (that’s a different topic), but it’s also causing the user to lose interest.

Raj’s Code

So, before getting to my code, let’s stick to what we already have, and that’s the AJAX request object that Raj wrote. Other than that, his concept still remains, but all else, it’s my code. So this is what we have:

JavaScript

function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}

var http = createRequestObject();

function sndReq(action) {
    http.open('get', 'rpc.php?action='+action);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        var update = new Array();

        if(response.indexOf('|' != -1)) {
            update = response.split('|');
            document.getElementById(update[0]).innerHTML = update[1];
        }
    }
}

By the way, I feel like his code really is nicely written. It’s very clean and to the point. That’s what I like to see, and that’s what I like to write. We will call this file “function.js”. You will need to include it in your main XHTML file, we will call “scoreboard.html”.

The Scoreboard File

Now let’s cover the main XHTML file that we will run as the “application” file in the end. Remember in Raj’s post that the main file calls the function from an element (i.e. anchor tag) and it dynamically calls a PHP file with the appropriate output depending on your link. Let’s see the XHTML document (scoreboard.html):

XHTML

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Ajax Styling</title>
   <style type="text/css" media="screen">
	@import url( screen.css );
   </style>
   <script type="text/javascript" src="functions.js"></script>
</head>

<body>
<ul class="teams">
    <li>
    <a href="javascript:sndReq('north')" title="North">North</a></li>
    <li>
    <a href="javascript:sndReq('east')" title="East">East</a></li>
    <li>
    <a href="javascript:sndReq('south')" title="South">South</a></li>
    <li>
    <a href="javascript:sndReq('west')" title="West">West</a></li>
</ul>
<div id="stats">
	<p>Please select a division for stats.</p>
</div>
</body>
</html>

Alright, if you follow it, we grab the function.js file (the AJAX request file) and then grabs the CSS files (we will get there) and the basic markup of the whole document. We have the lists for the North, East, South, and West for the AFC teams. Next we have the div tag that will have the tables dynamically embeded into it.

The ‘RPC’ (PHP) File

The ‘RPC’ file, the one that Raj started up, contains all the “decision making”. If the action is set to ‘north’, then it access’ the north.php (which will be the table for the North stats, which will be shown later). So this looks almost the same as the original post by Raj. Remember this is called rpc.php (no quotes).

PHP

< ?php
switch($_REQUEST['action']) {
	case 'north':
		echo "stats|";
		include('north.php');
		break;
	case 'east':
		echo "stats|";
		include('east.php');
		break;
	case 'south':
		echo "stats|";
		include('south.php');
 		break;
	case 'west':
		echo "stats|";
		include('west.php');
		break;
}
?>

Whoa! There’s slight change than Raj’s RPC file had. My problem was, I needed to call a file, and not just show text. In a practical situation, we would not just show text, we would grab something dynamic, moreso it would more than likely come from a database. What I had to do was “confuse” the parser and just put the include on another line. Although, I could have probably done it on one line, but not being the best at PHP, do not really know how. Never-the-less, you can see that we are calling the files depending on the “action” of the call to the RPC file.

The Team Files

This I shouldn’t have to explain, these are just your team files. Just a table that has each North, East, South, and West teams. They are named respectively; north.php, east.php, south.php, and west.php.

XHTML

<!-- east.php -->
<table border="0" width="100%">
      <tbody>
          <tr class="header">
              <td>Team</td>
              <td>Wins</td>
              <td>Loses</td>
          </tr>
          <tr>
              <td class="left">Buffalo</td>
              <td class="wins">5</td>
              <td>3</td>
          </tr>
          <tr>
              <td class="left">Miami</td>
              <td class="wins">7</td>
              <td>2</td>
          </tr>
          <tr>
              <td class="left">N.Y. Jets</td>
              <td class="wins">6</td>
              <td>1</td>
          </tr>
          <tr>
              <td class="left">New England</td>
              <td class="wins">9</td>
              <td>2</td>
          </tr>
      </tbody>
</table>

XHTML

<!-- north.php -->
<table border="0" width="100%">
      <tbody>
         <tr class="header">
             <td>Team</td>
             <td>Wins</td>
	     <td>Loses</td>
         </tr>
         <tr>
             <td class="left">Cincinatti</td>
             <td class="wins">5</td>
             <td>3</td>
         </tr>
         <tr>
             <td class="left">Pittsburgh</td>
             <td class="wins">7</td>
             <td>2</td>
         </tr>
         <tr>
             <td class="left">Cleveland</td>
             <td class="wins">6</td>
             <td>1</td>
         </tr>
         <tr>
             <td class="left">Baltimore</td>
             <td class="wins">9</td>
             <td>2</td>
         </tr>
      </tbody>
</table>

XHTML

<!-- south.php -->
<table border="0" width="100%">
      <tbody>
          <tr class="header">
              <td>Team</td>
              <td>Wins</td>
              <td>Loses</td>
          </tr>
          <tr>
               <td class="left">Indianapolis</td>
               <td class="wins">5</td>
               <td>3</td>
          </tr>
          <tr>
               <td class="left">Jacksonville</td>
               <td class="wins">7</td>
               <td>2</td>
          </tr>
          <tr>
               <td class="left">Tennessee</td>
               <td class="wins">6</td>
               <td>1</td>
          </tr>
          <tr>
               <td class="left">Houston</td>
               <td class="wins">9</td>
               <td>2</td>
          </tr>
      </tbody>
</table>

XHTML

<table border="0" width="100%">
      <tbody>
          <tr class="header">
              <td>Team</td>
              <td>Wins</td>
              <td>Loses</td>
          </tr>
          <tr>
              <td class="left">Kansas City</td>
              <td class="wins">5</td>
              <td>3</td>
          </tr>
          <tr>
              <td class="left">Denver</td>
              <td class="wins">7</td>
              <td>2</td>
          </tr>
          <tr>
              <td class="left">Oakland</td>
              <td class="wins">6</td>
              <td>1</td>
          </tr>
          <tr>
              <td class="left">San Diego</td>
              <td class="wins">9</td>
              <td>2</td>
          </tr>
      </tbody>
</table>

That was easy, now let’s get to the real fun part.

The CSS file (Finally!)

The process of styling was very simple and lightweight. What I wanted to make was a header-like navigational system, to where the table would line up with the header area. Also, things needed to be uniform and readable, that was accomplished. Here is the CSS code (screen.css):

CSS

p {
	padding:0;
	margin:0;
	font:10px arial;
	color:#933;
}
.teams {
	list-style-type:none;
	margin:0;
	padding:5px;
	background:#474747;
	width:210px;
	font:12px "trebuchet ms";
}
.teams li {
	display:inline;
	border-left:1px #fff solid;
}
.teams li a {
	color:#fff;
	padding:0 10px;
	text-decoration:none;
}
#stats {
	width:220px;
	background:#ffc;
}
#stats table {
	color:#369;
	font:10px arial;
	border:1px #474747 solid;
	padding:10px;
}
.header {
	font-weight:bold;
	font-size:14px;
	color:#933;
}
.left {
	text-align:left;
}

As you can see, it is really short, but just by looking at it, I bet I could compress it down a bit just by eliminating certain inherited properties. That is one thing that wasn’t on my list tonight. It works, and guess what? It validates (even better!).

Wrapping Up

Overall, this was just my personal touch to a great topic. I know that with any website, content is only half the battle. Why do you think the W3C “separated content from presentation”? In the real world, you are going to want the applications (content) to go with the style of your website (presentation), so why not make a tutorial about it.

Hit tip to Raj again, thanks for the inspiration. A working example of the AJAX Scoreboard can be found here.