Remote Scripting with AJAX, Part 1
by Cameron Adams |

Implement XMLHttpRequest

In a traditional server/client application, the entire ecard form would have to be submitted to the server, checked, and returned to the browser before the client could be made aware of whether their receipt number was valid or not. With the remote scripting model, we're able to check the receipt number as soon as the user has finished dealing with that field. When a user submits the form, the browser has already identified whether or not the data is valid.

The first step in checking the data remotely is to know when the user has entered a value into the receipt number field. This can be detected using an onchange event handler for the field. A "change" on a text field is registered whenever the user modifies the value of the text field and then "blurs" away from that field (i.e., they tab or click away from it). This is normally a good indication that a user has finished filling out the field, and that the data it contains can be processed. By capturing this onchange event, we can tell our script to begin validating the field's content:

receipt.onchange = onchangeReceipt;

onchangeReceipt is a function that is called when the onchange event is triggered. It's inside of this function that we initialize our XMLHttpRequest object and send off the relevant data to be checked:

var requester = null; 

      

  function onchangeReceipt() 

  { 

 /* Check for running connections */ 

 if (requester != null && requester.readyState != 0 && requester.readyState

!= 4) 

 { 

   requester.abort(); 

 } 

  

 try 

 { 

   requester = new XMLHttpRequest(); 

 } 

 catch (error) 

 { 

   try 

   { 

     requester = new ActiveXObject("Microsoft.XMLHTTP"); 

   } 

   catch (error) 

   { 

     requester = null; 

  

     return false; 

   } 

 } 

  

 requester.onreadystatechange = requesterExecuteAction; 

  

 requester.open("GET", "receipt.php?receipt=" +

this.value); 

 requester.send(null); 

  

 return true; 

  }

You might recognize some of that syntax from the first part of this article; namely, the forked try/catch structure, and the open() and send() methods that control the XMLHttpRequest object.

The first if statement checks to see whether or not an XMLHttpRequest object already exists and is currently running; if so, it aborts that connection. This ensures that a number of conflicting XMLHttpRequest calls aren't run simultaneously, which would clog up the network. The function then continues on, to create a new XMLHttpRequest object and open a connection to the server-side validation script, receipt.php.

In receipt.php, the CGI variable receipt is checked and, if its value is "1234567", some XML data is returned; otherwise, a plain text string of "empty" is returned, indicating that the receipt number is invalid:

if ($receipt == "1234567") 

  { 

 header("Content-type: text/xml"); 

  

 $filePointer = fopen("example.xml", "r"); 

 $exampleXML = fread($filePointer, filesize("example.xml")); 

 fclose($filePointer); 

  

 print($exampleXML); 

  } 

  else 

  { 

 header("Content-type: text/plain"); 

 print("empty"); 

  }

Hard-coded values and data have been used in this example to simplify the code, but in the real world, this PHP script would check the receipt number against a database, and return the appropriate data for that number.

Note that if receipt number is invalid, the content-type header sent is "text/plain". This simplifies the message-printing process somewhat, but it also means that on the client side, the responseXML property of the XMLHttpRequest object will not contain anything. As such, you should always be aware of what your server-side scripts return, and keep an eye on responseXML or responseText appropriately.

Prev  [1] [2] [3] Next