exercice Ajax

Le but de l'exercice est de récupérer les informations sur certaines stations velib, le nombre de vélos et de bornes disponibles.

En entrée, l'utilisateur saisi le numéro de sa station dans un formulaire, puis clique sur "ok" et en AJAX l'interface va interroger le serveur velib pour connaitre :

• Le nom de la station
• L'adresse de la station
• Sa position (long & lat)
• Le nombre de vélos disponibles
• Le nombre de bornes disponibles
• Le nombre de vélo ou bornes en panne

Il faudra utiliser plusieurs outils à votre disposition :

1. Ce code pour créer votre objet effectuant des requêtes

   var httpObj = null;
   if (window.XMLHttpRequest){ //Firefox
    httpObj = new XMLHttpRequest();
   }else if (window.ActiveXObject){ // IE
    httpObj = new ActiveXObject('Microsoft.XMLHTTP');
   } // Sinon ce n'est pas supporté

2. Vous devrez utiliser un proxy pour pouvoir interroger les serveurs distants. Pour celà, il faudra travailler sur un dossier partagé sur ma machine. Accédez à votre fichier en utilisant l'adresse de ma machine. Pour interroger un serveur distant, utiliser l'adresse :httpObj.open('GET','http://adresse_machine/proxy/index.php?url=http://serveur_a_interroger',false);
3. Utilisez cette page HTML pour y ajouter du javascript
4. Au moment où l'utilisateur clique sur le bouton envoyer, interrogez l'adressehttp://www.velib.paris.fr/service/stationdetails/numero_de_stationen passant par le proxy
5. Lancez une fonction à la réception de la réponsehttpObj.onreadystatechange=votrefonction;
6. Le XML ressemblera à ça :

   <station>
    <available>9</available>
    <free>0</free>
    <total>14</total>
    <ticket>0</ticket>
   </station>

7. Pour accéder aux éléments du XML, servez vous du DOM :

   httpObj.responseXML.getElementsByTagName('available')[0].firstChild.nodeValue

8. Ecrivez les infos dans les bonnes parties de la page HTML