Forum:

HTML Pages with CSS and JavaScript

Simple Ajax example doesn't work

Bartender

Posts: 1971

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Posts: 15385

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Posts: 24207

I like...

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Bartender

Posts: 1971

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Posts: 15385

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

read my article here: http://www.javaranch.com/journal/200601/Journal200601.jsp#a2

Eric

Eric Pascarello

author

Posts: 15385

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

The caching part is also talked about here: http://www.manning-sandbox.com/thread.jspa?messageID=49835

Eric

Mike London

Bartender

Posts: 1971

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks Eric,

I look forward to reading this!

-- M

Ian Timothy

Greenhorn

Posts: 2

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Posts: 15385

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Posts: 15385

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Your code:

function test() { var xmldoc = new XMLHttpRequest(); if (xmldoc) {alert("Hi!");} xmldoc.onreadystatechange = stateChange; xmldoc.open("GET",url,true); xmldoc.send(null); }

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

--Nimchi

Don't get me started about those stupid light bulbs.