Question récupération de données

**patarins** · 28/06/2014, 10h40

Bonjour,

J'utilise le code suivant pour afficher une infobulle contenant deux tabulations "Général" et "Streetview".
Je cherche à récupérer les données d'un fichier XML et non pas celles codées en dur au début du code mais je ne sais pas trop comment faire.

Une aide serait la bienvenue.

Le code :

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
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
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Common Loader</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="utils.js"></script> 
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
<script type="text/javascript">
 
 
// Set the Map variable
var map;
var tMarker = [{
    'locNr': "Location 1",
    'lat': 45.767299,
    'lon': 4.834329,
    'city': 'Lyon',
    'zip': 69,
    'land': "Fance",
    'info': '<b>Lyon<\/b><br>la suite du texte...'
},
{
    'locNr': "Location 2",
    'lat': 48.856667,
    'lon': 2.350987,
    'city': 'Paris',
    'zip': 75,
    'land': "Fance",
    'info': '<b>Paris<\/b><br>la suite du texte...'
},
{
    'locNr': "Location 3",
    'lat': 44.837368,
    'lon': -0.576144,
    'city': 'Bordeaux',
    'zip': 33,
    'land': "Fance",
    'info': '<b>Bordeaux<\/b><br>la suite du texte...'
},
{
    'locNr': "Location 4",
    'lat': 43.297612,
    'lon': 5.381042,
    'city': 'Marseille',
    'zip': 13,
    'land': "Fance",
    'info': '<b>Marseille<\/b><br>la suite du texte...'
}];
function initialize() {
    var myOptions = {
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow;
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    // Set the center of the map
    var pos = new google.maps.LatLng(46.80, 1.75);
    map.setCenter(pos);
    setMarkers(map, tMarker)
};
function setMarkers(map, tMarker) {
    for (var i in tMarker) {
        var lat = tMarker[i].lat;
        var lng = tMarker[i].lon;
        var locNr = tMarker[i].locNr;
        var city = tMarker[i].city;
        var zip = tMarker[i].zip;
        var land = tMarker[i].land;
        var info = tMarker[i].info;
 
		var latlngset = new google.maps.LatLng(lat, lng);
        var oMarkOpt = {
            position: latlngset,
            map: map,
            title: city
        };
        var marker = new google.maps.Marker(oMarkOpt);
        var contentInfoWindow = ['<div id="InfoText">', '<div class ="tabs">', '<ul>', '<li><a href="#tab1">General</a></li>', '<li><a href="#tab2" id="SV">Street View</a></li>', '</ul>', '<div id="tab1">', '<h3><b>' + locNr + '</h3></b>', '<p>' + city + '<BR>' + land + '<BR>' + zip + '<BR>' + info + '</p>', '</div>', '<div id="tab2">', '<div id="pano"></div>', '</div>'].join('');
        var infoWindowOptions = {
            content: contentInfoWindow,
            position: latlngset
        };
        var infowindow = new google.maps.InfoWindow(infoWindowOptions);
        setEventMarker(marker, infowindow);
    } // For
};
 
 
 
 
 
 
 
function setEventMarker(marker, infowindow) {
    google.maps.event.addListener(marker, "click", function () {
        infowindow.open(this.getMap(), this);
    });
    var panoramaOptions = {
        position: marker.position
    };
    google.maps.event.addListener(infowindow, 'domready', function () {
        $(".tabs").tabs();
        $('#SV').click(function () {
            var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
            map.setStreetView(panorama);
        });
    });
};
// Initializes the Google Map
google.maps.event.addDomListener(window, 'load', initialize);
 
</script> 
<style>
#infotext {
  font-size:12px;
  width:480px;
  height:380px;
}
.tabs {
  width:450px;
  height:350px;
}
#pano {
  width:350px;
  height: 250px;
}
</style>
</head> 
<body> 
  <div id="map_canvas" style="width:100%; height:100%"></div>
  <!-- <div id='pano' style='position: absolute: top: 40px; left: 2px; width: 380px; height:290px;'></div> --> 
</body> 
</html>

Et les données que je cherche à modifier :

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
var tMarker = [{
    'locNr': "Location 1",
    'lat': 45.767299,
    'lon': 4.834329,
    'city': 'Lyon',
    'zip': 69,
    'land': "Fance",
    'info': '<b>Lyon<\/b><br>la suite du texte...'
},
{
    'locNr': "Location 2",
    'lat': 48.856667,
    'lon': 2.350987,
    'city': 'Paris',
    'zip': 75,
    'land': "Fance",
    'info': '<b>Paris<\/b><br>la suite du texte...'
},
{
    'locNr': "Location 3",
    'lat': 44.837368,
    'lon': -0.576144,
    'city': 'Bordeaux',
    'zip': 33,
    'land': "Fance",
    'info': '<b>Bordeaux<\/b><br>la suite du texte...'
},
{
    'locNr': "Location 4",
    'lat': 43.297612,
    'lon': 5.381042,
    'city': 'Marseille',
    'zip': 13,
    'land': "Fance",
    'info': '<b>Marseille<\/b><br>la suite du texte...'
}];

Les données sont accessibles depuis un fichier XML ou bien depuis une base de données MySQL.

**kaari kosaku** · 28/06/2014, 22h10

En gros, tu veux accéder à un XML stocké sur le serveur depuis ton code javascript exécuté côté client, et stocker le tout dans un objet JS, c'est bien ça ?

Si tel est le cas, je pourrais t'expliquer mais je vais simplement t'aider en te fournissant la recherche google à effectuer

https://www.google.fr/#q=javascript+parse+xml

**patarins** · 29/06/2014, 10h46

En fait je ne souhaite pas accéder au fichier XML mais plutôt aux données stockées dans la base MySQL.

**Watilin** · 29/06/2014, 17h06

Bonjour Samuel,

je ne vois aucun XML dans le code que tu as donné. Il va falloir être plus précis. D'où vient ce XML ? Comment est-il servi ?

**patarins** · 30/06/2014, 09h16

Bonjour,

Comme indiqué lors de mon premier post, je cherche à remplacer les données en début de code (Coordonnées) par des données issues d'une base MySQL.

Pour cela, je génère un fichier XML à l'aide du code suivant :

Code php :

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
49
50
51
52
53
54
55
56
57
58
<?php
    if(!$dbconn = mysql_connect('localhost', 'root', '')) {
       echo "Echec de la connexion MySQL au serveur 'localhost'.";
       exit;
    }
    if (!mysql_select_db('configuration')) {
       echo "Echec de la connexion à la base 'configuration'";
       exit;
    }
 
    $table_id = 'client';
    $query = "SELECT * FROM $table_id";
    $dbresult = mysql_query($query, $dbconn);
 
// create a new XML document
 
$doc = new DomDocument('1.0' , 'UTF-8');
 
 
// create root node
 
$root = $doc->createElement('root');
 
$root = $doc->appendChild($root);
 
 
while($row = mysql_fetch_assoc($dbresult)) {   //--> Une ligne à la fois
 
 
 
  $occ = $doc->createElement($table_id);       //--> Un noed a chaque ligne
 
  $occ = $root->appendChild($occ);
 
 
 
  foreach ($row as $fieldname => $fieldvalue) {   //--> Ajout d'un noeud fils pour chaque champ
 
 
 
    $child = $doc->createElement($fieldname);    //--> Nom du child et sa valeur a ajouter
 
    $child = $occ->appendChild($child);
 
    $value = $doc->createTextNode($fieldvalue);
 
    $value = $child->appendChild($value);
 
  }
 
 
 
}
 
$xml_string = $doc->saveXML();
file_put_contents ('test.xml', $xml_string);
 
    ?>

Ce code fonctionne correctement et me génère un fichier "test.xml".
Mais comment faire pour lier ce fichier au script Javascript, est ce que je dois le parser ?

Merci d'avance.

**kaari kosaku** · 30/06/2014, 15h48

Je trouve ton raisonnement pour le moins curieux.

Si je comprend bien, tu as les données qu'il te faut sur une bdd et pour les récupérer tu appelle un script php qui récupère ces données et qui crée un fichier XML sur ton serveur. Ensuite tu veux récupérer ce fichier pour le parser et le mettre dans un objet javascript.

C'est beaucoup de complication pour pas grand chose.

Question 1 : Est-ce que tu as besoin de modifier ton objet tmarker après l'éxecution de la page ?
Question 2 : As-tu besoin de conserver ton fichier XML sur ton serveur pour une autre application que pour ce script ?

If (Reponse 1 == NON && Reponse 2 == NON)
Nul besoin de XML, de ton script php ou de quoique ce soit d'autre. Tout ce dont tu as besoin est une connexion à la bdd, stocker tes reponses dans une/des variables, et echo ces variables dans ta page html.

If(Reponse 1 == OUI)
Tout est dans ma première réponse quelques posts plus haut.

**Watilin** · 30/06/2014, 16h50

Ok.

Tu as le choix du format pour faire passer les infos entre ta base de données et le JavaScript de ta page. Tu as choisi XML, mais tu aurais pu tout aussi bien prendre CSV, JSON, etc.

Actuellement voilà comment je vois les choses :

Un script PHP génère le fichier XML, je ne sais pas à quel moment.
Quand un client demande la page HTML dont tu as donné le code, il reçoit des données JS statiques.
Tu voudrais que le client reçoive les données du XML à la place des données statiques.

C'est bien ça ?

Si c'est bien ça voilà, dans les grandes lignes, comment tu dois faire :

Utilise Ajax pour obtenir le fichier XML sur la page du client.
Utilise la propriété responseXML de ton objet Ajax
Tu peux alors parser le XML. Plus d'infos. Ce lien va t'orienter vers l'utilisation de XPath, mais tu peux aussi utiliser querySelector et querySelectorAll qui sont, à mon avis, bien plus pratiques.

Concrètement, responseXML est un raccourci où une partie du travail a été faite pour toi : c'est le résultat du parsing de responseText avec un objet DOMParser. Si le parsing échoue, responseXML sera null et tu devras utiliser responseText à la place.

Le parsing peut échouer pour plusieurs raisons, entre autres :

Le serveur n'envoie pas le bon Content-Type. Tu peux arranger ça en ajoutant req.overrideMimeType('text/xml'); juste après l'appel à req.open('GET', 'test.xml');.
Le XML est mal formé. Dans ce cas, le DOMParser baisse les bras, et il faut utiliser d'autres moyens pour analyser le XML, par exemple des RegExps.

Remarque un petit peu hors sujet : je ne suis pas vraiment un partisan du XML. Pour moi, Ajax aurait dû s'appeler Ajaw, pour Asynchronous JavaScript And Whatever-you-want.

Question récupération de données

JavaScript

Vue hybride

Discussions similaires

Partager

Partager