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 :
<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> |
Répondre avec citation
Envoyé par Watilin
Partager