Ajax "onreadystatechange" problem with Safari & Chrome

[PaliGap]

The background to this is that I have two server-side scripts:

* upload.cgi: accepts a file upload
* monitor.cgi: reports the size of the file upload as the file upload progresses.

There is a form handler: onSubmit="doProgress();" for the upload form that points to upload.cgi. This does the asynchronous thing with monitor.cgi as the file uploads, and prints out the response from monitor.cgi. This is the javascript:

var req=null;
var url='/cgi-bin/monitor.cgi';
var HTTPMethod='GET';

function doProgress() {
    window.setTimeout( sendRequest, 100 );
        return true;
}

function sendRequest() {
       if(req==null) { req=initialiseXMLHTTPRequest(); }
    req.open(HTTPMethod,url,true);
       req.setRequestHeader('content-type', 'text/plain');
    req.onreadystatechange = listener;
    req.send(null);
}

function initialiseXMLHTTPRequest() {
        var xRequest=null;
       try { xRequest = new XMLHttpRequest(); }
    catch (e) {
        try { xRequest = new ActiveXObject('MSXML2.XMLHTTP'); }
        catch (e) {
            try { xRequest = new ActiveXObject('Microsoft.XMLHTTP'); }
            catch (e) {
                // Failure!!
            }
        }
       }
    return xRequest;       
}

var listener =function() {
    if (req.readyState == 4 && req.status == 200) {
        _toConsole(req.responseText);
    }
}

function _toConsole(data) {
    if(document.getElementById('console')) {
              var console=document.getElementById('console');
        var newline=document.createElement('div');
              console.appendChild(newline);
              var txt=document.createTextNode(data);
              newline.appendChild(txt);
              window.setTimeout( sendRequest, 1000 );
    }
       else { alert('console not defined'); }
}

This work perfectly with Firefox, IE8 and Opera. As the file upload progresses, we get the response from the monitor script.

But the listener function never works for Chrome or Safari. I can't understand why not! I've even tried accepting ANY readyState (not just "req.readyState == 4 && req.status == 200"), but still nothing gets passed to the _toConsole function.

I did read somewhere that there was a problem with onsubmit form handlers with Safari. But if I replace the sendRequest function with a simple "hello world" output, it works just fine in Safari & Chrome. (i.e. you see the line printed out every few seconds as the upload progresses). So I don't think it's that.

[fxm]

For a typical async exchange I see 1,1,2,3,4 in IE8 and Firefox.
I don't know whether it has anything to do with your situation but in both Chrome and Safari(pc) the same exchange generates only 1,2,4.

[PaliGap]

For a typical async exchange I see 1,1,2,3,4 in IE8 and Firefox.
I don't know whether it has anything to do with your situation but in both Chrome and Safari(pc) the same exchange generates only 1,2,4.

You mean as readyState values?

But that would be OK (though puzzling!). As long as I get 4 and I can test for status, then ... no worries!

But I get nothing at all from Google Chrome & Safari. If I just try to output the readyState values I see nothing.

[fxm]

You mean as readyState values?

Yes.

If I just try to output the readyState values I see nothing.

Does onReadyStateChange work in Safari(pc) and Chrome without the setTimeout loop? That's how I did my test.

[PaliGap]

Yes.

Does onReadyStateChange work in Safari(pc) and Chrome without the setTimeout loop? That's how I did my test.

No, I've tried that now and it makes no difference.

But get this: If I change

req.open(HTTPMethod,url,true);

to

req.open(HTTPMethod,url,false);

then it then works OK in all browsers... EXCEPT Firefox!

(But you would think you would need asynchronous mode, wouldn't you?)

[fxm]

Have you tried appending a [bogus] ?-string to the url (to make each request 'unique')?

[PaliGap]

Yep - tried that!

[fxm]

I don't have time right now to do any further testing (plus, I don't have the monitor script to query) but on the face of it you can do a feature-sniff for Firefox.

Checking User-Agent (or similar) is clearly pointless.

[johnbb]

Hi there

I know this is an oldish thread, but just come across a similar problem where Firefox and Opers work one way, Safari, IE and Chrome work another, and it might relate to your problem...

If you do a simple loop with a timer and an alert so the alert box should pop up every 3 seconds, Firefox and Opera run asynchronously and will pop up the alert 3 seconds after opening the last alert, while the others open the new alert 3 seconds after closing the last one.

This means in your case, if the req.open does not come back with a response, some browsers will just sit doing nothing while others will trigger another requst. I am having the same problem, but using jquery; the page being called may never respond, but I want to keep trying. I have not yet found an answer, so if you have fixed this one, please let us know.

Regards
John

[bbman]

Hey,
I had a similar problem and ended up using req.open(HTTPMethod,url,false);
and I found a fix Firefox so that it works. Instead of using onreadystatechange,
use onload.

function isFirefox() {
	// determines weather or not if firefox is used;
	return (navigator.userAgent != null && navigator.userAgent.indexOf("Firefox") != -1);
}

function firefoxVersion() {
	// say firefox version is 3.5.2, it returns 3 .. so only the major version number is returned
	var indx = navigator.userAgent.indexOf("Firefox");
	var version = -1;
	if(indx != -1) {
		var goodStuff = navigator.userAgent.substr(indx).split(' ',1);
		var seperated = goodStuff[0].split('/',2);
		version = seperated[1].split('.',1);
	}
	return parseInt(version);
}	

function sendRequest(method, url) {
		if(method == 'get' || method == 'GET'){
			req.open(method,url,false);
			if (isFirefox() && firefoxVersion() >= 3) {
			    req.onload = handleResponse;
			} else {
			    req.onreadystatechange = handleResponse;
			}
			req.send(null);
		}
}

[fxm]

on the face of it you can do a feature-sniff for Firefox.

This turns out to be more necessary than I realized.

Consider this snippet

var URI = './foo/bar.txt'
var req = createRequestObject();

if (req) {
	req.onreadystatechange = function() { handleResponse(req); };

	req.open("HEAD", URI, false);  // wait for completion
	req.send(null);

        alert(req.readyState)

...

}

In other 'common' browsers [Chrome, Opera, Safari(PC), IE] the alert displays "1" and some time later handleResponse() is invoked with a value of "4" [as expected].

However, in Firefox 3.6.13 [with Firebug 1.6.0 installed, whether active on the page or not], the alert displays "4" (not in itself a problem) but then handleResponse() is never invoked (presumably because onreadystatechange is never triggered) - which does create a problem.

The only work-around I've found is to put Firefox-specific logic at the point where the alert() appears above [to cause processing usually done automagically in handleResponse() to be executed].