Win a copy of Design for the Mind this week in the Design forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Simple Ajax example doesn't work

 
Mike London
Ranch Hand
Posts: 1190
4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

From the book: "Foundations of Ajax", page 33, I copied some of the freely-available code into a JSP page, but it didn't output anything.

The code is below.

Clicking the button, does call the createXMLHttpRequest() method (which for me in FireFox calls the correct object to instantiate), but in the function handleStateChange() the xmlHttp object has value=0 (zero) for both xmlHttp.readyState and for xmlHttp.status.

Any ideas would be greatly appreciated!

-- Mike

================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'index.jsp' starting page</title>

<script type="text/javascript">

var xmlHttp;

function createXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}

function startRequest()
{
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange();
xmlHttp.open ("GET", "simpleResponse.xml", true);
xmlHttp.send(null);
}

function handleStateChange()
{
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
alert ("The Server replied with: " + xmlHttp.responseText);
}
}
}
</script>

</head>

<body>
<FORM action="#">
<input type="button" value="Start Basic Async Request"
on_Click="startRequest();"/>

</FORM>
</P>
</body>
</html>
[ March 28, 2006: Message edited by: Bear Bibeault ]
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If you test the XMLHttpRequest object from the local disk the readystate value is returned 0 since it is using file protocal rather than an http protocal.

Eric
 
Ernest Friedman-Hill
author and iconoclast
Marshal
Pie
Posts: 24208
35
Chrome Eclipse IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Also I believe there's one important line that's been copied incorrectly:

xmlHttp.onreadystatechange = handleStateChange();

should be

xmlHttp.onreadystatechange = handleStateChange;

You're assigning the function to a property, not assigning the result of calling the handler function to the property. Big difference!
 
Mike London
Ranch Hand
Posts: 1190
4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Earnest,

Thanks ... good catch. That still didn't fix it though.

I don't see where the author made the point that the code snippet wouldn't work. It seems as though he expected it to work, but for the reason mentioned above, I guess it wouldn't.

Perhaps I need an even more basic tutorial. <g>

Thanks very much.

-- M
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
read my article here: http://www.javaranch.com/journal/200601/Journal200601.jsp#a2

Eric
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The caching part is also talked about here: http://www.manning-sandbox.com/thread.jspa?messageID=49835

Eric
 
Mike London
Ranch Hand
Posts: 1190
4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks Eric,

I look forward to reading this!

-- M
 
Ian Timothy
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hello .. I read the articles linked here and a lot of stuff, but I cant seem to get AJAX to work for me. I am testing my webpage using a local server and RubyonRails. The browser I am using is firefox.

This is my code for the AJAX part:

function test() {

var xmldoc = new XMLHttpRequest();

if (xmldoc) {alert("Hi!");}

xmldoc.onreadystatechange = stateChange;
xmldoc.open("GET",url,true);
xmldoc.send(null);


}

function stateChange() {

if (xmldoc) {alert("Hi!");}

if (xmldoc.readyState == 4) {
if (xmldoc.status == 200 || xmldoc.status == 0) {
alert(xmldoc.responseText);
}
}
}

I put the two alerts there to help me see what is wrong. The first alert goes off, but the second one doesnt. I had initially declared the url variable earlier and assigned something to it.

Really not sure what is going on. At my wit's end.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
var xmldoc = new XMLHttpRequest();

Is not a cross browser way of making a request.

Are you getting an error message? Have you tried it in other browsers?

Eric
 
Ian Timothy
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hello.

I am only trying it in firefox. I understand that is the syntax for doing it in firefox. I tried the syntax for IE and tested the page in IE. No success too.

I was wondering if there is anything I need to initialise or any settings to set. My Javascript is set to enabled.

Hmmm..Really very vex.

Thanks for your quick replies.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
It is rather simple and it lies in the fact you are messing up JavaScripts local and global variable declaration.

In this line:
var xmldoc = new XMLHttpRequest();

you are making xmldoc local to the function test so your statechange function will not be able to access it. You need to declare var xmldoc; outside your function and not include the var inside the function.

I am sure if you would look at the JavaScript debugger that holds the JavaScript errors in Mozilla that it would tell you this.

Eric
 
Nimchi Yung
Ranch Hand
Posts: 71
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Your code:








Where is your url defined? You might also want to check with your
server to make sure the request got submitted.

--Nimchi
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic