Discussion :

[mathieu]

Bonjour,

J'ai fais mes premiers tests avec XMLHttpRequest aujourd'hui et je suis tombé sur un problème avec Internet Explorer. Voila déjà la fonction que j'utilise pour créer une instance de XMLHttpRequest :

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
27
28
29
30
31
32
33
34
var xhr;
 
function newXHR()
{
	// l'objet est crée dans la variable globale xhr
	xhr = false;
 
	// branch for native XMLHttpRequest object
	if(window.XMLHttpRequest) {
		try {
			xhr = new XMLHttpRequest();
		} catch(e) {
			xhr = false;
		}
	// branch for IE/Windows ActiveX version
	} else if(window.ActiveXObject) {
		try {
			xhr = new ActiveXObject('Msxml2.XMLHTTP');
		} catch(e) {
			try {
				xhr = new ActiveXObject('Microsoft.XMLHTTP');
			} catch(e) {
				xhr = false;
			}
		}
	}
}
 
function _evalueJavaScriptXHR()
{
	if (xhr.readyState == 4) {
		eval(xhr.responseText);
	}
}

Avec mes premiers tests le contenu entier du ficheir .js que j'utilisais était le suivant :

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
var xhr;
 
// création de l'objet XMLHttpRequest dans la variable globale xhr
newXHR();
 
function newXHR() {...}
function _evalueJavaScriptXHR() {...}
 
function envoyeGetXHR(url)
{
	if (xhr) {
		xhr.onreadystatechange = _evalueJavaScriptXHR;
 
		xhr.open('GET', url, true);
		xhr.send(null);
	}
}

ensuite sur ma page j'appelle plusieurs fois la fonction "envoyeGetXHR" mais avec Internet Explorer seul la première exécution fonctionne alors qu'avec Firefox il n'y a pas de problème

J'ai donc modifier pour recréer l'objet à chaque appel

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
var xhr;
 
function newXHR() {...}
function _evalueJavaScriptXHR() {...}
 
function envoyeGetXHR(url)
{
	// création de l'objet XMLHttpRequest dans la variable globale xhr
	newXHR();
 
	if (xhr) {
		xhr.onreadystatechange = _evalueJavaScriptXHR;
 
		xhr.open('GET', url, true);
		xhr.send(null);
	}
}

Est ce que ce code ne vas pas poser de problème de remplissage de la mémoire ? Est ce qu'il y a une autre solution pour que cela fonctionne sous Internet Explorer ?

[siddh]

faudrais voir l occupation memoire de cet objet mais je pense pas que ce soit enorme.

apres, tu n est pas obligé de faire des appels asynchrones tout le temps, les appels synchrones sont possibles.

j'en fais plusieurs par page et ca ne pose pas de probleme, ie ou ffx

[denisC]

ensuite sur ma page j'appelle plusieurs fois la fonction "envoyeGetXHR" mais avec Internet Explorer seul la première exécution fonctionne alors qu'avec Firefox il n'y a pas de problème

La tu m'etonnes un peu quand même. Tu peux montrer la partie du code ou tu envoies l'ensemble de tes requetes? Parceque (bien utilisé) ça marche très bien sous IE aussi les XHR....

[mathieu]

voila j'ai fait 2 pages de tests qui reproduisent le problème

http://php.developpez.com/faq/tmp/xhr/test1.html
http://php.developpez.com/faq/tmp/xhr/test2.html
la page test1 appel le fichier xhr1.js et la page test2 le fichier xhr2.js et c'est la seule différence entre les 2

donc le fichier xhr1.js crée l'objet au démarrage de la page et ça ne fonctionne qu'une seule fois avec IE.
avec le fichier xhr2.js, l'objet est créé à chaque envoi d'une requête et le resultat est correct sous IE

[mathieu]

malgrès que ce script est appelé une 50aine de fois dans une page, ça ne fait pas rammer le navigateur donc il y peut-être pas de problème.
je devrais peut être faire un "xhr = null" après chaque appel pour être sur de libérer la mémoire ?

[siddh]

oui peut etre mais c est franchement bizarre.

j'ai jamais eu ce soucis la.
par contre je fais beaucoup d'appels synchrones moi, peut etre est ce pour ca.

[denisC]

Alors, après étude un peu plus poussée de ton cas. Je dirais qu'il y a une erreur de conception dans les deux cas. Tu ne prends pas en compte le caractère asynchrone de la requete.

Dans le premier cas, tu peux renvoyer une requete alors que la premiere n'est pas terminée, ce qui doit provoquer le plantage sur IE. Je ne sais pas comment FireFox gere ça, mais mieux apparement. De toute façon, si tu utilises XHR en asynchrone (ce qui est bien evidemment le but du jeu), il faut faire un peu plus attention à la gestion de la concurrence.

Dans le second cas, il n'y a plus d'appel sur la même requete (puisque tu en créé une nouvelle à chaque fois). C'est cette méthode que j'utilise, conformément à Google Suggest, donc je suppose que c'est la bonne méthode. Une petite addition à faire (toujours pour ce problème d'asynchrone), mieux vaux rajouter un:

Code :

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

1
2
3
4
 
  if(xhr&&xhr.readyState!=0){
    xhr.abort()
  }

avant de faire un newXHR(); dans ta fonction envoyeGetXHR(url). Ca te permet d'annuler la requete précédente et d'éviter d'aboutir à un état incohérent de ta page. Toujours les problèmes de concurrence (tu envoies requete1 puis requete2, réponse1 arrive et modifie la page dans un état ou requete aurait été impossible, puis réponse2 arrive, et modifie alors qu'elle ne devrait pas et c'est le bazar).

En conclusion, utilise la solution 2, en ajoutant le bout ci dessus, et integre dans la conception de tes pages toutes les contraintes liées à la nature asynchrone de la chose

Pas facile XHR

[mathieu]

Toujours les problèmes de concurrence (tu envoies requete1 puis requete2, réponse1 arrive et modifie la page dans un état ou requete aurait été impossible, puis réponse2 arrive, et modifie alors qu'elle ne devrait pas et c'est le bazar).

au contraire c'est géré et c'est le comportement que je cherche, la réponse 2 s'occupe de mettre à jour les champs avec les dernières informations envoyées par la requête2

[denisC]

au contraire c'est géré et c'est le comportement que je cherche, la réponse 2 s'occupe de mettre à jour les champs avec les dernières informations envoyées par la requête2

Oui mais non

Dans ton cas, il y a effectivement peu d'incidence, car tu ne modifie qu'une série de champs (j'ai pas compris l'utilité de la page, au fait). Donc dans le cas présent, il n'y a effectivement rien à faire.
Mais bon, c'était juste pour être sûr que tu as pris ça en compte

[mathieu]

(j'ai pas compris l'utilité de la page, au fait)

c'est le but, j'utilise ça au boulot et je ne veux pas qu'on sache ce que ça fait

j'ai encore un peu de neuf mais je pense que je vais bientôt clore le sujet puisque j'arrive à avoir en gros le comportement dont j'ai besoin

je viens de modifier le fichier qui envoye le retour en javascript, j'ai ajouté une attente de 2 seconde en PHP pour avoir le temps de voir ce qu'il se passe. En suite j'ai fait le teste suivant sur les deux pages : je tape un chiffre dans un champ, j'attend une seconde et je tappe un deuxième chiffre.
résultat sous Firefox :
- avec la 1re page la frappe du deuxième chiffre n'est pas pris en compte (?!?!?)
- avec la 2me page les modifications se font d'un coup, 2 secondes après la frappe du 2me chiffre

[siddh]

t'as pas essayé de le faire en synchrone pour voir ?

[denisC]

résultat sous Firefox :
- avec la 1re page la frappe du deuxième chiffre n'est pas pris en compte (?!?!?)
- avec la 2me page les modifications se font d'un coup, 2 secondes après la frappe du 2me chiffre

Euh, tu es sur de ta temporisation?

Sinon, pour les explications, je suppose que Ffx remarque que la XHR est utilisée, et ne l'utilise pas (c'est un comportement comme un autre, et ça correspond à ce qu'on disait avant).
Pour le deuxième cas, je te dirais de vérifier la temporisation. Eventuellement, ça peut être un soucis dans le flush des informations de FFx, mais j'ai des doutes. Enfin, tant que ça marche

Sinon, pour le mode synchrone, c'est une mauvaise idée. Je pense que tu perds environ 80% des possibilités de XHR en le passant en mode synchrone. Autant recharger la page, puisque de toute façon l'utilisateur doit attendre (je suis d'accord, ça réduit le traffic, mais en asynchrone, c'est tellement plus fun ).

[siddh]

J'utilise pas mal le mode synchrone car justement quand t as plusieurs echanges dans la meme page des fois t as des ####.

Et puis franchement le temps d attente est pas tres long, enfin ca depend vraiment du traitememnt serveur.

[mathieu]

Je pense que tu perds environ 80% des possibilités de XHR en le passant en mode synchrone.

oui c'est un pour l'utilisation asynchrone que je suis passé de l'utilisation de la balise "script" à XHR

je viens de faire le même test avec IE :
- test1.html : toujours la même chose, la requete est envoyée une fois et ensuite plus rien
- test2.html : j'ai le même comportement qu'avec Firefox

ce comportement me suffit donc, comme j'ai dit avant, je laisser tomber et je mets "Résolu"
si jamais vous avez un idée laissez la quand même, j'ai mis le suivi de ce sujet donc je reviendrai