Contexte Javascript

[matco]

Bonjour,

Je travaille actuellement sur un site web et j'ai créé une classe en javascript.

Ma classe s'appelle Module et comporte de nombreuses méthodes qui permettent de réaliser des effets visuels pour les différents éléments qui apparaissent sur mon site.

Ma classe utilise un objet XMLHTTPREQUEST, et j'aimerai appeler une méthode de ma classe sur la "propriété" onreadystatechange. Le problème est que le contexte dans la fonction que je lie à la propriété onreadystatechange n'est pas celui de ma classe, ce qui m'empêche d'utiliser le mot clé this dans cette fonction.

Pour compléter mon explication (assez laborieuse), voici une partie du code de ma classe :

function Module(nom) {
this.nom = nom; //nom du module
this.etat_chargement = 0; //etat en chargement ou non
this.xhr =  new XMLHttpRequest();
	....
}

Module.prototype.XHR = function(cible,script,parametres) {
this.xhr.onreadystatechange = function() {
	if(this.xhr.readyState != 4) { //ligne qui provoque l'erreur
		this.Chargement(1); //une méthode de ma classe
	}
	if(this.xhr.readyState == 4 && this.xhr.status == 200) {
		this.Chargement(0);
		resultat = this.xhr.responseText;
		this.RecuperePartie(cible).innerHTML = resultat; //une autre méthode de ma classe
	}
this.xhr.open('POST',script+'.php',true);
this.xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
this.xhr.send(parametres);
return true;
}

Lors d'un appel de la méthode XHR, Javascript me dit que "this.xhr" n'a pas de propriétés. Je pense que c'est parce que this refere à la fonction et non pas à mon objet.

J'ai déjà essayé directement une méthode sur onreadystatechange, mais ça ne fonctionne pas non plus :

this.xhr.onreadystatechange = this.TraitementXHR;

Cela me donne la même erreur que ci-dessus.

Ma question est : comment faire pour appeler une des méthodes de ma classe dans cette fonction ?

Je vous remercie par avance pour vos réponses.

[SyGEN]

Pas assez d'info.

Comment est déclarée ta variable thix.xhr ?

Comment tu appelles XHR pour que ca foire.

Pas clair ta séparation entre ta classe et le prototype (détails ?) ..

etc ...

Et au final, pourquoi ne pas utiliser un framework genre protoype.js plutot que de réécrire la roue à chaque fois ...

Bien à toi

Oxsy

[matco]

Bonsoir,

Merci déjà d'avoir pris le temps de me répondre.

Je pensais avoir donné suffisamment d'infos pour me faire comprendre, et je ne vois pas trop comment je peux améliorer ma description .

Je vais répondre à tes questions pour éclaircir le problème :

Comment est déclarée ta variable thix.xhr ?

Comme on peut le voir dans le code ci-dessus, l'objet xhr est une propriété de ma classe :

[code]function Module(nom) {
this.nom = nom; //nom du module
this.etat_chargement = 0; //etat en chargement ou non
this.xhr =  new XMLHttpRequest();
...

Comment tu appelles XHR pour que ca foire ?

Sur une de mes pages html, j'ai les deux lignes de codes suivantes pour instancier mon objet et appeler la méthode XHR :

var identification = new Module('identification');
identification.XHR('cadre','script/identification','');

C'est la deuxième ligne qui pose problème et précisément la passage ou j'associe la fonction anonyme à la propriété onreadystatechange de l'objet XMLHttpRequest(); (qui est lui même une propriété de ma classe) :

Module.prototype.XHR = function(cible,script,parametres) {
this.xhr.onreadystatechange = function() {
	if(this.xhr.readyState != 4) { //ligne qui provoque l'erreur
		this.Chargement(1); //une méthode de ma classe
	}
	if(this.xhr.readyState == 4 && this.xhr.status == 200) {
		this.Chargement(0);
		resultat = this.xhr.responseText;
		this.RecuperePartie(cible).innerHTML = resultat; //une autre méthode de ma classe
	}
this.xhr.open('POST',script+'.php',true);
this.xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
this.xhr.send(parametres);
return true;
}

Pour ce qui est de la séparation de la classe et du prototype, je ne comprend pas.

J'ai conçu ma classe avec des prototypes pour ne pas surcharger mes objets, peut être est-ce la que se trouve le problème.

Quant au framework, je ne vois pas en quoi ça pourrait m'être utile.

Je rappelle que le problème se résume simplement à l'utilisation du mot clé this dans une fonction anonyme.

Voila, si besoin est, je peux poster l'ensemble du code de ma classe mais ça risque d'être un peu lourd.

[SyGEN]

Comment est déclarée ta variable thix.xhr ?

Comme on peut le voir dans le code ci-dessus, l'objet xhr est une propriété de ma classe :

[code]function Module(nom) {
this.nom = nom; //nom du module
this.etat_chargement = 0; //etat en chargement ou non
this.xhr =  new XMLHttpRequest();
...

ca me dit toujours pas comment elle est "déclarée"...

A moins que tu mélanges un peu.

this fait appel a une var/function déclarée, var déclare une var/function. Faut pas mélanger les deux.

Je connais pas Module mais utilisons Class.

var xhr = null;

ensuite

this.xhr = new etc ... dans les assignations.

Comment tu appelles XHR pour que ca foire ?

Sur une de mes pages html, j'ai les deux lignes de codes suivantes pour instancier mon objet et appeler la méthode XHR :

var identification = new Module('identification');
identification.XHR('cadre','script/identification','');

C'est la deuxième ligne qui pose problème et précisément la passage ou j'associe la fonction anonyme à la propriété onreadystatechange de l'objet XMLHttpRequest(); (qui est lui même une propriété de ma classe) :

... <snip>

la aussi je suis un peu dans le flou, j'ai l'impression que tu mix min et maj... et sans le code c'est pas évident a voir.

Pour ce qui est de la séparation de la classe et du prototype, je ne comprend pas.

J'ai conçu ma classe avec des prototypes pour ne pas surcharger mes objets, peut être est-ce la que se trouve le problème.

Quant au framework, je ne vois pas en quoi ça pourrait m'être utile.

a te passer des http requests/responses et gérer directement le design ou le xml from<-->to en callbacks

[matco]

Bonsoir,

Encore merci pour cette réponse.

Je crois que je suis en train de me perdre dans ce que tu m'indiques.

Pour ce qui est de la déclaration de la variable XHR, je ne comprend toujours pas !

Je déclare la classe, puis ses propriétés, et l'une de ces propriétés est un objet XMLHttpRequest, comme ça aurait pu être une chaine de caractère, un entier ou n'importe quoi d'autre.

this.chaine_de_caractere = 'blabla';

this.entier = 5;

this.xhr = new XMLHttpRequest();

Est-ce incorrect ? (je l'ai déjà fait dans d'autres script et ça fonctionne très bien)

Pour ce qui est de la confusion majuscule, minuscule, j'ai changé les noms pour plus de clarté (c'est d'ailleurs bizarre que ça ne m'ait pas posé de problèmes)

Voici le code complet de la classe afin d'avoir tous les éléments pour résoudre le problème.

function Module(nom) {
this.nom = nom; //nom du module
this.element = document.getElementById(nom); //module
this.etat_chargement = 0; //etat en chargement ou non
this.etat_pli = 1; //etat plie ou deplie
this.xhr =  new XMLHttpRequest(); //xmlhttprequest
this.element_contenu = this.RecuperePartie('cadre'); //contenu du module
this.element_chargement = this.RecuperePartie('chargement'); //image de chargement du module
this.element_derepli = this.RecuperePartie('derepli'); //image de depli ou repli
this.element_soumettre = this.RecuperePartie('soumettre'); //bouton de soumission
}

//affiche les proprietes du module
Module.prototype.AfficheProprietes = function() {
alert('Module : '+this.nom+'\nChargement : '+this.etat_chargement+'\nPli : '+this.etat_pli);
return true;
}

//recupere une partie du module
Module.prototype.RecuperePartie = function(partie) {
var i = 0;
while (i < this.element.childNodes.length) {
	if (this.element.childNodes[i].id == partie) {
		return this.element.childNodes[i];
	}
	i++;
}
return false;
}


//affiche le logo pour signaliser un chargement
Module.prototype.Chargement = function(etat) {
if(etat == 1) {
	this.etat_chargement = 1;
	this.element_chargement.style.visibility = 'visible';
	this.element_soumettre.type = 'button';
	this.element_soumettre.value = 'En cours';
}
else {
	this.etat_chargement = 0;
	this.element_chargement.style.visibility = 'hidden';
	this.element_soumettre.type = 'submit';
	this.element_soumettre.value = 'Valider';
}
return true;
}

//permet de changer dynamiquement une partie du module
Module.prototype.Requete = function(cible,script,parametres) {
//alert('Cible : '+cible+'\nScript : '+script+'\nParametre:'+parametre);
this.xhr.onreadystatechange = function() {
	//affichage pendant le chargement
	if(this.xhr.readyState != 4) {
		//alert('Traitement');
		this.Chargement(1);
	}
	//toutes les données ont été recues
	if(this.xhr.readyState == 4 && this.xhr.status == 200) {
		this.Chargement(0);
		resultat = this.xhr.responseText;
		//alert('Resultat : '+resultat);
		//Insertion du résultat dans la page source
		this.RecuperePartie(cible).innerHTML = resultat;
	}
}
//transmission par méthode POST
this.xhr.open('POST',script+'.php',true);
//ne pas oublier ça pour le post
this.xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//arguments à passer
this.xhr.send(parametres);
return true;
}

Je précise que tout les reste de la classe fonctionne très bien.

L'erreur dans la console d'erreurs de Firefox :

Erreur : this.xhr has no properties
Fichier source : http://.../module.class.js
Ligne : 77

La ligne 77 est la ligne suivante :

if(this.xhr.readyState != 4) {

(dans la méthode Requete)

Un des éléments de mon site qui utilise cette classe :

<div id="identification">
<div id="derepli" class="repli" onclick="identification.Derepli();"></div>
<div id="chargement" class="chargement"></div>
<h2>Connexion</h2>
<div id="cadre" class="cadre"></div>
</div>
<script>
var identification = new Module('identification');
identification.Requete('cadre','php.script/identification','');
</script>

(j'ai supprimé la méthode Derepli du code de la classe postée ci-dessus pour ne pas surcharger le post)

Merci d'avance à quiconque pourrait m'apporter un élément de réponse.