Teochew Thunder: October 2014

AJAX is a very useful technique of combining client-side and server-side capabilities to form a coherent whole. It drives many front-end UI features we see today and greatly extends the traditional client-server relationship. But it's not without its flaws. Chief of which, the asynchronous nature of AJAX may confound the programmer if not properly handled. The following is an example of what I'm talking about.

Let's say you have an interface with three textboxes. You want to enter a value into the first textbox, and upon the click of a button, the value will appear in the second textbox. And then the second textbox's value will be multiplied by two and appear in the third textbox. Wait a second, I hear you exclaim. You don't need AJAX to do that! Yes, that is quite right. Simple JavaScript should suffice. And should take the average programmer less than a few minutes. However, I'm trying to illustrate a point about AJAX here as simply as possible, so bear with me.

Below should be your HTML front-end:

<!DOCTYPE html>
<html>
   <head>
      <title>AJAX test</title>
   </head>

   <body>
      <input type="text" id="txtNumber" value="0">
      <input type="button" value="Display">
      <br />
      <input type="text" id="txtDisplay" value="0" disabled="disabled"> Original
      <br />
      <input type="text" id="txtDisplayTimesTwo" value="0" disabled="disabled"> x2
   </body>
</html>

This is what your interface should look like:

Original
x2

Now for the purposes of this exercise, we're going to prepare two server-side scripts. The following examples are in PHP, but you may use any server-side language you're familiar with.

display.php

<?php
$number=$_GET["number"];
echo $number*2;
?>

displaytimestwo.php

<?php
$number=$_GET["number"];
echo $number*2;
?>

So far so good? Now we're going to add JavaScript to your HTML file. And an onclick JavaScript handler to your button.

<!DOCTYPE html>
<html>
   <head>
      <title>AJAX test</title>

      <script>
      function display()
   {
          var number=document.getElementById("txtNumber").value;

         if (window.XMLHttpRequest)
       {// code for IE7+, Firefox, Chrome, Opera, Safari
           xmlhttp=new XMLHttpRequest();
       }
          else
       {// code for IE6, IE5
           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }

          xmlhttp.onreadystatechange=function()
         {
           if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
                document.getElementById("txtDisplay").value=xmlhttp.responseText;
            }
       }

          xmlhttp.open("GET","display.php?number="+number,true);
          xmlhttp.send();
      }

      function displaytimestwo()
     {
          var number=document.getElementById("txtDisplay").value;

         if (window.XMLHttpRequest)
       {// code for IE7+, Firefox, Chrome, Opera, Safari
           xmlhttp=new XMLHttpRequest();
       }
          else
       {// code for IE6, IE5
           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }

          xmlhttp.onreadystatechange=function()
       {
           if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
                document.getElementById("txtDisplayTimesTwo").value=xmlhttp.responseText;
            }
       }

    xmlhttp.open("GET","displaytimestwo.php?number="+number,true);
    xmlhttp.send();
      }
      </script>
   </head>

   <body>
      <input type="text" id="txtNumber" value="0">
      <input type="button" value="Display" onclick="display();displaytimestwo();">
      <br />
      <input type="text" id="txtDisplay" value="0" disabled="disabled"> Original
      <br />
      <input type="text" id="txtDisplayTimesTwo" value="0" disabled="disabled"> x2
   </body>
</html>

If you're familiar with AJAX, you will understand from the above that we've just added two JavaScript functions, each with a server-side call to their respective PHP files. Upon clicking the button, the value in the textbox will run these functions, one after the other.

Try it. What happens? A big fat nothing. The code was syntactically correct. But, the asynchronous nature of AJAX, so handy most times, works against you here. Instead of running in sequence, it tries to run display() and displaytimestwo() at the same time. And ends up clashing because displaytimestwo() and display() both require the object named xmlhttp! A solution here might be to use different variable names. But that's just a band-aid over the root of the problem. A far more elegant solution would be to force these two functions to run in their intended sequence. That's where your foundation in structured programming comes in.

Alter the code as follows:

<!DOCTYPE html>
<html>
   <head>
      <title>AJAX test</title>
      <script>
      function display()
     {
          var number=document.getElementById("txtNumber").value;

         if (window.XMLHttpRequest)
       {// code for IE7+, Firefox, Chrome, Opera, Safari
           xmlhttp=new XMLHttpRequest();
       }
          else
       {// code for IE6, IE5
           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }

          xmlhttp.onreadystatechange=function()
       {
           if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
                document.getElementById("txtDisplay").value=xmlhttp.responseText;
    displaytimestwo();
            }
       }

          xmlhttp.open("GET","display.php?number="+number,true);
          xmlhttp.send();
      }

      function displaytimestwo()
     {
          var number=document.getElementById("txtDisplay").value;

         if (window.XMLHttpRequest)
       {// code for IE7+, Firefox, Chrome, Opera, Safari
           xmlhttp=new XMLHttpRequest();
       }
          else
       {// code for IE6, IE5
           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }

          xmlhttp.onreadystatechange=function()
       {
           if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
                document.getElementById("txtDisplayTimesTwo").value=xmlhttp.responseText;
            }
       }

    xmlhttp.open("GET","displaytimestwo.php?number="+number,true);
    xmlhttp.send();
      }
      </script>
   </head>

   <body>
      <input type="text" id="txtNumber" value="0">
      <input type="button" value="Display" onclick="display();">
      <br />
      <input type="text" id="txtDisplay" value="0" disabled="disabled"> Original
      <br />
      <input type="text" id="txtDisplayTimesTwo" value="0" disabled="disabled"> x2
   </body>
</html>

Now type "10" in the first textbox, click the button, and what do you get?

Original
x2

What we basically did was to move the displaytimestwo() command to the middle of the function display(), just after the part where the AJAX is successfully called. Which means displaytimestwo() runs only after display() runs!

Remember! When your code fails, make AJAX-ments!
T___T

The four most commonly-used mathematical operators in programming are obvious - addition (+), subtraction (-), multiplication (*) and division (/). But there's a fifth.

The Modulus, commonly known as "Remainder", is used to derive the remainder from a dividend (a) and divisor (b). Basically, when you ask for the Modulus of 3 and 2, you get 1. (3 divided by 2, remainder 1) That is what you would get, assuming that both your dividend and divisor are positive whole numbers.

The Modulus can be an elusive and frustrating operator as its execution varies from language to language. Useful enough to warrant fairly moderate usage, yet not frequently-used enough to stick in the mind. I have found myself looking it up repeatedly whenever I needed to use it because I would forget it soon after. Admittedly this happened because at that time, I was switching between languages, a necessary evil when one is maintaining legacy code.

Just for posterity, I have included the various forms of the Modulus in some of the different languages I had to use it in. (Note that this list is by no means exhaustive)

Language	Operator	Example
PHP, C++, C#, JavaScript, Flash ActionScript, Python (and most other languages whose syntax is based on C)	%	a % b
Coldfusion, Basic, VBScript	mod	a mod b
SQL	mod(x,y)	mod(a,b)

So, what can the Modulus do for you?

Beyond the obvious function of giving you the remainder when a is divided by b, The Modulus helps you determine if a given number is odd or even. Or if the number is divisible by another number. Basically, if x%2 equals 0, then x is an even number. If x%y equals 0, then x is divisible by y. Again, this only works if both your dividend and divisor are positive whole numbers, so adjust your exceptions accordingly!

Thus, it also follows that the Modulus is great at pattern sequences.

If, for example, you need a table with 5 rows that is colored differently every alternating row, you might do this:

That would net you this:

Test row

Or if you wanted a table of 20 rows with a different colored row every 5 rows...

Test row

Note that CSS3 has built-in this particular functionality without the need for coding. However, the point here is to illustrate, as simply as possible, the Modulus operator's capability.

In fact, try the above exercise with a nested loop. (see below) Or recursively. The possibilities are endless. And this is just the simple stuff!

x	x	x	x	x
x	x	x	x	x
x	x	x	x	x
x	x	x	x	x
x	x	x	x	x

Signing off with much Modu-love
T___T

Teochew Thunder

Pages

Thursday, 30 October 2014

Synchronizing the Asynchronous

Wednesday, 29 October 2014

The Ecology of the Modulus

So, what can the Modulus do for you?

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews