Alternatives to synchronous XMLHttpRequest for Javascript (like time in Safari)
Short version: Looking for a method to wait for an Asynch XHR request or a way to get Synch XHR to work in Safari.
Longer version: I am working on a web service that uses various external data sources. I am using Javacript front-end which makes AJAX / XHR calls to my PHP server code. No cross-site issue as the client only requests data from my server (the server makes external data requests).
I am using a synchronous XHR request, as I have some post-load processing (sorting, filtering, etc.) to make the data before it is presented on the screen.
It all works fine in IE, FF and Opera, but it seems to be a problem for Safari (I haven't tried Chrome yet).
Using Firebug for Safari on my Windows machine, I see the server call beng and then it fails after over 10 seconds. On my iPad, the message is a little faint, as it says: NETWORK_ERR: XMLHttpRequest Exception 101: A network error occurred synchronously.
A bit of research shows that Safari will time out after 10 seconds in sync mode. There seems to be a timeout function, a timeout function that you can use to extend it (with a maximum limit for Safari of 60 seconds). Unfortunately I cannot get this to work.
Now I'm wondering what people would suggest as the best way to get around this through changes to the Javacript client code.
Two options I'm thinking of: (i) find a working example of an XHR sync timeout that the Safari browsers will do; or (ii) have some kind of wrapper around the asynchronous XHR call so that post-load processing waits for the load first.
I am not a seasoned Javascript hacker, but I have set a fair amount on this project. I haven't used JQuery or any other frameworks and would prefer to keep the original JS to avoid having to learn additional syntax. [You can see from my previous posts that I have tried using JQM and Spry in the past, but both turned out to be wrong choices, at least at this stage and have since been dropped for now].
It seems to me that the callback might be the correct wait-for-asych option, but I'm not sure how it works or how you code it.
It's just a prototype at this stage, so dirty hacks are acceptable. Complete rewriting already on cards for later use when I proved my functionality.
Appreciate people's thoughts and advice on this matter.
Regards, Pete.
source to share
Generally, you will want to stick with asynchronous requests as they are not blocking. And with these, you'll want to use a callback - or, simply, a function that needs to be configured later.
You can set a callback with a onreadystatechange
property XMLHttpRequest
:
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) { // DONE
if (xhr.status === 200) { // OK
handleSuccess(xhr);
} else {
handleError(xhr);
}
}
};
As the name of the property suggests, it will be called as a change value readyState
, where value 4
means the request completed (successfully or not).
Then you will handle sorting, filtering, etc. within another function - in this example handleSuccess
.
You can also use any of several existing libraries - for example jQuery (1.6 or newer for this snippet)
$.get('/web/service/request')
.done(function (result) {
// sorting, filtering, etc
})
.fail(function (xhr) {
// error notification, etc.
});
source to share