Remote Scripting with AJAX, Part 1
by Cameron Adams | Pages: 1, 2, 3

As well as calling the server-side script, onchangeReceipt() also assigns onreadystatechangeReceipt() to monitor the status of the connection via the onreadystatechange event, and it is this function that determines when the connection is finished and further action should be taken. To do this, we use the previously discussed readyState/status condition nesting:

function onreadystatechangeReceipt() 
  { 
 /* If XMLHR object has finished retrieving the data */ 
 if (requester.readyState == 4) 
 { 
   /* If the data was retrieved successfully */ 
   if (requester.status == 200) 
   { 
     writeDetails(); 
   } 
   /* IE returns a status code of 0 on some occasions, so ignore this
case */ 
   else if (requester.status != 0) 
   { 
     alert("There was an error while retrieving the URL: " + requester.statusText); 
   } 
 } 
  
 return true; 
  }

When a successful status code is returned, writeDetails() is invoked. It is this function that parses the returned data and determines what to do to the web page:

function writeDetails() 
  { 
 var receipt = document.getElementById("receipt"); 
  
 if (requester.responseText.charAt(0) == "<") 
 { 
   var email = document.getElementById("email"); 
   var name = document.getElementById("name"); 
  
   receipt.valid = true; 
   email.value = requester.responseXML.getElementsByTagName("email")[0]. 
  childNodes[0].nodeValue; 
 } 
 else 
 { 
   receipt.valid = false; 
 } 
  
 return true; 
  }

This function firstly checks the responseText property of the XMLHttpRequest object, to see whether the receipt number was valid or not. If it is valid, the data will be in XML format and its first character will be an opening angled bracket (<); otherwise, it will be a plain string. In each case, the extended property valid is set appropriately on the receipt number field. Additionally, if the receipt number is valid, extra data is added to the email field, having been parsed from the responseXML property of the XMLHttpRequest object.

The execution of writeDetails() marks the end of the remote scripting process for receipt number validation. With the extended valid property set on the field, the browser knows whether or not the data is OK, and can alert users of any errors when they try to submit the form:

orderForm.onsubmit = checkForm; 
      
  function checkForm() 
  { 
  if (!receipt.valid) 
  { 
 receipt.focus(); 
 alert("Please enter a valid receipt number."); 
  
 return false; 
  } 
  
  ...

If there is an error with the form, an alert() dialog appears when the submit button is clicked, asking the user to correct the error before the form is submitted:

Figure 2. Click for full-size image

checkForm() also handles the submission of the form data via remote scripting (though, in reality, normal form submission would probably suffice for an application like this). The remote scripting for the data submission uses the same code we used for validation, but a different server-side script is supplied to process the data, and instead of onreadystatechangeReceipt() being called once the connection has finished, onreadystatechangeForm() is called.

onreadystatechangeForm() triggers sentForm() to re-write the web page and inform the user that the ecard was either successfully or unsuccessfully sent, depending upon the data returned from the server:

function sentForm() 
  { 
 var body = document.getElementsByTagName("body")[0]; 
  
 body.innerHTML = "<h1>Send someone an e-card from ExampleCo!</h1>"; 
  
 if (formRequester.responseText == "success") 
 { 
   body.innerHTML += "<h1>Send someone an e-card from ExampleCo!</h1><p>Your
ExampleCo e-card has been sent!</p>"; 
 } 
 else 
 { 
   body.innerHTML += "<p>There was an error while sending your
ExampleCo e-card.</p>"; 
 } 
  
 return true; 
  }

This removes the initial form presented to the user, and inserts a final status message:

Figure 3.

While this application rewrites almost the whole page, it's easy to see how specific parts of the DOM could be changed using remote scripting, which would enable separate parts of an application interface to update independently of the web page itself.

Stay tuned for part two next week, where Cameron will cover how to create a usable scripting interface for the example application.

---

---

2. How to display remote dynamic xml wihout refresh?
   2007-02-12 06:04:59 mehran007
4. Somewhat confusing typo in code listing
   2005-08-23 11:31:23 jgehlbach
• Somewhat confusing typo in code listing
  2005-08-23 11:37:55 jgehlbach
6. AJAX Debugging
   2005-08-23 11:23:18 Julien Couvreur