Ajax et Json

Exemple, lire les données obtenues par la page : http://api.openweathermap.org/data/2.5/weather?q=Paris,FR

Donne :

{"coord":
 {"lon":2.34,"lat":48.86},
 "sys":{"message":0.0104,"country":"France","sunrise":1400126880,"sunset":1400181958},
 "weather":[{"id":800,"main":"Clear","description":"Sky is Clear","icon":"01d"}],
 "base":"cmc stations",
 "main":
 {"temp":289.55,"pressure":1033,"temp_min":288.71,"temp_max":290.37,"humidity":53},
 "wind":
 {"speed":1.54,"gust":3.6,"deg":31},
 "clouds":
 {"all":0},
 "dt":1400167185,
 "id":2995861,
 "name":"Paris",
 "cod":200}

Pour obtenir le nom de la ville, on utilise le code javascript :

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
 <html>  
  <head>  
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">  
  <title>Affiche météo</title>  
 </head>  
 <script>  
 function meteo()  
 {var request = new XMLHttpRequest();  
  request.onreadystatechange = function()  
  {if (this.readyState == 4) {  
   if (this.status == 200) {  
     if (this.responseText != null) {  
       response=this.responseText;  
       var json = JSON.parse(response);  
       var location = json.name;  
       alert("-->"+location+"<--");  
             }}}}  
    request.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=Paris,fr", false);  
    request.send(null);}     
 </script>  
 </script>  
 <body onLoad="meteo();">  
 </body>  
 </html>  

Le code précédent ouvre une fenêtre affichant « –>Paris<– »

Pour des données imbriquées : var pays = json.sys.country; Donne « –>France<– »

Pour des données de type tableaux (attention commence à l’index 0) : var ciel = json.weather[0].description; Donne « –>Sky is clear<– »

Pour les données numériques : var vent = json.wind.speed; Donne « –>1.54<– »

Parfois des conversions sont nécessaires (température) :  var temperature = Math.round(json.main.temp – 273.15); Donne « –>16.4 °C<– »

Une vérification dans google maps : Tapez dans la fenêtre de recherche 48.86, 2.34 (Latitude / Longitude)

Latitude (cordonnée verticales par rapport aux pôle, elle varie entre la valeur 0° à l’équateur et 90° aux pôles) et Longitude (cordonnée horizontale Tous les points de même longitude appartiennent à une ligne épousant la courbure terrestre, coupant l’équateur à angle droit et reliant le pôle Nord au pôle Sud. Cette ligne est appelée « méridien ». À la différence de la latitude (position nordsud) qui bénéficie de l’équateur et des pôles comme références, aucune référence naturelle n’existe pour la longitude. La longitude, généralement notée λ, est donc une mesure angulaire sur 360° par rapport à un méridien de référence, avec une étendue de -180° (180°) Ouest à +180° (-180°) Est. Le méridien 0° est le méridien de Greenwich.)

Autre exemple de lecture de données en base MySql et restitution en JSON :

 <?php  
 //-- Récupération de toutes les valeurs d'une table dans un tableau JSON  
 $dbhost = 'xxx.com';   
 $dbuser = 'xxxxx';      
 $dbpass = 'xxxx';  
 $dbbase = 'xxxx';   
 $dbtable = 'contacts';    
 //-- Connection à la base  
 $conn = mysql_connect($dbhost, $dbuser, $dbpass);  
 if(! $conn )  
 {  
  die('Could not connect: ' . mysql_error());  
 }else  
 {  //-- Sélection des lignes  
   $data_points = array();  
   $sql="SELECT * FROM ".$dbtable;  
   mysql_select_db($dbbase);  
   $result = mysql_query( $sql, $conn );  
   //-- Lecture des lignes  
   while($row = mysql_fetch_array($result))  
   {      
    $point = array("contact" => $row['nom'] , "statut" => $row['statut']);     
    array_push($data_points, $point);      
   }  
   //-- Restitution du Json
   //-- exemple [{"contact":"porte_entree","statut":"ON"},{"contact":"portail","statut":"ON"}]  
   echo json_encode($data_points);  
 }  
 mysql_close($conn);  
 ?>  

Affichage des données à l’écran :

 <html><head>  
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">  
  <title>Affichage table</title>  
 </head>  
  <body>  
       <div id="id01"></div>  
 </body>  
 <script>  
 var xmlhttp = new XMLHttpRequest();  
 var url = "litcontacts.php";  
 xmlhttp.onreadystatechange = function() {  
   if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
     var myArr = JSON.parse(xmlhttp.responseText);  
     myFunction(myArr);  
   }  
 }  
 xmlhttp.open("GET", url, true);  
 xmlhttp.send();  
 function myFunction(arr) {  
   var out = "";  
   var i;  
   for(i = 0; i < arr.length; i++) {  
     out += arr[i].contact + ':' +   
         arr[i].statut + '<br>';  
   }  
   document.getElementById("id01").innerHTML = out;  
 }    
 </script>  
 </html>  

 

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Articles récents
Commentaires récents
fatima sur Bienvenue !
AdminDroid sur Bienvenue !
fatima sur Bienvenue !
Archives
Catégories
%d blogueurs aiment cette page :