XmlHttpRequest : récupérer la valeur de retour

[jmnicolas]

Bonjour, je me casse la tête sur quelque chose de sans doute très simple, mais je débute en JS et je vois vraiment pas !

J'ai donc une fonction connexionWS qui se connecte à un Web Service et qui utilise GXmlHttp (api Google Maps) au lieux de XmlHttpRequest (mais bon c'est la même chose).

J'aimerais que cette fonction me retourne un tableau d'objets qui sera créé là où j'ai mis le commentaire (je vous épargne le reste du code, ça n'apporte rien de plus). Le soucis c'est que quelque soit l'endroit où je déclare mon tableau et mon return j'obtiens une valeur undefined lors que je récupère ça en dehors de la fonction, alors qu'un alert au sein de la fonction me donne les bonnes données retournées par mon Web Service.

Toute suggestion sera la bienvenue, et accessoirement si vous avez un tuto / exemple qui explique à fond la visibilité des variables en JS je suis preneur !

Merci

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function connexionWS(adressews)
{
    var req = GXmlHttp.create();
    req.open("GET", adressews, true);
    req.onreadystatechange = function()
    {
      if (req.readyState === 4 && req.status < 299)
      {
// tableau d'objets créé ici
      }
    }
    req.send(null);
 
}

[keul85]

Ce que je ferais, ça serait de modifier le fichier 'adressews' pour qu'il me renvoie un fichier xml contenant le résultat de la requête, puis de le parser dans la fonction en javascript pour en récupérer le résultat, et le mettre dans un tableau.

Ce tutoriel est très simple et très bien expliqué pour commencer en Ajax.

[Bovino]

C'est à toi de construire ton tableau à partir de la réponse reçue, soit en text, soit en XML voire en JSON.

je vous épargne le reste du code, ça n'apporte rien de plus

Effectivement, la boule de cristal pour comprendre ce que tu envoies, ce que tu reçois et comment tu le traite est plus efficace.

>keul85

modifier le fichier 'adressews' pour qu'il me renvoie un fichier xml contenant le résultat de la requête

Quel rapport entre l'url d'envoi de la requête et le résultat reçu ???

[jmnicolas]

Je crois qu'on s'est mal compris : le paramètre adressews c'est l'adresse ip du Web Service.
Donc cette fonction se connecte au Web Service et récupère un fichier XML.
Je parse ce fichier et le colle dans un tableau d'objets, mais le problème c'est comment renvoyer ce tableau d'objets en dehors de ma fonction connexionWS.

Exemple :

Code :

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
function connexionWS(adressews)
{
    var req = GXmlHttp.create();
    req.open("GET", adressews, true);
    req.onreadystatechange = function()
    {
      if (req.readyState === 4 && req.status < 299)
      {
 
          var docXml = GXml.parse(req.responseText);
 
 
          /////////////////////////////////////////////////////////
          // Plein de code qui approvisionne un tableau d'objets //
          /////////////////////////////////////////////////////////
      }
    }
    req.send(null);
 
}
 
 
// plus loin :
 
var monTableau = connexionWS(htpp://192....) ;

Donc dans ce code, où dois je déclarer mon tableau d'objets et où dois je mettre mon return pour obtenir les objets en dehors de ma fonction connexionWS ?

[keul85]

Envoyé par Bovino

Quel rapport entre l'url d'envoi de la requête et le résultat reçu ???

Il n'y en a pas forcément, mais j'ai toujours fais comme ça. A savoir que le fichier qui était appelé (dans son cas, ce serait adressews) se connectait à la base de données puis me renvoyait un fichier xml qui contenait le résultat (via la fonction echo de php.

Donc la solution a son problème selon moi était de modifier le fichier appelé (adressews) pour qu'il renvoie un fichier xml.


@jmnicolas :

Effectivement, on a du mal se comprendre. Pour ta réponse, il me semble que déclarer ton tableau à l'extérieur de la fonction devrait te permettre de le réutiliser dans d'autres fonctions.

[Bovino]

Effectivement, on a du mal se comprendre. Pour ta réponse, il me semble que déclarer ton tableau à l'extérieur de la fonction devrait te permettre de le réutiliser dans d'autres fonctions.

Une variable déclarée dans une fonction est locale, donc utilisable uniquement dans cette fonction;
une variable déclarée hors de toute fonction est globale, donc utilisable partout dans le script.

Attention, il est possible de déclarer une variable globale dans une fonction (déclaration de type maVariable=... au lieu de var maVariable=...) mais cela est particulièrement déconseillé car il peut ensuite y avoir de gros risques d'écrasement.

[jmnicolas]

Envoyé par Bovino

Effectivement, la boule de cristal pour comprendre ce que tu envoies, ce que tu reçois et comment tu le traite est plus efficace

L'idée était de ne pas vous noyer sous du code qui n'a pas de rapport avec mon problème, je pensais que mes explications étaient suffisantes.

Voici donc le code complet (du moins un des nombreux essais) :

Code :

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
// tableau des arrêts
tabloArrets = new Array();
 
function taAffich ()
{
    var taa ;
 
    for (var x = 0; x < tabloArrets.length; x++)
    {
          taa = taa + tabloArrets[x].Affichage() ;
    }
    alert(tabloArrets.length);
    return taa;
}
 
 
function Arret (pGirouette, pHoraire, pLigne, pService, pNumParc)
{
      this.pGirouette =  pGirouette;
      this.pHoraire =  pHoraire;
      this.pLigne =  pLigne;
      this.pService =  pService;
      this.pNumParc = pNumParc;
 
      // un toString
      this.Affichage = function affichage()
      {
          var txtAffich = 'Destination : ' + this.pGirouette + '\n'
                + 'Horaire : ' + this.pHoraire  + '\n'
                + 'Ligne : ' + this.pLigne + '\n'
                + 'S/V : ' + this.pService  + '\n'
                + 'N° parc : ' + this.pNumParc + '\n' ;
 
          return txtAffich ;
      }
}
 
function connexionWS(adressews)
{
    var req = GXmlHttp.create();
    req.open("GET", adressews, true);
    req.onreadystatechange = function()
    {
      if (req.readyState === 4 && req.status < 299)
      {
 
          var docXml = GXml.parse(req.responseText);
 
          // on crée des variables de type Array, qui recoivent comme valeur les balises choisies dans le document xml
          var destination = docXml.getElementsByTagName('ax21:codGirouette');
          var min = docXml.getElementsByTagName('ax21:horaire');
          var ligne = docXml.getElementsByTagName('ax21:nuLiCo');
          var service = docXml.getElementsByTagName('ax21:vehicule');
          var numParc = docXml.getElementsByTagName('ax21:parc');
 
 
            tabloArrets = new Array();
 
          for (var n = 0; n < min.length; n++)
          {
               var unArret = new Arret (destination[n].firstChild.nodeValue, min[n].firstChild.                     nodeValue, ligne[n].firstChild.nodeValue, service[1].firstChild.nodeValue, numParc[1].               firstChild.nodeValue) ;
 
               tabloArrets[n] = unArret ;
          }
 
 
      }
    }
    req.send(null);
 
}
 
 
 
// méthode de création de marqueurs
function createMarker(pt, cod, info)
{
    var marker = new GMarker(pt);
    marker.value = cod ;
 
    // on ajoute au gestionnaire d'événements
    GEvent.addListener (marker, "click", function()
    {
        var adrsw = 'http://localhost/stage/proxy.php?url=http://localhost:8080/axis2/services/Serveur/passageArret&pCodArret=' + marker.value ;
 
        connexionWS(adrsw) ;
 
        marker.openInfoWindowHtml (info + ' ' + taAffich ());
    });
    return marker;
}
 
function load()
{
  if (GBrowserIsCompatible())
  {
    // on crée une nouvelle map que l'on assigne au div du même nom
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(47.624562, 6.856155), 13);
 
    // on définit le panneau de zoom
    map.addControl(new GSmallMapControl());
 
    // pour passer de vue satellite à vue plan
    map.addControl(new GMapTypeControl());
 
    // Affichage : on va lire le fichier xml et on place les marqueurs
    var request = GXmlHttp.create();
    request.open("GET", "data2.xml", true);
    request.onreadystatechange = function()
    {
        if (request.readyState == 4)
        {
            var xmlDoc = GXml.parse(request.responseText);
 
            // on récupère le tableau avec chaque arrêt
            var arrets = xmlDoc.documentElement.getElementsByTagName("arret");
 
            // pour chaque élément du tableau on crée un marqueur
            for (var i = 0; i < arrets.length; i++)
             {
                // on récupère les infos de chaque arrêt
                var codArret = arrets[i].getAttribute("cod");
                var nomArret = arrets[i].getAttribute("nom");
                var lat = parseFloat(arrets[i].getAttribute("lat"));
                var lon = parseFloat(arrets[i].getAttribute("lon"));
 
 
                // on définit les coordonnées du marqueur
                var point = new GLatLng(lat, lon);
 
                // on crée le marqueur
                var ifo =  nomArret + ' (' + codArret + ')' ;
                var marker = createMarker(point, codArret, ifo) ;
 
                // on place le marqueur sur la carte
                map.addOverlay(marker);
            }
        }
  }
  request.send(null);
}
 
}

C'est une appli Google Maps, j'ai des marqueurs qui représentent des arrêts de bus. quand on clique dessus ils appellent le web service qui leur retourne les prochains bus de passage à l'arrêt cliqué.

A noter que chaque "passage de bus" est stocké dans un objet Arret, c'est pas très parlant, mais en fait dans le Web Service, Arret est un objet Java qui est utilisé pour décrire pas mal de trucs différents.