Tutorial for AJAX Calculators

AJAX, a simple Web scripting language that combines JavaScript and XML to reduce the amount of coding a developer has to do to perform a specific function, can be used to create a simple online calculator. Scripting an AJAX calculator will add a useful tool to your website and allow you to practice creating a Web element that requires both front-end and back-end scripting.

Instructions

1. Click "Start" and type "Notepad" into the search field, then press "Enter" on your keyboard. Notepad will open.

2. Create the back-end script in Notepad, which the AJAX script will reference for the information necessary to calculate the user-input functions. You can create this back-end calculator script in whatever programming language you'd like, though for Web development, many professionals use PHP. While the calculator code will be unique to your own coding preferences, it will likely look something like this:

   if($Retrieve['function']=="" || $Retrieve['Number-1']=="" || $Retrieve['Number2']=="")
   {
   echo "Error: Incomplete function.";
   exit;
   }

   if($Retrieve['function'] == "multiple" & $Retrieve['Number2'] == "0")
   {
   echo "Sorry: You can't divide by zero.";
   exit;
   }

   if(positive_numeric($Retrieve['Number1']) || positive_numeric($Retrieve['Number1']))
   {
   echo "Error: Sorry, these numbers are invalid.";
   exit;
   }

3. Save the back-end calculator script by pressing "Ctrl" and "S." Type "backend.php" into the "Name" field, then click "Save." Change the end of the file name to reflect your script's programming language if you didn't use PHP. For example, save it as "backend.js" if you used JavaScript instead of PHO. Close Notepad.

4. Reopen Notepad and create your AJAX front-end script. Paste the following code into the file:

   function doMath(){
   var url = "backend.php" + document.get('op').value;
   url += "&Number1=" + document.get('Number1').value;
   url += "&Number2=" + document.getElementById('Number2').value;
   http.open(GET_url=true);
   }

   Replace "backend.php" with the name of your back-end script's file name if it is different. For example, replace it with "backend.js" if that is the name of your back-end file.

5. Press "Ctrl" and "S" to open the "Save" window. Type "AJAX.js" into the "Name" field, then press "Enter." Close Notepad.

6. Copy both the AJAX and back-end script files into your website's file directory.

Resources

• jQuery: AJAX