PDA

View Full Version : Easy AJAX not working for me


DangerousDan
July 8th, 2007, 07:40 PM
It doesn't want to change its readyState so onreadystatechange is never happening, anyone see something oblivious that I've been missing for the past two hours?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ajax Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function fetchData(url,dataToSend,objectID){
var pageRequest = false;
if (window.XMLHttpRequest)pageRequest = new XMLHttpRequest();
else if (window.ActiveXObject) pageRequest = new ActiveXObject("Microsoft.XMLHTTP");
else return false;
pageRequest.onreadystatechange = function() {
var object = document.getElementyById(objectID);
if(pageRequest.readyState==4){
object.innerHTML = pageRequest.responseText;
}
}
alert(pageRequest.readyState);
if(dataToSend) {
var sendData = 'sendData='+dataToSend;
pageRequest.open('POST',url,true);
pageRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
pageRequest.send(sendData);
}
else{
pageRequest.open('GET',url,true);
pageRequest.send(null);
}
}
</script>
</head>
<body>

<input type="button" onClick="fetchData('dataPage.php', false, 'message');" value="Click me!">
<div id='message'>&nbsp;</div>
</body>
</html>
kdd
July 9th, 2007, 06:47 PM
You're alerting the readyState and then you're sending the data. Try putting the alert() inside the onlreadystate function, and put if(dataToSend) right below "else return false" line. That might solve the problem, but I'm not too sure. :)
DangerousDan
July 9th, 2007, 07:27 PM
I'm afraid that didn't work, thanks for the try though :p:
borrob
July 10th, 2007, 05:05 AM
Why trying to invent the wheel again. Use a ajax class. These things have all been sorted out so i would urge you to. The code your currently are using is not complete and can generate a lot of errors at different places...
raz
July 10th, 2007, 02:09 PM
Why trying to invent the wheel again. Use a ajax class. These things have all been sorted out so i would urge you to. The code your currently are using is not complete and can generate a lot of errors at different places...

Learning purposes?... I know I try to remake classes of my own when learning something new.

As for ideas, Im not too keen on AJAX... =/ Sorry.
Esherido
July 10th, 2007, 02:15 PM
^ Learning purposes only go so far. With what you're doing Dan it likely would be smarter and easier to go with a prebuilt JavaScript framework (Both script.aculo.us and mootools are great.). Though that doesn't mean you should fiddle around with writing your own AJAX functionality, it's just a bit easier, quicker, and a bit safer to go with the frameworks.
DangerousDan
July 11th, 2007, 09:26 PM
I'm actually following a AJAX book, which is why I'm a little annoyed this isn't working. :diss:

As for "reinventing the wheel", I really like to build everything I can from the ground up so I know exactly how it is working; whenever I get a framework or some pre-written code I can't help but say "Huh?"

Given the amount of responses, I will look into these frameworks and learn what I can from then but if anyone has a solution from my code whether it be rewriting a certain part or just moving around some of the statements, I would be very grateful.
raz
July 11th, 2007, 09:33 PM
To your original post:

Whats "not happening"? Whats it supposed to say and such? From what I see, it LOOKS like it should work, but I dont know what its supposed to do as I dont have the PHP page... so I cant really play with it... and Im too lazy to make one up =]
DangerousDan
July 11th, 2007, 09:42 PM
pageRequest.readyState always equals zero, meaning it isn't making the call or something.

This means pageRequest.onreadystatechange never happens!

Also the php page:


<h2> Hello World! </h2>

Something to the effect of that, all it does is load a message.
borrob
July 12th, 2007, 04:45 AM
ok if it's for learning purposes, i can dig that. But then start right. ( throw away your book, could be a good start ( humor) ).

this is faulty in your code:

alert(pageRequest.readyState);
is in the wrong place:
it's outside the readystatechange function:

pageRequest.onreadystatechange = function() {
var object = document.getElementyById(objectID);
if(pageRequest.readyState==4){
object.innerHTML = pageRequest.responseText;
}
}
alert(pageRequest.readyState);

should be

pageRequest.onreadystatechange = function() {
var object = document.getElementyById(objectID);
if(pageRequest.readyState==4){
object.innerHTML = pageRequest.responseText;
}
alert(pageRequest.readyState);
}