LeetestUnleet
Senior member
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";
?>
