File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Simple Ajax example doesn't work Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Simple Ajax example doesn Watch "Simple Ajax example doesn New topic
Author

Simple Ajax example doesn't work

Mike London
Ranch Hand

Joined: Jul 12, 2002
Posts: 1075
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Jul 08, 2003
Posts: 24187
    
  34

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!


[Jess in Action][AskingGoodQuestions]
Mike London
Ranch Hand

Joined: Jul 12, 2002
Posts: 1075
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
read my article here: http://www.javaranch.com/journal/200601/Journal200601.jsp#a2

Eric
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
The caching part is also talked about here: http://www.manning-sandbox.com/thread.jspa?messageID=49835

Eric
Mike London
Ranch Hand

Joined: Jul 12, 2002
Posts: 1075
Thanks Eric,

I look forward to reading this!

-- M
Ian Timothy
Greenhorn

Joined: Mar 28, 2006
Posts: 2
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Mar 28, 2006
Posts: 2
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Jan 27, 2004
Posts: 71
Your code:








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

--Nimchi
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Simple Ajax example doesn't work