AJAX Style processing icon

[shankwheat]

I'm experimenting with using a AJAX style "processing" icon. The
process I'm running in the background with xmlHttp is intensive and
takes a 5--10 secs to complete. Instead of my processing icon
appearing in the page, the page just freezes during the process until
it's finished. Is this the best way to display this kind of icon?
What can I do so this works right? Thanks

function stateChanged()
{
if (xmlHttp.readyState == 0)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //loading
}
else if(xmlHttp.readyState == 1)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //loaded
}
else if(xmlHttp.readyState == 2)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //interactive
}
else if(xmlHttp.readyState == 3)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>";
}
else if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("lblResults").innerHTML = "";


<span id="lblResults" name="lblResults"></span>

 

[Jason]

I'm experimenting with using a AJAX style "processing" icon. The
process I'm running in the background with xmlHttp is intensive and
takes a 5--10 secs to complete. Instead of my processing icon
appearing in the page, the page just freezes during the process until
it's finished. Is this the best way to display this kind of icon?
What can I do so this works right? Thanks

function stateChanged()
{
if (xmlHttp.readyState == 0)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //loading
}
else if(xmlHttp.readyState == 1)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //loaded
}
else if(xmlHttp.readyState == 2)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //interactive
}
else if(xmlHttp.readyState == 3)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>";
}
else if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("lblResults").innerHTML = "";

<span id="lblResults" name="lblResults"></span>

Can you post the code where you are opening and sending the
XmlHTTPRequest?

 

[shankwheat]

Can you post the code where you are opening and sending the
XmlHTTPRequest?- Hide quoted text -

- Show quoted text -

This is what I'm using. Thanks

function getIndustries()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Your browser does not support the XMLHttpRequest object.")
return
}


var url="getIndustries.aspx"
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged()
{
if (xmlHttp.readyState == 0)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //loading
}
else if(xmlHttp.readyState == 1)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //loaded
}
else if(xmlHttp.readyState == 2)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //interactive
}
else if(xmlHttp.readyState == 3)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>";
}
else if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("lblResults").innerHTML = "";

// Clear the available listbox of any previous options
document.choiceForm.available.length = 0;

// Split the delimited response into an array
results = xmlHttp.responseText.split(",");

for (var i=0; i < results.length;++i){
addOption(document.choiceForm.available, results, results);
}
}
}

function addOption(selectbox,text,value )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}

 

[Jason]

Can you post the code where you are opening and sending the
XmlHTTPRequest?- Hide quoted text -

- Show quoted text -

This is what I'm using. Thanks

function getIndustries()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Your browser does not support the XMLHttpRequest object.")
return

}

var url="getIndustries.aspx"
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)

}

function stateChanged()
{
if (xmlHttp.readyState == 0)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //loading
}
else if(xmlHttp.readyState == 1)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //loaded
}
else if(xmlHttp.readyState == 2)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //interactive
}
else if(xmlHttp.readyState == 3)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>";
}
else if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("lblResults").innerHTML = "";

// Clear the available listbox of any previous options
document.choiceForm.available.length = 0;

// Split the delimited response into an array
results = xmlHttp.responseText.split(",");

for (var i=0; i < results.length;++i){
addOption(document.choiceForm.available, results, results);

}
}
}

function addOption(selectbox,text,value )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);

}

Just an observation, why don't you set the innerHTML of lblResults
right after you send the request and then just check for readyState ==
4.

var url="getIndustries.aspx"
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //loading
}

function stateChanged()
{
if(xmlHttp.readyState == 4) {
//do stuff
}
}

It will make less work for the browser.

 

[shankwheat]

This is what I'm using. Thanks

function getIndustries()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Your browser does not support the XMLHttpRequest object.")
return

var url="getIndustries.aspx"
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)

function stateChanged()
{
if (xmlHttp.readyState == 0)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //loading
}
else if(xmlHttp.readyState == 1)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //loaded
}
else if(xmlHttp.readyState == 2)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //interactive
}
else if(xmlHttp.readyState == 3)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>";
}
else if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("lblResults").innerHTML = "";

// Clear the available listbox of any previous options
document.choiceForm.available.length = 0;

// Split the delimited response into an array
results = xmlHttp.responseText.split(",");

for (var i=0; i < results.length;++i){
addOption(document.choiceForm.available, results, results);

}
}
}

function addOption(selectbox,text,value )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);

}

Just an observation, why don't you set the innerHTML of lblResults
right after you send the request and then just check for readyState ==
4.

var url="getIndustries.aspx"
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //loading

}

function stateChanged()
{
if(xmlHttp.readyState == 4) {
//do stuff
}

}

It will make less work for the browser.- Hide quoted text -

- Show quoted text -

Yes, that makes sense. I implemented your suggestion and it does
load a litle faster but didn't solve the problem with the icon not
appearing. I'm passing quite a bit of data back to the page and it
just freezes until it's done which is all the more reason I need some
cue to the user of what's going on

Thanks

 

[-Lost]

I'm experimenting with using a AJAX style "processing" icon. The
process I'm running in the background with xmlHttp is intensive and
takes a 5--10 secs to complete. Instead of my processing icon
appearing in the page, the page just freezes during the process until
it's finished. Is this the best way to display this kind of icon?
What can I do so this works right? Thanks

This has *NOTHING* to do with all the code you have posted. In fact, every single reply
to this thread (aside from mine) is pointless.

At the moment you being your request, make your IMG or DIV, or whatever appear.

When the request returns (as in, is loaded) then make the image disappear. End of story.

-Lost

 

[evanburen]

This has *NOTHING* to do with all the code you have posted. In fact, every single reply
to this thread (aside from mine) is pointless.

At the moment you being your request, make your IMG or DIV, or whatever appear.

When the request returns (as in, is loaded) then make the image disappear. End of story.

-Lost

Yea, well, -"Lost", it doesn't work. Thanks for the pointless
suggestion.

 

[-Lost]

Yea, well, -"Lost", it doesn't work. Thanks for the pointless
suggestion.

Just because *you* are incapable of getting it to work does not mean it is impossible.

Thanks for your pointless reply though.

By the way, I have a perfectly working example (in fact, a couple). So, again, *YOU* are
doing something wrong.

I am sorry to hear that you take such offense to valid suggestions though. Next time I'll
just ignore you.

-Lost

 

[VK]

if (xmlHttp.readyState == 0)
{
document.getElementById("lblResults").innerHTML = "<img
src='mozilla_blu.gif' alt='loading..please wait'>"; //loading
}
else if(xmlHttp.readyState == 1)

<snip>

In your coding your are assuming that the state changes are going by
the book, "slow and proudly": 0-1-2-3-4

That is hardly ever true for ajaxoids. First of all 0 state is never
to expect: if you could instantiate your ajaxoid then its state is
already 1; if you couldn't then you would get a failure return on the
previous step. The stages 1-2-3 overall a complete bogus, they were
inherited from the original IXMLHTPRequest interface but they serve no
practical purpose.
First of all they are passing so quickly that no DOM interface will
bother to show them (internal delay is too short).
Secondly they rarely go in the numeral order 1-2-3. The most often one
or two of them simply disregarded so never fired.
Thirdly the intermediary states' change is screwed on Gecko. Don't
have bug # right now, so either trust me or don't.
-------------

0-1-2-3 states is a useless "Cargo Cult" add-on remained from the AJAX
early childhood - producers still keeping it because it's documented.
In the programming the only two stages you are dealing with are:
1) success / failure to instantiate your ajaxoid
2) success / failure to arrive to the state 4 (complete)

There is a number of pitfalls on the go. The first one is the graphics
context update delay, see
http://groups.google.com/group/comp.lang.javascript/msg/b1470812c5e4d3b5

Another one is that Gecko reports state 4 in case of network error as
well, but in this case any attempt to access ajaxoid properties leads
to run-time error. By "network error" I don't mean "Server not
responding" and so, but lower level protocol errors.

Overall while the principles of ajaxoid programming are very simple,
the amount of details to take into account is usually exceeding the
provided programmer's knowledge and experience. This is why I
regularly suggest to not take the risk of re-inventing the wheel but
take a time proved library like http://www.ajaxtoolbox.com

 

[-Lost]

Overall while the principles of ajaxoid programming are very simple,
the amount of details to take into account is usually exceeding the
provided programmer's knowledge and experience. This is why I
regularly suggest to not take the risk of re-inventing the wheel but
take a time proved library like http://www.ajaxtoolbox.com

So JavaScripters should just rely on an existing library instead of learning the proper
way in which to do something?

-Lost

 

[VK]

JavaScripters should just rely on an existing library instead of learning the proper
way in which to do something?

AjaxRequest is well documented, so one is welcome to study what, how
and why is being made:
http://www.ajaxtoolbox.com/request/source.php

About the "learning curb":

Everything has its time and its place. Some people prefer the
practical learning, so they take a rather complicated task and hit the
wall until it's working - by obtaining the necessary knowledge on the
go from available sources. If OP decided to learn JavaScript over
making a well working ajaxoid then it's fully OK. If OP needs a
working interface right now for a live project then the "learning
curb" may take several months with all oops reported by frustrated
customers and not by an in-house QA. That can become a way too
expensive learning experience.

1) run-time error on reading XHR property after network errors
(despite status=400)
2) send null or "" for GET sensibility for some UA versions
3) GET request length limit on different IE versions
4) multiple async requests caveats which would be a separate nested
list right here

How much time does it take to simply _arrive_ to these questions out
of foggy error reports from your customers?

In this respect AjaxRequest is not really a "library" like say
prototype.js
It is merely a sophisticated interface over all kind of bugs, under-
implementations and limitations of different IXMLHTTPRequest/
XmlHttpRequest implementations.