Discussion :

[ele51]

bonjour
je suis en train de programmer une application en javascript + ajax

j'ai déja lu les doc + parcouru le forum + google ( à en perdre la tete )

pour comprendre mon probleme, je souhaite faire une breve description de mon programme de test sans AJAX

Soit un objet A

Code :

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

1
2
3
4
5
6
7
8
 
//cette objet sert a gerer un div quelquonque
function A()
{
    this.id=0; // c'est une variable quelquonque
    this.getId=function(){ return id; } // renvoit la valeur de la variable
    this.update=function(pValue){ this.id=pValue; }
}

Soit un manager AJAX

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
 
function AJAX_MANAGER()
{
  this.tab=Array(); //tableau de nom de mes elements
 
  //fonction qui ajoute dynamiquement des objets au manager
  // j'utilise la fonction eval pour cela
  this.add=function(pName)
  { 
   eval("this."+pName+"=new "+"A();");
   //cela donne : this.pName=new A(); et l'execute bien
  }
 
//cette fonction met a jour tout les objet en memoire
  this.update=function()
  {
    for(var i=0;i < this.tab.length ; i++)
    {
       //evaluer l'objet avec sa methode update 
       eval("this."+this.tab[i]+".update("+i+");");
       //cela donne : this.Nomdelobjet.update(i);
    }
  }
}

ce morceau de code marche ( si j'ai bien tout recopier )

le probleme c'est quand j'ajoute de l'ajax dans la partie update
car le but est de mettre a jour tous les objet A() qui sont gerer par le manager de maniere dynamique

( pour cette je peut pas les mettres en dur dans mon manager )

si qqu'un connait un site un tuto ou une portion de code qui l'a déja fait peut il me le dire ??? et me décrire un peu le code si il l'a compris ?

sinon je continue mon explication ...

Rajoutons de l'ajax


modifions donc la classe

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
function AJAX_MANAGER()
{
  this.tab=Array(); //tableau de nom de mes elements
 
    /* creer un objet xmlhttprequest */   
    var xhr = null;
    if (typeof XMLHttpRequest != 'undefined'){ 
       xhr =  new XMLHttpRequest(); 
    } 
    try { 
        xhr =  new ActiveXObject("Msxml2.XMLHTTP"); 
    } 
    catch (e) { 
        try { 
            xhr =  new ActiveXObject("Microsoft.XMLHTTP"); 
        } catch (e) {} 
    }
 
 //fonction qui ajoute dynamiquement des objets au manager
  // j'utilise la fonction eval pour cela
  this.add=function(pName)
  { 
   eval("this."+pName+"=new "+"A();");
   //cela donne : this.pName=new A(); et l'execute bien
  }
 
//cette fonction met a jour tout les objet en memoire
  this.update=function()
  {
      for(var i=0;i < this.tab.length ; i++)
      {
            xhr.onreadystatechange=function()
            {
                if (xhr.readyState == 4 && xhr.status == 200) 
                { 
                    eval("this."+this.tab[i]+".update("+xhr.responseText+");"); 
                }
 
            }
            xhr.open("GET", "http://google.fr", true); 
            xhr.send(null);
        }
        //bien sur on rappelle la fonction car les fenetre se mette a jour
        setTimeout("this.update()",1000);
    }
  }
}

voila alors cela ne marche pas car à l'intérieur de la fonction

xhr.onreadystatechange=function()
{
if (xhr.readyState == 4 && xhr.status == 200)
{
eval("this."+this.tab[i]+".update("+xhr.responseText+");");
}

}


les variable semble comme inconnu et non utilisable
( il m'affiche qu'il n'ont pas de properties )

voila je peut vous éclairer si vous le souhaiter

cordialement mathieu

[magnus2005]

1 Le probleme :
J'ai peut être eu le même probleme,
Dans ton cas ou ta fonction methode "update" serait appelée apres une reponse de "requeteur (example ici tu utilise "onreadystatechange").
à ce moment le moteur javascript ne vas pas reconnaitre "this" comme l'object lui meme.
Javascript a un modele partiellement objet dont voici une des limites
c'est tres vicieux à trouver comme probleme.
En theorie object (java ou .NET ou C++) ton code serait logiquement valide mais la ça fonctionne pas.

2 mes solutions :
Je suis forcement passé par une variable global dans tous les cas il faut remplacer "this" par la reference javascript connu.

1 Soit ton object Ajax Manager est lui meme une variable globale
Avantage : facile et rapide a faire
Inconvenient : On perd pas mal d'avantage d'avoir un objet pour ça
car on ne peut gerer qu'une instance

2 Soit tu créé un tableau global qui va stocker tes objets AjaxManager
et à chaque reponse tu vas chercher l object dans le tableau (par le moyen qui te semble le meilleur) et au lieu d utiliser this dans ta methode tu essaye de passer l'object du tableau.
Avantage : permet une multi instance de l object
Inconvenient : Mais c'est plus difficile à mettre en oeuvre et this
ne fonctionnera toujours pas

[ele51]

alors

je te remercie pour avoir passer du temps a lire et essayer de m'aider

en effet j'adore la prog objet alors j'ai longement réfléchi sur ce sujet sans succes car javascript est limitatif :-)

le soucis dans ta solution 2 : c'est le setTimeOut et la recursivité qui fait qu'il perd un peu tt les variable meme global au script je sais pas pourquoi
mais je pense savoir comme le résoudre mais en fait j'ai une autre idée


se passer de javascript pour la gestion
et le faire faire par Java via JSP

une classe java gere des objet JAVA ( les objet ont des variable et des type de comportement pour AJAX )

ex:
variable : url ou chercher les info / nom de la div
comportement une zone qui met a jour son contenu / ou alors sa taille / ou bien les deux


une methode crée le code javascript necessaire pour construire les objet JS ainsi que l'appel la methode upload directements dans la fonction UPLOAD d'ajax et cette fois ci en dur ( pas en dynamique comme avant )
une autre méthode créer le code html associé

ex du code generer par la premier methode:

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
 
 
//déclaration des T qque part avant dans le code
 
var obj A=new T();
 
function upload_ajax()
{
  //creer un objet XHR
 
  //faire la requete XHR 
  //renvoit du JSON ou XML
 
  objA.upload(valeur qui va bien issu de XML ou JSON);
 
  rapelle de la fct upload_ajax();
}

bon je vous laisse imaginer le code HTML générer par la 2eme méthode

merci bcp
a+

cordialement elessar

[magnus2005]

En javascript les variables globales ne disparraissent pas tant qu'on reste avec la meme page web. (si tu change de pages web alors le probleme est completement different).
La gestion globales des variables de javascript est pas geniale mais en general ça fonctionne.

Passer par le code du serveur c'est une idée bonne idée et qui fonctionne mais elle met en oeuvre pas mal de code (=> amplifie le nombre de bug possible) et le nombre de transactions (=> amplifie le nombre de bug et reduit les performances). Je pense que tu devrais reserver ce genre de methode pour de la communication entre differentes page web. Ici javascript a déja toutes les info.
Pour un code plus leger et plus rapide je te conseille d'effectuer l operation en javascript meme si c'est une solution qui est loin d'être propre (surtout par rapport à java).

Bon courage