[AJAX] XMLHTTPRequest Requête simultanée

**sidacoq** · 21/12/2012, 19h00

Bonjour,

J'aimerais savoir s'il est possible de limiter les requêtes simultannées XHR ?
J'ai une boucle qui lit un fichier JSON et qui envoie une requête XHR a chaque ligne (100 lignes).

Le problème est qu'il envoi 100 requêtes en même temps et que le serveur de l'autre côté ne gére pas çà (Google)

Le but est d'injecter 100 nouvelles entrées dans un calendrier Google via Google Calendar API.
Dans ce cas, XHR et le fichier JSON ne concerne pas l'API de Google.

En comparaison, Mootools gére très bien çà dans le REQUEST avec l'option LINK: CHAIN. Mais je ne peux pas l'utiliser car CORS ne gére pas les entête X-Requested-With et Mootools ne permet pas de supprimer cette entête.

Voila merci en espérant que vous pouvez m'aider.

**NoSmoking** · 22/12/2012, 08h53

Bonjour,
as tu essayé d'envoyer la requête suivante quand la précédente à aboutie?

**Bovino** · 22/12/2012, 11h28

Je pense surtout que tu as essentiellement un problème de conception...
Prévoir d'envoyer une centaine de requêtes simultanées n'est pas viable, tu devrais penser à rapatrier toutes les données en une seule fois puis faire les traitements adaptés.

**sidacoq** · 24/12/2012, 00h32

Envoyé par Bovino

Je pense surtout que tu as essentiellement un problème de conception...
Prévoir d'envoyer une centaine de requêtes simultanées n'est pas viable, tu devrais penser à rapatrier toutes les données en une seule fois puis faire les traitements adaptés.

Je pense bien mais l'api de google ne le permet pas. J'aurais bien aimer envoyé tous un JSON bien formaté...

La solution que j'ai trouvé a été d'envoyé les requêtes, les une aprés les autres avec un setTimeout d'une seconde qui s’incrémente à chaque nouvelle connection et voila ^^

Merci pour vos réponses

**sdamart** · 24/12/2012, 08h46

Salut,
Dans l'hypothèse où vos données J.S.O.N sont stockées dans un tableau, 3 Solutions sont possible
1 - vous utilisez jQuery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
index=-1
function sendRequest()
{
//Arreter le timer
clearTimeout(_timer);
// incrémenter l'index
index++
if(_request[index]!=undefined){
$.ajax({
url:[votre_url]
type:"POST",
data:_request[index],
success:function(data){
//ici votre code en cas de succes
_timer=setTimeout(function(){sendRequest();},1000);
}
})
}
}

2 - Vous n'utilisez pas jQuery et envoyer vos requêtes en mode synchrone

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function sendRequest(){
clearTimeout(_timer)
index++;
if(_request[index]!=undefined){
var xhr=new XMLHttpRequest();
xhr.open("POST",[votre url],false);
xhr.send(_request[index])
if(xhr.responseText!=undefined){
//votre code
_timer=setTimeout(function(){sendRequest();},1000);
}
}
}

3 - Vous n'utilisez jQuery et envoyer vos requête en mode asynchrone

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
function sendRequest(){
clearTimeout(_timer)
index++;
if(_request[index]!=undefined)
{
 var ajax=new XMLHttpRequest();
 ajax.open("POST",[votre url],true);
ajax.send(_request[index]);
ajax.onReadyStateChange=function(){
if(ajax.readyState==4){
if(ajax.statut!=500&&ajax.statut!=404){
//ici votre code
_timer=setTimeout(function(){sendRequest();},1000);
}
}
}
}
}

Evidemment je part du principe qu'il faille envoyer vos donnée JSON en POST, sans quoi la requête ne peut fonctionner correctement.
En résumer le principe est de stocker vos requête JSON dans un array en variable globale, créer un index global et d'utiliser un fonction itérative pour envoyer une à une chaque requête.

Bonne Chance

**sidacoq** · 24/12/2012, 16h19

waow super la réponse
Complète ...

Merci

Invité · 26/12/2012, 12h45

Bonjour,
Je m'incruste, car je ne comprends rien a ce débat

Je croyais qu'Il était impossible d'envoyer des requêtes simultanées, puisque les programmes s'exécutent ligne par ligne !
Donc la fonction AJAX (ou autre) ne peut être appelée qu’une par une.
Ors cela crée une instance, a chaque fois, comme si la fonction se dédoublait.
En cela JavaScript utilise cette méthode au même titre que le langage "C" par exemple.
Si je calcule une fractale par AJAX, ce sera 5.000.000 d'appels en quelques secondes.

Alors j'ai mal compris

Ou bien c'est l'emploi des jQuery ou autres usines à gaz qui perturbent cette logique ?
A++
Christele

**Bovino** · 26/12/2012, 13h40

Il est habituel pour la gestion des requêtes AJAX de créer une fonction créant l'objet XMLHttpRequest(), dans une version minimaliste, ce serait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function creeXHR(){
    return new XMLHttpRequest();
}

ici, le new indique bien que cette fonction retourne à chaque fois une nouvelle instance de l'objet.
A partir de là, il est possible d'envoyer plusieurs requêtes AJAX distinctes et différenciées.
Ensuite, les navigateurs limitent le nombre de requêtes HTTP concurrentes, mais c'est une autre problématique.

**sdamart** · 26/12/2012, 13h53

L’inconvénient c'est l'objet XMLHttpRequest.
Selon la version d'internet explorer, l'objet ne peut pas être instancié.

Pas de panique, Seb connait une parade à ce problème.
Il existe plusieurs solutions plus ou moins similaires.

La première la moins agile consiste a tester l'instanciation de l'objet.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var ajax={};
try{
ajax=new XMLHttpRequest();
}catch(e){
ajax=new ActiveXObject("Microsoft.XMLHTTP");
}
[...]

La seconde consiste a factoriser l'instanciation par le biai d'une fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function XMLGetInstance()
var ajax={}
{
try{
ajax=new XMLHttpRequest();
}catch(e){
ajax=new ActiveXObject("Microsoft.XMLHTTP");
}
return ajax;
}

La dernière consiste a créer un pseudo objet qui fera comme jQuery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function AJAX(p){
var url=p.url;
var type=(p.type!=undefined)?p.type:"GET";
var asynch=(p.asynch!=undefined)?p.asynch:false;
var data=(p.data!=undefined)?p.data:null;
var xhr={}
{
try{
xhr=new XMLHttpRequest();
}catch(e){
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(type,url,asynch);
xhr.send(data);
if(!asynch){
this.responseText=xhr.responseText;
}else{
xhr.onReadyStateChange=function(){
if(xhr.readyState==4){
if((xhr.statut!=505&&xhr.statut!=404){
p.success.call(xhr.responseText);
}
}
}
}
}

Pour l'appeler

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
ajax({
url:"monurl.php",
type:"POST",
data:"var1=val1&var2=val2",
success:function(data){
alert(data);
}
})

Invité · 26/12/2012, 15h26

Envoyé par sdamart

L’inconvénient c'est l'objet XMLHttpRequest.
Selon la version d'internet explorer, l'objet ne peut pas être instancié.
Etc.

Je crois rêver

avec les anciens IE, on intencié
"new ActiveXObject('Microsoft.XMLHTTP');" et donc pas besoins d'astuces pour je ne sais quelle raison.
Depuis IE7 c'est encore plus simple puisque new XMLHttpRequest();
est intégré.
A++
Christele

**sdamart** · 26/12/2012, 17h20

Je préfère gérer ce genre de cas même s'il est peu probable. Les seuls cas pour lesquels je m'abstient se sont les cas hautement improbable.

De plus, pour ma part, j'utilise jQuery donc je me pose plus la question.

Invité · 26/12/2012, 17h40

Envoyé par sdamart

Je préfère gérer ce genre de cas même s'il est peu probable. Les seuls cas pour lesquels je m'abstient se sont les cas hautement improbable.
De plus, pour ma part, j'utilise jQuery donc je me pose plus la question.

Je ne sais pas si tu sais exactement ce qu'est jQuery

car en fait c'est un JavaScript compilé, qui utilises (ne t'y trompes pas),
tout simplement XMLHttpRequest();

A++
Christele

**NoSmoking** · 26/12/2012, 19h14

car en fait c'est un JavaScript compilé, qui utilises (ne t'y trompes pas),
tout simplement XMLHttpRequest();

jQuery n'est QUE du javascript et utilise encore, sûrement très rarement les ActiveXObject, compatibilité oblige.

Envoyé par Extrait code jQuery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Functions to create xhrs
function createStandardXHR() {
	try {
		return new window.XMLHttpRequest();
	} catch( e ) {}
}
 
function createActiveXHR() {
	try {
		return new window.ActiveXObject( "Microsoft.XMLHTTP" );
	} catch( e ) {}
}
// Create the request object
// (This is still attached to ajaxSettings for backward compatibility)
jQuery.ajaxSettings.xhr = window.ActiveXObject ?
	function() {
		return !this.isLocal && createStandardXHR() || createActiveXHR();
	} :
	createStandardXHR;