Geek Answers Handbook

Serial Ajax requests without jQuery / JS library

I have a problem, mainly with IE.

I need to be able to handle n requests one by one. But if I just call my function below in IE loop, then it does some strange things (for example, it loads only so many calls). If I use the warning window, this proves that the function receives all the calls, and surprisingly IT WORKS!

I assume IE needs more time than other browsers, and the warning window does just that.

Here is my code:

var Ajax = function(all) { this.xhr = new XMLHTTPREQUEST(); // Function returns xhr object/ activeX this.uri = function(queries) { // Takes an object and formats query string var qs = "", i = 0, len = size(queries); for (value in queries) { qs += value + "=" + queries[value]; if (++i <= len) { qs += "&"; } } return qs; }; xhr.onreadystatechange = function() { // called when content is ready if (this.readyState === 4) { if (this.status === 200) { all.success(this.responseText, all.params); } this.abort(); } }; this.post = function() { // POST xhr.open("POST", all.where, true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send(uri(all.queries)); }; this.get = function() { // GET xhr.open("GET", all.where + "?" + uri(all.queries), true); xhr.send(); }; if (this instanceof Ajax) { return this.Ajax; } else { return new Ajax(all); } };

This function works fine for a single request, but how can I make it work when called so many times in a loop?

+4
source share
4 answers

I think the problem may be due to two concurrent connection restrictions that are implemented by most web browsers.

It seems that the latency of your web service responds to overlapping AJAX requests, which in turn exceeds the limit of 2 simultaneous connections.

You can check out these articles regarding this limitation:

This limit is also suggested in the HTTP specification: section 8.14 of the last paragraph , which is probably the main reason most browsers impose this.

To work around this problem, you can consider restarting your AJAX request ONLY after successfully responding from a previous AJAX call. This will prevent a match. Consider the following example:

 function autoUpdate () { var ajaxConnection = new Ext.data.Connection(); ajaxConnection.request({ method: 'GET', url: '/web-service/', success: function (response) { // Add your logic here for a successful AJAX response. // ... // ... // Relaunch the autoUpdate() function in 100ms. (Could be less or more) setTimeout(autoUpdate, 100); } } }

This example uses ExtJS , but you can easily use only XMLHttpRequest .

+6
source

Given that the limit for a single domain is 2 concurrent connections in most browsers, it offers no speed advantages by running more than two simultaneous requests. Run 2 queries and delete and run them every time you complete.

0
source

I suggest changing your requests so that you only have a few (4?) At any given time. You probably see the result of the queue of request queues and timeouts before your code can process them. Only slimming. We have an ajax library that has built-in throttling and query queues, so that we only have 4 outstanding at any given time and don't see any problems. We regularly q lots per page.

0
source

Your code looks like it is folded using the constructor template. Are you calling it with a new statement like var foo = new Ajax(...) in the call code? Or do you just call it right like var foo = Ajax(...) ?

If the latter, you are likely to rewrite the state on subsequent calls. It looks like it's intended to be called to create an object on which the get / post method is called. This can be your problem if you “call it in a loop” as you say.

0
source

More articles:


All Articles