Parser une page web en JS

Version imprimable

31/05/2014, 15h14
dji-why

Parser une page web en JS

Bonjour à tous.

Je cherche désespérément sur google depuis bientot 3 jours le moyen de parser une page web en JS. Je m'explique :

Dans mon boulot, j'ai besoin d'avoir un accès aux trains à l'arrivée comme au départ de la gare de Caen. Dans cette optique, je ne cherche pas à faire du compliqué, juste d'avoir une sorte de page web divisée en 2 qui afficherai d'un coté les trains au départ, de l'autre, les trains à l'arrivée avec les infos sur les quais et autres (meme des frames me suffiront).

Ma source est un site web : http://www.ter-sncf.mobi/station/det...4000&name=Caen , dans lequel je cherche UNIQUEMENT a afficher la partie inférieure droite (la liste des trains et leur quai d'arrivée), en supprimant le menu de gauche, le header et le footer.
Il me faut donc trouver le moyen de parser les infos de cette page pour les remettre en forme BASIQUEMENT (genre dans une TABLE) ...

Google ne me propose pas de solution toute faite à adapter selon mes besoins, ou alors ce sont des usines à gaz !

Pourquoi en JS ? parce que je trouve ce langage simple, parce que dans ma boite, les PC ne disposent que d'internet explorer 8 de base, et parce que je n'ai malheureusement pas le temps d'apprendre un langage complexe !

Si qqn à des pistes ou un début de code à fournir, une API ou que sais-je ... JE SUIS PRENEUR ! ;)

Merci à tous ceux qui m'aideront à faire avancer mon schmilblick !!!
31/05/2014, 18h51
SylvainPV

Si je comprends bien, tu veux appliquer du JavaScript sur une page qui ne t'appartient pas ?

Dans ce cas, une solution est d'appliquer un userscript via une extension de ton navigateur. La plus connue de ces extensions étant Greasemonkey : https://addons.mozilla.org/fr/firefo.../greasemonkey/ ; mais il y a un équivalent pour presque chaque navigateur.

Si ton objectif est purement visuel, pas de manipulation de données mais uniquement de styles, un userstylesheet (CSS) peut suffire. Auquel cas je te dirigerai plutôt vers Stylish (mais c'est aussi faisable sans extension)

Ou pas ...

Citation:

Envoyé par SylvainPV

Si je comprends bien, tu veux appliquer du JavaScript sur une page qui ne t'appartient pas ?

Je veux parser cette page, sachant que je n'ai pas accès à la source du fait qu'effectivement elle ne m'appartient pas, pour remettre en forme ces données pour les afficher sur un écran.

Citation:

Dans ce cas, une solution est d'appliquer un userscript via une extension de ton navigateur. La plus connue de ces extensions étant Greasemonkey : https://addons.mozilla.org/fr/firefo.../greasemonkey/ ; mais il y a un équivalent pour presque chaque navigateur.

Malheureusement l'Admin info de ma boite ne permet pas l'ajout d'extensions au navigateur !

Citation:

Si ton objectif est purement visuel, pas de manipulation de données mais uniquement de styles, un userstylesheet (CSS) peut suffire. Auquel cas je te dirigerai plutôt vers Stylish (mais c'est aussi faisable sans extension)

Cela reste de l'addon ...

Peut être me suis-je mal exprimé, je cherche un JS qui "extraierait" les infos de la page TER SNCF pour les remettre en forme, genre en supprimant les balises html pour que les données soient réécritent "en dur" dans un XML ou un CSV par exemple.

L'idéal serait :
que sur ce code par exemple (tiré de la page du forum),
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <ul id="quicklinks"> <li class="first"><a href="http://www.developpez.net/forums/" title="">Forums</a></li> <li><a href="http://general.developpez.com/cours/" title="">Tutoriels</a></li> <li><a href="http://magazine.developpez.com/" title="">Magazine</a></li> <li><a href="http://general.developpez.com/faq/" title="">FAQs</a></li> <li><a href="http://blog.developpez.com/" title="">Blogs</a></li> <li><a href="http://projets.developpez.com/" title="">Projets</a></li> <li><a href="http://chat.developpez.com/" title="">Chat</a></li> <li><a href="http://www.developpez.com/newsletter/">Newsletter</a></li> <li><a href="http://etudes.developpez.com/">Études</a></li> <li><a href="http://emploi.developpez.com/" title="">Emploi</a></li> <li><a href="http://club.developpez.com/">Club</a></li> <li><a href="http://club.developpez.com/contacts/" title="">Contacts</a></li> </ul>
Le script me supprime les balises <ul> et <li> pour les remplacer par une autre balise !

Bref pas facile d'expliquer je suis désolé :/

01/06/2014, 15h59
SylvainPV

Tout le problème est d'appliquer un JavaScript sur une page que tu ne contrôles pas. Si un userscript est exclu, alors je ne vois pas comment automatiser cette application: tu devras exécuter le JavaScript manuellement à chaque chargement de la page, soit en le copiant/collant dans la console JS, soit en l'appliquant via un bookmarklet : http://en.wikipedia.org/wiki/Bookmarklet

Peut-être avec une simple page html locale, enregistrée sur ton disque ?

J'ai utilisé YQL de Yahoo! pour pouvoir récupérer le contenu de la page, sinon je ne pouvais pas pour des raisons de sécurité (domaines différents).

Code:

select * from html where url="http://www.ter-sncf.mobi/station/detail?uic=87444000&name=Caen" and xpath='//div[@id="id-candidates"]'

Le lien de la requête : http://developer.yahoo.com/yql/conso...dates%22%5D%27

Je pense qu'on peut filtrer d'avantage avec la requête de Yahoo et il est possible de récupérer les données en JSON ou XML.
Je ne sais pas si c'est bien fait, je ne connais pas bien le javascript mais si ça peut t'aider…
Là, pour essayer, il n'y a que les données pour les départs qui sont récupérées et ajoutées, sans modification, à la page :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html> <head> <title>ter-sncf</title> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> var url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fwww.ter-sncf.mobi%2Fstation%2Fdetail%3Fuic%3D87444000%26name%3DCaen%22%20and%0A%20%20%20%20%20%20xpath%3D'%2F%2Fdiv%5B%40id%3D%22id-candidates%22%5D'"; $.get(url) .done(function(data) { ($('body').append(data.getElementsByTagName('results')[0].firstChild.outerHTML)); } ); </script> </head> <body> </body> </html>
Tu te retrouves ensuite avec le contenu du site récupéré donc, si je ne me trompe pas, il « t'appartient » cette fois.

01/06/2014, 19h14
dji-why

Isaldas, merci à toi, cela semble être un bon début pour moi. Il me faut maintenant que j'arrive à récupérer ce code pour le remettre en forme...

J'explore cette piste qui me parait déjà être en bonne voie, même si la solution n'est pas des plus propre, cela reste une excellente alternative.
02/06/2014, 11h23
Invité

Un fiddle qui fait du screen scraping avec une requête cross domain :
http://jsfiddle.net/jalbertbowdenii/zxkax/

Bonjour,

Un essai de contribution :

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
 
<HTML>
<HEAD>
</HEAD>
<BODY>
 
<SCRIPT ID=clientEventHandlersJS type="text/javascript">
function XMLHTTPButton_onclick() {
	var DataToSend = "";
	var MyUrl = "http://www.ter-sncf.mobi/station/detail?uic=87444000&name=Caen";
	var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	xmlhttp.Open("GET",MyUrl,false);
	xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xmlhttp.send(DataToSend);
	document.getElementById("Contenu").value = xmlhttp.responseText;
 
	var dmc = document.getElementById("Contenu2");
	dmc.innerHTML = xmlhttp.responseText;
}
</SCRIPT>
 
<INPUT type="button" value="Submit XMLHTTP" id=XMLHTTPButton name=XMLHTTPButton 
LANGUAGE=javascript onclick="return XMLHTTPButton_onclick()">
 
<textarea name="Contenu" id="Contenu" cols="100" rows="10">
</textarea>
<br><br>
<div id="Contenu2">
</div>
</BODY>
</HTML>

Il suffit de traiter le contenu de xmlhttp.responseText

02/06/2014, 19h15
Watilin

D'accord avec pc75 : puisque nous savons que l'environnement est IE8, autant profiter de l'activeX qui permet normalement un accès à tous les domaines depuis la zone locale (si l'admin réseau n'a pas changé les paramètres de sécurité).

Après, selon moi, le moyen le plus simple de parser du code HTML dans IE8, c'est simplement de demander au navigateur de le faire. Après tout, il est fait pour ça. On crée bêtement une <div> avec document.createElement et on injecte le responseText obtenu par Ajax dans son innerHTML.

Le plus fastidieux vient après, car IE8 est très pauvre en méthodes de sélection. La méthode getElementById n'est disponible que sur l'objet document, donc si on veut s'en servir il faut commencer par insérer la <div> dans le DOM de la page, ce qui entraîne tout un tas de traitements pour une majorité d'éléments dont on n'a au final pas besoin : c'est un peu dommage.

Autrement, en analysant empiriquement le html, on se rend compte qu'il n'y a que quelques <ul>, ce sont donc de bonnes candidates pour getElementsByTagName. La <ul> désirée se distingue par le fait que son élément parent est la div portant l'id "id-refresh-1". Une petite boucle for, un test sur parentNode.id, un petit break et c'est bon.
03/06/2014, 11h55
Invité

La solution proposée par pc75 a un problème. Elle fait une requête cross-domain.
Si vous testez le fichier depuis le système de fichier (url = file:///C:/tmp/pc75.html, le domaine d'origine est nul, la requête passe.
Si vous testez le fichier en le déposant sur un serveur (url = http://localhost/pc75.html), le domaine d'origine est localhost et la requête http://www.ter-sncf.mobi/station/det...4000&name=Caen sera considérée comme cross-domain (localhost <> ter-sncf.mobi), et interdite
La solution de pc75 sera valable si l'application est déconnectée.
03/06/2014, 14h41
Watilin

L'appli peut être déployée sous forme de fichier local, ou bien dans la zone intranet ou encore dans la zone « de confiance ». Dans le dernier cas, il y aura une petite négociation avec l'admin info, mais si c'est nécessaire au fonctionnement de l'application, je ne vois pas pourquoi il refuserait. (voir http://msdn.microsoft.com/en-us/libr...9.aspx#xdomain).

Ça sera certainement plus léger, en tout cas, que 2 ou 3 couches de librairies qui ne font pas grand chose de plus, dans le cas présent, qu'un simple proxy fait en 5 lignes de PHP. Car c'est comme ça que YQL permet les requêtes inter-domaine : en passant par un proxy.
03/06/2014, 15h20
Invité

C'est bien YQL qui est utilisé dans le fiddle que j'ai linké.
Mais utiliser un langage qui a une limitation pour justement contourner cette limitation, c'est quand même tordu.
Pourquoi ne pas faire l'application dans un autre langage ?
03/06/2014, 17h21
Watilin

Tu prends le problème à l'envers : la contrainte de dji-why c'est que ses utilisateurs sont limités, ils ne peuvent utiliser que IE8. Alors, autant exploiter les possibilités de l'environnement.
03/06/2014, 19h42
Invité

Pas à l'envers, non. Depuis un autre point de vue.
En quoi la restriction, "les utilisateurs ne peuvent utiliser qu'IE8", implique forcément de faire une application en javascript ?
Il est aussi possible de faire un script dans un langage serveur (python, php, java, peu importe...), qui jouera le rôle du proxy et qui se chargera de faire la requête à la scnf pour restituer une page (horaires.html ?) affichant le résultat de l'extraction des données.

Je cite l'auteur du post :

Pourquoi en JS ? parce que je trouve ce langage simple

Le choix n'est manifestement pas un choix technique, mais plutôt un choix émotionnel (il aime bien ce langage, parce qu'il le trouve simple) ou de circonstances (il connait mieux le javascript qu'un autre langage).
Maintenant, son choix implique d'autres restrictions (le cross-domain est restreint).
A lui de voir s'il choisit une technique supplémentaire pour contourner ce nouvel obstacle avec le même langage ou s'il choisit la version serveur, celle dite du script proxy.

Maintenant, on ne sait pas s'il s'agit d'une simple page informative ou s'il y a d'autres besoins qui nécessitent plus de développement et cela ne change rien vis-à-vis du cross-domain.
04/06/2014, 01h03
SylvainPV

Tant qu'on ne saura pas exactement quel est le besoin et quels moyens sont à disposition, difficile de fournir une réponse pertinente.
04/06/2014, 10h07
dji-why

Citation:

Envoyé par chanyslas

Pas à l'envers, non. Depuis un autre point de vue.
En quoi la restriction, "les utilisateurs ne peuvent utiliser qu'IE8", implique forcément de faire une application en javascript ?
Il est aussi possible de faire un script dans un langage serveur (python, php, java, peu importe...), qui jouera le rôle du proxy et qui se chargera de faire la requête à la scnf pour restituer une page (horaires.html ?) affichant le résultat de l'extraction des données.

Effectivement aucun rapport entre IE8 et le JS, mais impossible pour moi d'installer quoi que ce soit sur la machine, il faut utiliser ce qu'ie8 ou windaube propose DE BASE !

Citation:

Je cite l'auteur du post :

Pourquoi en JS ? parce que je trouve ce langage simple

Le choix n'est manifestement pas un choix technique, mais plutôt un choix émotionnel (il aime bien ce langage, parce qu'il le trouve simple) ou de circonstances (il connait mieux le javascript qu'un autre langage).

Bien vu, c'est un choix d'affection je ne l'aime pas, je le trouve simple mais surement parce que je vois comment grossièrement il fonctionne (cela dit je n'en ai pas lu d'autres) ...

Citation:

Maintenant, son choix implique d'autres restrictions (le cross-domain est restreint).
A lui de voir s'il choisit une technique supplémentaire pour contourner ce nouvel obstacle avec le même langage ou s'il choisit la version serveur, celle dite du script proxy.

Bin le JS s'il pose problème, je suis ouvert à toute proposition, mais je parlais de JS uniquement pour ne pas demander à des développeurs un truc tout prêt mâché et faire mon fainéant ! Mais je suis ouvert à tout autre langage ou solution ! Malheureusement je vais être particulièrement demandeur d'explications dans ce cas !

Citation:

Maintenant, on ne sait pas s'il s'agit d'une simple page informative ou s'il y a d'autres besoins qui nécessitent plus de développement et cela ne change rien vis-à-vis du cross-domain.

Il s'agit tout simplement de reproduire cela : http://www.gares-en-mouvement.com/fr...emps-reel/dep/

Ni plus ni moins un tableau départs, et un arrivée comme dans les gares, pour faciliter le travail de mes collègues qui ont besoins de ces infos !

Merci à tous de vous pencher sur mon problème !
04/06/2014, 10h29
SylvainPV
Un témoignage intéressant : http://horaires-ter-sncf.naholyr.fr/
Citation:
Je n'abandonne pas, et comprends que la solution doit passer par un proxy entre l'application et le site termobile.fr, sous la forme d'un service web, qui me permette de récupérer les mêmes données mais :

De manière compacte (JSON par exemple)
En une seule requête, et sans avoir besoin de cookie

Une fois ces critères réunis, l'application est enfin stabilisée au niveau de sa connexion. De plus le "parsing" du HTML est déportée sur le serveur, ce qui permet d'être bien plus réactif en cas de modification de la mise en page. Sans compter que le webservice peut implémenter un cache de requête ce qui permettra, si plusieurs personnes cherchent des infos simultanement sur la même gare, de ne pas surcharger le serveur.

J'ai fait divers essais avec l'URL de l'exemple et à chaque fois j'obtiens les mêmes trains :
Code:

1 2 3 4 5 http://www.ter-sncf.mobi/station/detail?uic=87444000&name=Caen http://www.ter-sncf.mobi/station/detail?uic=87444000&name=Rennes http://www.ter-sncf.mobi/station/detail?uic=87444000&name=Paris http://www.ter-sncf.mobi/station/detail?uic=87444000&name=Moscou http://www.ter-sncf.mobi/station/detail?uic=87444000&name=la lune
Au final, je ne sais pas à quelle gare ces résultats se rapportent ! Il doit y avoir une histoire de session quelque part.

Vous êtes têtu avec votre JavaScript.
La réponse était déjà dans le premier lien que je vous ai fourni, mais vous ne semblez pas l'avoir vu.
Voici une solution qui vaut ce qu'elle vaut, c'est-à-dire qu'il n'y a aucune garantie que la solution soit pérenne dans le temps.
Considérez cette réponse comme un POC et non comme une méthode définitive pour faire ce que vous voulez, c'est à dire du web scrapping par cross-domain, le tout en JavaScript. Ce que vous demandez n'est pas "normal". Mais c'est "faisable".
Normalement, il faut utiliser une API dédiée qui vous fournira les données sous un format fait pour ça (SOAP, JSON XML, ...) et beaucoup plus facile à traiter que les éléments d'une page web qui peut être modifiée n'importe quand par son auteur.

Fonctionne comme application connectée (http://localhost/poc.html) ou déconnectée (un copier coller du fichier sur le bureau d'un collègue et un double clic devrait lancer l'application, url = file:///C:/tmp/poc.html). Testé sur XP/IE8.
Considérez aussi qu'au vu des modifications appliquées à la méthode ajax de JQuery, toutes les requêtes utilisant cette méthode passeront par YQT.

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
<html>
    <head>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="https://raw.githubusercontent.com/padolsey/jQuery-Plugins/master/cross-domain-ajax/jquery.xdomainajax.js"></script>
        <script type="text/javascript">
            // Fonctions pratiques
            if (!String.prototype.trim){
                String.prototype.trim = function(){
                    return this.replace(/^\s+|\s+$/g, "");
                };
            }
            if (!String.prototype.startsWith){
                String.prototype.startsWith = function(str){
                    return (this.match("^" + str) == str);
                };
            }
            if (typeof console === "undefined" || typeof console.log === "undefined")
                console = {
                    log: function(){
                    }
                };
            // Fonction principale
            function getTimesTable(){
                var urlStart = "http://www.ter-sncf.mobi/station/";
                if (!$("#url").val().toString().startsWith(urlStart)){
                    alert("L'URL doit commencer par :\n" + urlStart);
                    return;
                }
                console.log("start");
                $("#timesTable").empty();
                $.ajax({
                    url: $("#url").val(),
                    type: "get",
                    timeout: 3000, // Il existe un autre délai d'attente, celui de YQT, qui n'est pas paramétré ici
                    // Bien voir que cette fonction se base sur des sélecteurs de documents HTML
                    // dont la structure peut être modifiée sans préavis par l'auteur du service.
                    // Il s'agit d'une solution temporaire en attendant d'utiliser la vraie API du service.
                    success: function(data){
                       // Stocker tout le html reçu du service dans un formulaire JQuery
                       // Afin de pouvoir le manipuler sous forme d'un objet JQuery
                       $form = $("<form>" + data.responseText + "</form>");
                       // Sélecteur de base de l'extraction : Les blocs unitaires d'horaire (de trains)
                       // Ce sélecteur et ceux qui suivent n'ont aucune garantie d'être stable dans le temps (voir plus haut)
                       timeBlockPath = "div#bk-aside-main li.link-list";
                       if ($form.find(timeBlockPath).length === 0){
                           alert("Aucun horaire disponible depuis cette url.");
                           return;
                       }
                       // On itère sur l'ensemble des blocs unitaires d'horaire
                       $.each($form.find(timeBlockPath), function(index, item){
                          // Pour chaque bloc unitaire d'horaire :
                          // L'heure de départ est le texte du premier <span> de classe typo07
                          departureTime = $(item).find("a > span.typo07").eq(0).text().toString().trim();
                          // La destination est le texte du second <span> de classe typo07
                          destination = $(item).find("a > span.typo07").eq(1).text().toString().trim();
                          // L'identifiant du moyen de transport est tout ce qui reste des enfants du <a>
                          // Quand on a supprimé les noeuds non texte, les <br/> et le texte inutile
                          carrierIdentifier = $(item).find("a")
                             .clone()    // Cloner l'élément
                             .children() // Sélectionner tous les noeuds non texte
                             .remove()   // Supprimer tous les noeuds non texte
                             .end()  	// Revenir sur le dernier état dans la pile de transformation
                             .text()     // Convertir en texte
                             .replace(/(\r\n|\n|\r)/gm, "") // Supprimer les <br/> transformés en caractères spéciaux par la méthode text() avec les autres caractères de retour à la ligne éventuels
                             .replace("Destination", "");   // Supprimer le texte restant mais inutile
                           // Ajouter les résultats dans la table
                          tr = $("<tr>");
                          $tr.append($("<td>", {
                             text: departureTime
                          }));
                          $tr.append($("<td>", {
                             text: destination
                          }));
                          $tr.append($("<td>", {
                             text: carrierIdentifier
                          }));
                          $("#timesTable").append($tr);
                             console.log("departureTime = " + departureTime + ", destination = " + destination + ", carrierIdentifier = " + carrierIdentifier);
                          });
                      },
                      error: function(status){
                          alert("request error:" + url);
                      }
                });
            }
        </script>
    </head>
    <body>
        url : <input type="text" id="url" size="75" value="http://www.ter-sncf.mobi/station/detail?uic=87723197&name=Lyon-Part-Dieu">
        <input type="button" value="Lire les horaires de trains" onclick="getTimesTable()"/>
        <table id="timesTable" border="1" cellpadding="5" style="margin-top: 5px"/>
    </body>
</html>

05/06/2014, 12h01
SylvainPV

Qui est têtu avec JavaScript ? Aux dernières nouvelles, Watilin et moi conseillons un script côté serveur et dji-why se dit ouvert à tout autre langage ou solution. C'est toi qui propose une solution JavaScript :mrgreen:
05/06/2014, 15h07
Invité

N'inversez pas les rôles, SVP.
Watilin a voulu gentillement m'expliquer que je voyait le problème "à l'envers" quand j'ai expliqué que le JavaScript n'était pas le plus approprié. Et les réponses qui précèdent ne parlent pas d'un autre langage, vous avez tous chercher à résoudre le problème en JavaScript (ou à l'aide de plugins Firefox, comme GreaseMonkey, pour un problème où l'une des contraintes de base était IE8).
Le têtu de l'histoire c'est l'auteur du post, mais on lui a peut être demandé de faire un truc en mode D&K.
Enfin le problème était intéressant.
Bonjour chez vous.
05/06/2014, 16h07
SylvainPV

Watilin a proposé d'utiliser ActiveX puis un script PHP. Quant à l'auteur :

Citation:

le JS s'il pose problème, je suis ouvert à toute proposition, mais je parlais de JS uniquement pour ne pas demander à des développeurs un truc tout prêt mâché et faire mon fainéant ! Mais je suis ouvert à tout autre langage ou solution !

Je ne suis pas sûr qu'il apprécie être traité comme "le têtu de l'histoire" alors qu'il s'est montré très ouvert.

Je n'ai pas suggéré de passer par un serveur, j'ai simplement souligné que c'est en passant par un serveur que YQL semble contourner par magie la limitation cross-domain.

Je reconnais volontiers que je suis têtu avec JavaScript, mais hey, nous sommes sur le forum JavaScript :roll:
Et je vais même encore plus loin : je suis têtu avec Vanilla JS. J'ai moi aussi fait une PoC. C'est un fichier html local, je l'ai testé avec IE8/XP avec les paramètres de sécurité par défaut.

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang=fr>
<head>
   <meta charset=utf-8>
   <title>Requête Ajax local vers Net avec un ActiveX</title>
   <style>
 
body { font-family: Verdana, sans-serif;
       font-size: 100%; }
 
table { border-collapse: collapse;
        width: 48%;
        display: inline-block;
        margin: 1%;
        background: #0A1E61;
        color: white;
        text-align: center;
        font-size: 70%; }
 
thead  { background: black; }
tr.odd { background: #084B96; }
 
th { font-weight: normal;
     padding: 4px 1em; }
td { padding: 0.7em 1em; }
 
#error { color: red; }
 
   </style>
</head>
<body>
 
<p>
   <label>Gare&nbsp;:
      <input type="text" id="gare" value="Caen">
   </label>
   <button id="bouton">Afficher</button>
</p>
<p id="erreur"></p>
<div id="resultat"></div>
 
<script>
 
var serviceUrl = "http://www.ter-sncf.mobi/station/detail?uic=87444000";
 
var $gare = document.getElementById("gare");
var $bouton = document.getElementById("bouton");
var $erreur = document.getElementById("erreur");
var $resultat = document.getElementById("resultat");
 
$bouton.attachEvent("onclick", function( event ){
   $resultat.innerHTML = "";
   $erreur.innerHTML = "";
   
   var gareParam = "&name=" + $gare.value;
   
   requestAndPrint(serviceUrl + gareParam, "departures");
   requestAndPrint(serviceUrl + gareParam, "arrivals");
});
 
 
function requestAndPrint( url, type ){
   var req = new ActiveXObject('MSXML2.XMLHTTP.3.0');
   req.open("GET", url + "&type=" + type);
   req.onreadystatechange = function( ){
      if (req.readyState < 4) return;
      if (200 !== req.status) {
         $erreur.innerText = "Requête échouée, code = " + req.status;
      } else {
         transform(req.responseText, type);
      }
   };
   req.send(null);
}
 
function transform( html, type ){
   // 1. Injecte le html dans le document pour pouvoir utiliser
   //    getElementById.
   var $div = document.createElement("div");
   $div.style.display = "none";
   $div.innerHTML = html;
   document.body.appendChild($div);
   var $refresh = document.getElementById("id-refresh-1");
   
   // Retire la <div> pour ne pas encombrer la page
   document.body.removeChild($div);
 
   // 2. Prépare une <table> et ses titres de colonnes
   var $table = document.createElement("table");
   $table.className = type;
   var $tbody = document.createElement("tbody");
   $table.appendChild($tbody);
 
   var $headRow = $table.createTHead().insertRow(-1);
   
   var insertTh = function( title ){
      var $th = document.createElement("th");
      $th.innerText = title;
      $headRow.appendChild($th);
   };
   
   insertTh("Heure");
   insertTh(type === "departures" ? "Départ dans" : "Arrivée dans");
   insertTh("Voie");
   insertTh(type === "departures" ? "Destination" : "Provenance");
   insertTh("N°");
   insertTh("Type");
 
   // 3. Parcourt toutes les entrées <li> contenues dans $refresh,
   //    en sautant les « spacers », garde uniquement le contenu texte
   //    et le transforme en ligne de tableau.
   var items = $refresh.getElementsByTagName("li");
   var odd = true;
   for (var i = 0, $li; $li = items[i++]; ) {
      if (/\bspacer\b/i.test($li.className)) continue;
 
      var $tr = parseEntry($li.innerText);
      if (odd) $tr.className = "odd";
      odd = !odd;
      $tbody.appendChild($tr);
   }
 
   $resultat.appendChild($table);
}
 
var rHeure    = /\d{2}h\d{2}/;
var rDecompte = /(?:Départ|Arrivée) dans (\d{1,2}min)/;
var rVoie     = /Voie ([A-Z])/;
var rGare     = /(?:Destination|Provenance) ([A-Z ]+?) N°/;
var rNumero   = /N°(\d+)/;
var rType     = /\d+ ([\wé ]+)$/i;
 
function parseEntry( entry ){
   entry = entry.replace(/\s+/g, " ");
 
   var heure = entry.match(rHeure)[0];
   var gare = entry.match(rGare)[1];
   var numero = entry.match(rNumero)[1];
   var type = entry.match(rType)[1];
 
   var decompteMatch = entry.match(rDecompte);
   var decompte = decompteMatch ? decompteMatch[1] : "";
 
   var voieMatch = entry.match(rVoie);
   var voie = voieMatch ? voieMatch[1] : "";
 
   var $tr = document.createElement("tr");
   $tr.insertCell(-1).innerText = heure;
   $tr.insertCell(-1).innerText = decompte;
   $tr.insertCell(-1).innerText = voie;
   $tr.insertCell(-1).innerText = gare;
   $tr.insertCell(-1).innerText = numero;
   $tr.insertCell(-1).innerText = type;
 
   return $tr;
}
 
</script>
</body>
</html>

Il y a juste ce problème de gare indéterminée dont j'ai parlé hier :aie:

Citation:
Envoyé par Watilin
J'ai fait divers essais avec l'URL de l'exemple et à chaque fois j'obtiens les mêmes trains :
Code:

1 2 3 4 5 http://www.ter-sncf.mobi/station/detail?uic=87444000&name=Caen http://www.ter-sncf.mobi/station/detail?uic=87444000&name=Rennes http://www.ter-sncf.mobi/station/detail?uic=87444000&name=Paris http://www.ter-sncf.mobi/station/detail?uic=87444000&name=Moscou http://www.ter-sncf.mobi/station/detail?uic=87444000&name=la lune
Au final, je ne sais pas à quelle gare ces résultats se rapportent ! Il doit y avoir une histoire de session quelque part.
Citation:

Envoyé par Watilin

Il y a juste ce problème de gare indéterminée dont j'ai parlé hier :aie:

Je dirais plutôt que la gare est déterminée par les paramètres Code ou uic.
Par exemple je reprends Code=87441717 qui provient de :
http://www.ter-sncf.com/Regions/alsa...Thermes-Centre

Avec le uic changé, ça va.
http://www.ter-sncf.mobi/station/detail?uic=87441717
http://www.ter-sncf.mobi/station/detail?uic=87444000

06/06/2014, 09h21
Invité

MyBad dji-why,
Oui, je me suis mal exprimé avec le "têtu". Ce que voulais signifier, c'est que l'ouverture n'en est pas une.
Parce qu'on ne sait pas vers quelle alternative se tourner pour vous répondre.
Malgré tous les appels du pied pour savoir si vous aviez à accès à une technologie serveur, vous n'avez pas répondu clairement.
Quand, vous nous dites être prêt à recevoir la réponse dans un autre langage, vous ne précisez pas lequel.
Vous donner une réponse dans une technologie que vous ne pourrez mettre en œuvre, ce n'est pas vous rendre service.
Vous donner une réponse dans un langage que vous ne comprenez pas, ce n'est pas non plus vous rendre service.
Parce que le jour où on vous demandera de faire évoluer la solution, vous serez coincé.

Finalement votre problème intéresse pas mal de monde, vous aurez plusieurs solutions.