I am trying my hand on PHP. And I’ve landed at the client-server connectivity.
Now I have a server-side script that applies random math to an x and a y value that it gets via an XMLHttpRequest:
<?php
$farr = array(
create_function('$x,$y', 'return "x + y = ".($x+$y);'),
create_function('$x,$y', 'return "x - y = ".($x-$y);'),
create_function('$x,$y', 'return "x * y = ".($x*$y);'),
create_function('$x,$y', '$returnVal = "x / y = "; if($y==0){$returnVal.="NaN (y value = 0)";}else{$returnVal.=($x/$y);}return $returnVal;')
);
$x = $_GET["x"];
$y = $_GET["y"];
$i = rand(0,3);
try{
$f = $farr[$i];
$result = $f($x,$y);
echo "".$result;
} catch(Exception $e) {
echo "An exception occurred while accessing functions";
}
?>
The client calls this script when a user presses the “Send” button on my form:
<html>
<head>
<title>
Welcome
</title>
<script type="text/javascript">
function calculate(x, y){
var xmlhttp;
if( x.length==0){
document.getElementById("result").innerHTML = "x is not set";
return;
}
if(y.length==0){
document.getElementById("result").innerHTML = "y is not set";
return;
}
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("result").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "math.php?x="+x+"&y="+y, true);
xmlhttp.send(null);
}
</script>
</head>
<body>
<form>
x: <input type="text" name="x"/><br/>
y: <input type="text" name="y"/><br/>
<input type="submit" value="Send" onclick="calculate(x.value, y.value)"/> <input type="reset" value="Reset"/>
<p>Result: <div id="result">something</div></p>
</form>
</body>
</html>
It is intended that the result is placed in the div at the end of the form. However, I see the result for a brief amount of time, and then it’s gone again. I suspect the page from reloading, but isn’t that the purpose of the XMLHttpRequest, that only the part in the onreadystatechanged callback get’s refreshed? And not the whole page?
that’s because you are using a submit button.. change