This is my first attempt at anything AJAX, and it's mostly a learning exercise for me, but I plan to adapt the code to a real use. I followed the guide (and ripped most of the code from) here.
When I click the button, I get HTTP Status 1 (Loading), but it's never triggered again after that. :edit: Fixed that on accident
I'm sure it's something ridiculously simple for someone who knows what they're doing, but I'm new to this AJAX thing and just trying to learn it.
This is the page:
http://homncruse.ti.sabren.com/ajax/
:edit:
Nevermind... the Readystate started working just after I made this post when I tried to clean it up. I must've had some typo somewhere that I accidentally fixed.
:edit again:
Works in IE, but not in Firefox...
:edit 3:
Found some cleaner code for getHTTPObject(), but same symptoms.
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Testing AJAX</title>
<script language="javascript" type="text/javascript">
var url = "test.php?param="; // The server-side script
function handleHttpResponse() {
alert("Reached HTTP Status " + http.readyState);
if(http.readyState == 4) {
// responseText is blank in Firefox?
alert(http.responseText);
document.getElementById("htmlOutput").innerHTML = http.responseText;
}
}
var isWorking = false;
function getHTTPObject() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
try { return new XMLHttpRequest(); } catch(e) {}
alert("XMLHttpRequest not supported");
return null;
}
var http = getHTTPObject(); // We create the HTTP Object
function jsDoCR() {
if (!isWorking && http) {
var passText = "passText";
http.open("GET", url + escape(passText), true);
http.onreadystatechange = handleHttpResponse;
isWorking = true;
http.send(null);
}
}
</script>
</head>
<body>
<form method="post">
<button onClick='jsDoCR()'>Go go Gadget AJAX!</button><br/><br/>
</form>
<div id="htmlOutput" style="border: 1px solid black">This text should be replaced with output from test.php.</div>
</body>
</html>
test.php
<?php
echo "Foobar";
?>
When I click the button, I get HTTP Status 1 (Loading), but it's never triggered again after that. :edit: Fixed that on accident
I'm sure it's something ridiculously simple for someone who knows what they're doing, but I'm new to this AJAX thing and just trying to learn it.
This is the page:
http://homncruse.ti.sabren.com/ajax/
:edit:
Nevermind... the Readystate started working just after I made this post when I tried to clean it up. I must've had some typo somewhere that I accidentally fixed.
:edit again:
Works in IE, but not in Firefox...
:edit 3:
Found some cleaner code for getHTTPObject(), but same symptoms.
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Testing AJAX</title>
<script language="javascript" type="text/javascript">
var url = "test.php?param="; // The server-side script
function handleHttpResponse() {
alert("Reached HTTP Status " + http.readyState);
if(http.readyState == 4) {
// responseText is blank in Firefox?
alert(http.responseText);
document.getElementById("htmlOutput").innerHTML = http.responseText;
}
}
var isWorking = false;
function getHTTPObject() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
try { return new XMLHttpRequest(); } catch(e) {}
alert("XMLHttpRequest not supported");
return null;
}
var http = getHTTPObject(); // We create the HTTP Object
function jsDoCR() {
if (!isWorking && http) {
var passText = "passText";
http.open("GET", url + escape(passText), true);
http.onreadystatechange = handleHttpResponse;
isWorking = true;
http.send(null);
}
}
</script>
</head>
<body>
<form method="post">
<button onClick='jsDoCR()'>Go go Gadget AJAX!</button><br/><br/>
</form>
<div id="htmlOutput" style="border: 1px solid black">This text should be replaced with output from test.php.</div>
</body>
</html>
test.php
<?php
echo "Foobar";
?>