Maximum amount of simultaneous xhr requests?

Question

I am making a small web app that allows the user to drag a slider to show different content. Each time the slider is moved, the client uses the HTML5 Geolocation to get its position and then sends a XMLHttpRequest to the server for new content.

The problem is if the user moves the slider a bit too many times and too fast, it causes errors.

code:

function update(){ var xhr = new XMLHttpRequest(); var url = "request_handler.php"; xhr.open("POST", url, true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { var return_data = xhr.responseText; //doing stuff } } // since HTML5 Geolocation is a asynchronous function, and i have to make // sure that i get the users clients position before i send the request, i // pass the sendRequest function below as a callback function to the // Geolocation function function sendRequest(latitude,longitude) { try{ xhr.send("latitude=" + latitude + "&longitude=" + longitude); console.log("Success") } catch(err){ console.log("Error message: %s",err); } } //This function gets user position and then calls sendRequest if it was //Successfull Geoposition.updatePosition(sendRequest); } //EDIT: var Geolocation = { sendRequestFunction: null, options: { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }, success: function(pos) { if (sendRequestFunction) { sendRequestFunction(pos.coords.latitude, pos.coords.longitude); }; }, error: function(err) { console.warn('ERROR(' + err.code + '): ' + err.message); }, updatePosition: function(callbackFunction) { sendRequestFunction = callbackFunction; navigator.geolocation.getCurrentPosition(Geolocation.success, Geolocation.error, Geolocation.options); }, };

So as you can see i have a try-catch around the send request function. These are the error messages i get in ff and chrome when i move the Slider to many times fast.

Firefox: "Error message: [Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://localhost/***/myscript.js :: sendRequest :: line 29" data: no]"
Chrome: "Error message: DOMException: Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED."

I am trying this on a Wampserver2 (it uses an Apache server).

So my question is really: Whats wrong? I read somewhere that browsers only allow a certain amount of xhr request simultaneously (around 6-7 if a remember correct). Although i can get this error if i drag the slider only 3-4 times rapidly, could this be the porblem anyway? Is there better approaches to this?

EDIT: Added the updatePosition() function. It is in the namespace that i call Geoposition.

EDIT 2: If you are here because of the title, this problem had nothing to do with any "maximum amount of simultaneous xhr request" that i suspected.

Show us your updatePosition function. It sounds as if it doesn't call its callback correctly (e.g. multiple times), which means the send method is called on an xhr object in the wrong state (as chrome says). — Bergi
– Bergi, Commented Jan 31, 2015 at 14:54
Yes, there's your mistake. It will call the same sendRequestFunction multiple times if updatePosition was invoked in quick succession. — Bergi
– Bergi, Commented Jan 31, 2015 at 16:04

Bergi · Accepted Answer · 2015-01-31 16:12:20Z

Apart sendRequestFunction being an implicit global and not your local GeoLocation property, you must not use a free variable in the asynchronous updatePosition method. Subsequent calls will overwrite the previous value, and when later your getCurrentPosition callbacks are invoked then each of them will call the same sendRequestFunction. Which is fatal to your xhr object, as it does not like to be sent multiple times (that's just what the error messages say, the request is in a state where send() is invalid).

var Geolocation = { options: { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }, error: function(err) { console.warn('ERROR(' + err.code + '): ' + err.message); }, updatePosition: function(callbackFunction) { navigator.geolocation.getCurrentPosition(function(pos) { if (typeof callbackFunction == "function") { callbackFunction(pos.coords.latitude, pos.coords.longitude); } }, Geolocation.error, Geolocation.options); } };

Also you may want to consider throttling your geolocalisation and ajax calls.

wow, you're an angel! thanks, everything works fine. will look into throttling.

Collectives™ on Stack Overflow

Maximum amount of simultaneous xhr requests?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related