progress bar animation (processing.gif) in sync and async mode

[jayapalchandran]

Hi,

I use both sync and async modes.
Before starting any ajax request i display a processing(rotating) gif icon to show that the request is in progress.
when i get the response i will hide the animating gif to show that the process has completed.
this works fine with async and sync mode of ajax in FF but not in IE.

If i use sync mode. that is AJAX.open('GET','path.php',false); in IE the gif file is not visible
because IE is not displaying it. Basically this is also correct because that is the way sync is meant to.
If it is sync mode then no other process will take place until the browser gets the response.
Were as in async mode the request is threaded so other processes are not affected.

But FF displays the animated gif for both the modes of ajax. and IE displays the animated gif only for async request.
If anybody know the reason behind then please post your replies. 'cause i have simplified most of my projects by using sync mode of ajax.
But in IE the progress (processing) animation is not visible so the user will not know what is happening till the browser gets the response.

So, i hope that i have to stick with async mode. in sync mode you can write code in a few lines and it is very easy to have various type of functions which could return bool, array, object etc... since you get the result in the LHS... but that is not the case in async mode... we need to do a lot of gimmick to have a prototype of ajax...

also if i could have references to sites which explains ajax in complete detail then i will update my idea of ajax.

[Gjslick]

It is generally best for the user to experience an ajax site with asychronous calls. You can really do a lot more with them, and you can also run more than one at a time. They are a bit more complicated to work with, but not that much more complicated. All you need is a callback function which runs your LHS set and other such code, rather than just doing it directly.

By using one of the popular javascript frameworks, the process can end up being very simple. Look into using something like jquery, yui or ExtJs (using the free core library of ExtJs), or something that simplifies asynchronous ajax calls. For example, this is how to make an asynchronous request in ExtJs:

Ext.Ajax.request( {
url: 'path.php',

success: function( response ) {
alert( 'Successful call made to path.php. Can process response now.' );
},
failure: function() {
alert( 'Unsuccessful call made to path.php' );
}
} );
In that code, you would put up your spinner image before the request is made, and hide it after the request has either succeeded or failed.

However if you want to stick with your synchronous calls, one way to possibly get a spinner to come up in IE might be to run your synchronous call (and the processing code that it needs) in a setTimeout, after you have put the spinner image up. This would be to try to have internet explorer actually show the image and update the document before running the ajax call in its own thread.

Ex:
mySpinnerImg.style.visibility = "visible"; // Show the spinner

setTimeout( function() {
var result = AJAX.open('GET','path.php',false); // Run sync call

// process result here

mySpinnerImg.style.visibility = "hidden"; // Hide the spinner when done processing
}, 10 );
Kinda hacky, but might be the way to get internet explorer to play nice.

Let me know if that helps. I really recommend using one of the frameworks though. They've taken care of all of the underlying details of asynchronous requests so that we don't have to.

[jayapalchandran]

Hi,
Thank you for the detailed reply.
I will try this.
I have been with async for a long time and recently i was using sync untill i tested in IE every thing was fine. And then after posting to various forums i decided to use async but the what to do with the LHS i thought.

Yes there are frameworks but i want to improve my analytics by finding a feasible way to do whatever i think. I want the just 4 lines and the result can be in LHS but now since i am again going to use async then i have to use a callback...

For most of my requests i just call a function jRequest with path and post data as parameters without using callback... now i have to call the callback like
eval('callback(argument list)') ... so that both the functions can recide in a seperate script and i can just call it... even i can send the callback as the third parameter like jRequest('path','postdata','callbackfuncname'); so that my callback function name can be anything...

Let me see... anyway thank you for your reply.

[Gjslick]

Hi,
Yes there are frameworks but i want to improve my analytics by finding a feasible way to do whatever i think. I want the just 4 lines and the result can be in LHS but now since i am again going to use async then i have to use a callback...

Yeah, I understand wanting to be able to do the ajax call yourself. I used to do the same thing actually, but really what it comes down to is that the implementation for ajax calls is just way more complex than it really needs to be, so we end up wrapping the implementation in a reusable class (or function, as it seems you have done), and then forgetting about it.

So at that point, there's really not much of a difference than from using one of the framework's ajax implementations, which has been tried and tested by many developers over the years, and which you can pretty much rely on to work on a range of browsers.

Learning is definitely always a good thing though, but for quickness of development, and deploying to a production site, you might want to stick with a framework's implementation.


For most of my requests i just call a function jRequest with path and post data as parameters without using callback... now i have to call the callback like
eval('callback(argument list)') ... so that both the functions can recide in a seperate script and i can just call it... even i can send the callback as the third parameter like jRequest('path','postdata','callbackfuncname'); so that my callback function name can be anything...
Actually, you want to try to never use the eval function if possible. It's considered an "evil" function (for many reasons, which I won't go in to), and in my 10 years of development, I've never had to use it.

Really the best way to provide a callback to a function is not by sending its name and then eval'ing it, but by sending a direct reference to it instead. Here's a quick example:
function doCall( path, data, callbackFn ) {
// do ajax processing here, and create a variable with the response

if( callbackFn && typeof( callbackFn ) == 'function' ) {
// Run the callback function, providing it the response
callbackFn( response );
}
}


// ---------------------------------------
// Example call:

function handleResponse( response ) {
alert( "Ajax call complete, processing response now..." );
}

doCall( 'path.php', 'param1=1', handleResponse );
Notice how there are no parenthesis on handleResponse when providing it to the doCall function on the last line. If there were, then handleResponse would just be called immediately, instead of having its reference passed to the doCall function.

If you were to just send the functions name, and then eval() it, you will be always be limiting yourself to using a global function as a callback, rather than having the flexibility of possibly providing a method of an object as a callback.



Anyway, hope that gives you a bit of insight. And post again if you have any other questions.

-Greg

[jayapalchandran]

Hi,
As you have stated when it is about development time then best is to use framework.

my callbacks are like the following... just for your info...

function some()
{
var jax = createAjax();
jax.open('method', 'path.php?qs');
jax.send(null);
jax.onreadystatechange = function() { if(jax.readyState==4)jaxResponse(jax); }
}

function jaxResponse(jax)
{
if(jax.responseText.indexOf('okstatus')+1)
// success
else // unable to process request... (probably a db error in my case)
}

or

jax.onreadystatechange = function() { if(jax.readyState==4) {

// do the process
}}

----

where i need sync is... consider a newsletter subscription...

send a request to check whether email already exists
if email already exists and if the person has forgotten to activate
display a confirm alert in the next line whether to resend activation
and if the person agress then again make a request and display the response...


var res = jRequestBool('GET','action=emailexists&email=e@e.com',false); // returns true or false
if(res)
if(confirm('want to send reactivate?'))
res = jRequestBool('GET','action=subscribe&email=e@e.com',false);
if(res)alert("successfully registered")
else alert('Unable to process your request. please try again later')


for the above i use sync in simple steps line by line just like c programs...
where as in async... it is squiggly...

so... considering the time i should go for a framework...

finally, nice snippet and i haven't tried that way of calling the callback like in the docall... i will include that into my KB.

So, an async call is a seperate thread and a sync call executes in the current process like other normal functions...

Will w3c introduce threads... then it could beyond the scope...
and atlast we got the ajax file upload with progress bar in FF 3.6 but not yet in other browsers and untill the upgrade of IE we are still 10 years back...

anyway...

Thank you again for your sincere post.

[jayapalchandran]

the reason for using resposnestring.indexOf('ok') is because some times if we have extra new line characters or spaces in the php script and if you echo 'ok' an if you want to check resposnetext==''ok" the result might be different because of extra whitespace chacters ...

additionally before echoing a ack response text in server i do ob_clean() followed by the echo...

can i have suggestions?

[Gjslick]

Will w3c introduce threads... then it could beyond the scope...
and atlast we got the ajax file upload with progress bar in FF 3.6 but not yet in other browsers and untill the upgrade of IE we are still 10 years back...
Actually, we do kind-of have threads right now. Any time you use a setTimeout() or a setInterval() call, the function/code that you provide gets executed in its own thread. Unfortunately, there are no advanced thread management features in JavaScript at this point, like sleeping a thread, or joining two threads together.


So, an async call is a seperate thread and a sync call executes in the current process like other normal functions...
Yes, that is correct. A sync call always makes the current thread of processing wait for the response before anything else can be done (which in your case, it pauses the main JavaScript thread until the ajax request completes).

But I completely understand with your synchronous code example. It is much easier to write those 5 lines than having to go into two levels of callbacks and such. However, if you take a more object oriented approach, it could still end up being relatively simple, but it would require a bit more code.


the reason for using resposnestring.indexOf('ok') is because some times if we have extra new line characters or spaces in the php script and if you echo 'ok' an if you want to check resposnetext==''ok" the result might be different because of extra whitespace chacters ...

additionally before echoing a ack response text in server i do ob_clean() followed by the echo...
Hmm, in theory, if your php page has only php code in it (everything is within <?php and ?> tags), and you just echo an 'ok', then that should be the only response text that is returned to the client browser. Running ob_clean() right before your echo will help though if you have any includes that may have extraneous whitespace in them before your echo. But make sure that you don't have any whitespace or return characters before the start <?php tag, and after the end php ?> tag.

Unfortunately though, I'm not an expert in php (I'm mainly a ColdFusion developer), so try asking that question on the php forum if you're still having trouble.

-Greg

[24verglijk]

Hi sir,
i hope you are satisfy my answer

Webthumb is a small project of mine that takes a snapshot of a website and gives you thumbnails in 4 different sizes. Currently the site is rather boring and has a couple of usability problems especially on the pickup page. Over the next couple of days I'll be using various AJAX techniques to upgrade Webthumb, writing about the process as things happen.
When looking at a adding AJAX you have a couple decisions you'll want to make up front. One is what tools your going to use. In the webthumb case thats pretty easy. Webthumb is a simple PHP app and doesn't use a framework, so I need a nice general PHP/AJAX framework that is easy to use, HTML_AJAX fits that need. I may also need so animations or other effects, since im not planning on doing anything really fancy i'll use the extremly small but powerful moo.fx. I'll also keep scriptaculous in mind if I end up needing something fancier, but I think its overkill for this project.

Thank you. :cool: