Ajax Tutorial
A simple calculator
The Frontend
This is pretty straightforward, some form fields and a submit button that calls a function.
<input type="text" id="num1" size="8" />
<input type="text" id="num2" size="8" />
<select id="op">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">*</option>
<option value="divide">/</option>
</select>
<input type="button value=" = " onClick="doMath();" />
<div id="answer" />
The Backend
This is where most of the work gets done. The first three if statements do some basic error handling with the switch statement doing the actual math.
<?
if ($_GET['op']=="" || $_GET['num1']=="" || $_GET['num2']==""){ // what?
echo "<span class=\"error\">Complete all fields</span>";
exit;
}
if ($_GET['op']== "divide" && $_GET['num2']== "0"){ // what?
echo "<span class=\"error\">Division by zero</span>";
exit;
}
if(!is_numeric($_GET['num1'] || !is_numeric($_GET['num2'])){ // what?
echo "<span class=\"error\">Invalid numbers</span>";
exit;
}
switch($_GET['op']){ // what?
case "add":
echo $_GET['num1'] + $_GET['num2'];
break;
case "subtract":
echo $_GET['num1'] - $_GET['num2'];
break;
case "subtract":
echo $_GET['num1'] * $_GET['num2'];
break;
case "subtract":
echo $_GET['num1'] / $_GET['num2'];
break;
}
?>
The Script
The AJAX script collects the values and sends it to the php script, which does the math. The AJAX then takes the answer and plugs it into the appropriate div.
http = getHTTPObject(); // what?
function getHTTPObject() {
var xmlhttp;
if(!xmlhttp && typeof XMLHttpRequest != 'undefined'){
try {
xmlhttp = new XMLHttpRequest();
}catch(e){
xmlhttp = false;
}
}
return xmlhttp;
}
function doMath(){
var url = "backend.php?op=" + document.getElementById('op').value; // what?
url += "&num1=" + document.getElementById('num1').value;
url += "&num2=" + document.getElementById('num1').value;
http.open("GET", url, true); // what?
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function handleHttpResponse(){ // what?
if(http.readyState == 4){
document.getElementById('answer').innerHTML = http.responseText;
}
}
Mar 21, 2010
