XMLHttpRequest question

[Sean Berry]

I have an online store that a customer needs customized by having notes for
each product. I have added a javascript function that sends a session id,
unique product id and some user-defined notes to a script using
XMLHttpRequest. The values get there fine and get stored in a database.

Upon checkout (on the checkout page) I now want to pull all of the data back
from the database and display it. I don't need to display the notes in
order to get them to send, I just want to customer to see their notes so
they don't think they are lost.

So, in my checkout page I have a loop that created divs like the following
<div id="notes<number>"></div>
where <number> is an incremental number starting from 1.

Then, inside the div I have a 1x1 transparent image with an onload function
call.

This onload function call looks something like this:
onload="getNotes(<number>,<session_id>, <product_id>)
where <number> is the same incremental number from above and <session_id>
and <product_id> are values available inside my loop.

The function getNotes uses XMLHttpConnect to connect to another script and
using the session_id and product_id it retrieves the notes and should
populate the div with the notes.



My problem is this...

The getNotes function get called, then the "onreadystatechange" function
gets called but only the code outside of the check for the "readyState" and
"status" is executed.
The stuff inside of
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) { }
never gets called.

Is this because the function getNotes is getting called too quickly after
the first call? If this was the case, I would expect the last one to
work... since it would be the last call.
Is there some way to fix this? Do I need to call the onreadystatechange
function with a setTimeout so that it loops, checking the readyState and
status?

Thanks for any and all help.

Sorry if I did not explain fully.

 

[Mike P]

Sean,

You are, indeed, checking the readyState before the server has a chance to
reply. You'd probably be better off using xmlhttp.readystatechange to watch
for that reply. Here's some code that should help:

xmlhttp.onreadystatechange = function() {
if ( xmlhttp.readyState == 4 ) {
if ( xmlhttp.status == 200 ) {
doSomeMagic();
} else {
didntWorkOut();
}
}
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
alert(xmlhttp.responseText)
}
}

 

[Sean Berry]

Thanks Mike.

I actually figured out the first of my problems. I was doing the following
xmlhttp.onreadystatechange = myfunction(param1, param2, param3);

I changed that to
xmlhttp.onreadystatechange = function() {myfunction(param1, param2,
param3)};

Now it works as I expected in my first post... it only loads the last
"notes"

So, how can I ensure that the value has been received before going on to the
next one?


Thanks for any ideas...

 

[Mike P]

Now it works as I expected in my first post... it only loads the last
"notes"
So, how can I ensure that the value has been received before going on to >
the next one?

Sean,

I'm not sure I completely follow, but if you're asking how to get to param2,
param3, etc. I would assume that's more a function of what you server's
code is sending. Meaning, it depends on the structure of the XML you're
getting back, and how you're handling it. You may want to treat this as an
object (ala, param["note1"] etc.) or as an array (e.g, param[1], param[2],
etc.).

How is the server structuring the XML? How are you processing it when you
get it back?

Mike

 

[Sean Berry]

Now it works as I expected in my first post... it only loads the last
"notes"
So, how can I ensure that the value has been received before going on to

Sean,

I'm not sure I completely follow, but if you're asking how to get to
param2, param3, etc. I would assume that's more a function of what you
server's code is sending. Meaning, it depends on the structure of the XML
you're getting back, and how you're handling it. You may want to treat
this as an object (ala, param["note1"] etc.) or as an array (e.g,
param[1], param[2], etc.).

How is the server structuring the XML? How are you processing it when you
get it back?

Mike

Mike,

Thanks for the reply.

I figured out the answer to my problem... actually quite simple.
----Problem----
I have a loop that runs and for each item it creates an <img> tag that has
an oncall function. The oncall function connects to a script via
XMLHttpRequest. The problem was that the function was being called the
first time from the first image during the first run in the loop. Then the
function would be called again by the second image created during the second
loop through. So on and so on for each item. Because there was some
latency, once the second call to the function occured it would stop the
first onreadystatechange() and start trying to run it with the for the
second set of parameters. Then, if there was a third, it would stop the
second. So on and so forth. Once it called the function for the last time
(last item, so last run through the loop) it would complete and the
responseText could be used and every thing was super for the last one... all
the others never worked.

----Solution----
In my retrieveNotes() function I have something like the following:

var processing = 0;
function retrieveNotes(value) {
if (processing == 0) {
processing = 1;
create xmlhttp object
set up the connect string
set up onreadystatechange = doSomething;
do connection, etc
} else {
setTimeout("retrieveNotes('" + value + "')", 1000);
}
}

then in my onreadystatechange function

function doSomething() {
if (xmlhttp.readyState == 4 && smlhttp.status == 200) {
do stuff with responseText;
processing = 0;
}
}

So now the retrieveNotes function will either process the request if it is
done processing the request before it goes on to the next one.

If the process is not complete, a setTimeout loop is started and called
until the prior process is complete.

Thanks for the help anyway.

Sean

 

[Mike P]

----Solution----
In my retrieveNotes() function I have something like the following:

var processing = 0;
function retrieveNotes(value) {
if (processing == 0) {
processing = 1;
create xmlhttp object
set up the connect string
set up onreadystatechange = doSomething;
do connection, etc
} else {
setTimeout("retrieveNotes('" + value + "')", 1000);
}
}

then in my onreadystatechange function

function doSomething() {
if (xmlhttp.readyState == 4 && smlhttp.status == 200) {
do stuff with responseText;
processing = 0;
}
}

So now the retrieveNotes function will either process the request if it is
done processing the request before it goes on to the next one.

If the process is not complete, a setTimeout loop is started and called
until the prior process is complete.

Thanks for the help anyway.

Sean

Glad I could be of help. I do wonder, though, why you're not just
retrieving an array of notes with a single request, then looping through the
array to display each note. That would elminate the need for your
"processing" flag. Also, is it possible that your users may have more or
less than three notes?

Mike