pphill2
03-17-2008, 07:30 AM
Trying to use Ajax to improve some things I do with PHP. I am new to Javascript.
I have taken a simple code sample from a Sams book and changed a few small details. I'm attempting take text outputted from an echo statement in a php document and display it in the original file using ajax.
From the looks of the examples this should work yet nothing is displayed. If it turns out to be a simple typo I apologize.. looked over it many times and cannot fix it by myself.
ajax.php
<html>
<head>
<title>Ajax Man!</title>
</head>
<script language="JavaScript" type="text/javascript">
function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest(); /* e.g. Firefox */
} catch(e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP"); /* some versions IE */
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP"); /* some versions IE */
} catch (E) {
req = false;
}
}
}
return req;
}
var http = getXMLHTTPRequest();
function callAjax() {
var pass = document.ajaxform.textinput.value;
var myRand = parseInt(Math.random()*999999999999999);
var myurl = "ajax_handle.php?pass=" + pass + "&rand=" + myRand;
http.open("GET", myurl, true);
http.onreadystatechange = responseAjax;
http.send(null);
}
function responseAjax() {
if(http.readyState == 4) {
if(http.status == 200) {
var txt = http.responseText;
document.getElementById('display').innerHTML = txt;
} else {
alert("An error has occurred: " + http.statusText);
}
}
}
</script>
<body>
<form name="ajaxform">
<table>
<tr><td></td><td id="display"></td></tr>
<tr><td>Input: </td><td><input name="textinput" type="text"></td></tr>
<tr><td></td><td><input type="submit" value="Enter" onClick="callAjax()"></td></tr>
</table>
</form>
</body>
</html>
ajax_handle.php
<?php
echo "Hi there son";
?>
I have taken a simple code sample from a Sams book and changed a few small details. I'm attempting take text outputted from an echo statement in a php document and display it in the original file using ajax.
From the looks of the examples this should work yet nothing is displayed. If it turns out to be a simple typo I apologize.. looked over it many times and cannot fix it by myself.
ajax.php
<html>
<head>
<title>Ajax Man!</title>
</head>
<script language="JavaScript" type="text/javascript">
function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest(); /* e.g. Firefox */
} catch(e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP"); /* some versions IE */
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP"); /* some versions IE */
} catch (E) {
req = false;
}
}
}
return req;
}
var http = getXMLHTTPRequest();
function callAjax() {
var pass = document.ajaxform.textinput.value;
var myRand = parseInt(Math.random()*999999999999999);
var myurl = "ajax_handle.php?pass=" + pass + "&rand=" + myRand;
http.open("GET", myurl, true);
http.onreadystatechange = responseAjax;
http.send(null);
}
function responseAjax() {
if(http.readyState == 4) {
if(http.status == 200) {
var txt = http.responseText;
document.getElementById('display').innerHTML = txt;
} else {
alert("An error has occurred: " + http.statusText);
}
}
}
</script>
<body>
<form name="ajaxform">
<table>
<tr><td></td><td id="display"></td></tr>
<tr><td>Input: </td><td><input name="textinput" type="text"></td></tr>
<tr><td></td><td><input type="submit" value="Enter" onClick="callAjax()"></td></tr>
</table>
</form>
</body>
</html>
ajax_handle.php
<?php
echo "Hi there son";
?>