Cette techique permet le dialogue asynchrone entre le navigateur et le serveur WEB .
Il est possible d’interroger la base de données sur le serveur suite à une requête du client sur le navigateur et d’en afficher le résultat en modifiiant dynamiquement le DOM et ce sans que la page soit rechargée.
Pendant que le serveur execute la demande, le navigateur peut continuer d’executer son programme sans avoir à attendre la réponse du serveur (traitement asynchrone).

Le support d’Ajax est le javascript, Jquery nous permet grâce aux commandes jQuery.post() et jQuery.ajax(), d’effectuer simplement des appels ajax.

Exemple d’utilisation d’un Appel Ajax / Javascript

Exemple bidon ci dessous qui permet, en cliquant sur le nom d’un élève, d’afficher dans le titre h1, son nom qu’on est allé chercher dans la base de données.

Pour ce faire créez trois fichier :

• 1 fichier javascript : monfichier.js
• 1 fichier qui renverra les résultats des appels ajax : monfichier-ajax.php
• 1 fichier d’affichage php : monfichier.php

Exemple :

monfichier.php contient le code HTML ici un titre vide et deux paragraphes

<h1 id="prenom_eleve"> </h1>
<p class="eleve"> Elève DUPONT  </p>
<p class="eleve"> Elève BARBIER </p>

Envoi des données au serveur via $.ajax, chargement du fichier externe 

monfichier.js qui contient l’événement click surle nom de l’élève ainsi que l’appel $.ajax

$( ".eleve" ).click(function(){
    $.ajax({
          // chargement du fichier externe monfichier-ajax.php 
          url      : "monfichier-ajax.php",
          // Passage des données au fichier externe (ici le nom cliqué)  
          data     : {NomEleve: $(this).html()},
          cache    : false,
          dataType : "json",
          error    : function(request, error) { // Info Debuggage si erreur         
                       alert("Erreur : responseText: "+request.responseText);
                     },
          success  : function(data) {  
                       // Informe l'utilisateur que l'opération est terminé et renvoie le résultat
                       alert(data.PrenomEleve);  
                       // J'écris le résultat prénom de l'élève dans le h1
                       $(#prenom_eleve).html(data.PrenomEleve);
                     }       
     });     
});

Fichier externe chargé par la requête Ajax

monfichier-ajax.php est chargé par la requête ajax. Ce fichier récupère les données passés dans « data » grâce à la méthode $_GET et peut faire recherche en Base de données dont le résultat va être écrit dans le fichier sous forme d’un objet JSON .

Avertissement :
Attention ce fichier ne doit contenir que l’objet JSON contenant les données de retour. Aucun texte,  retour charriot … ne doivent être insérés sous peine de déclencher un message d’erreur.

<?php
 // Accès à la base de données 
  $serveur     = "monserveur.com";
  $utilisateur = "dbxxxxxx";
  $motDePasse  = "mon_mot_de_passe_BDD";
  $base        = "dbxxxxxxxx";
  mysql_connect($serveur, $utilisateur, $motDePasse);
  mysql_select_db($base) or die("Base de données inactive. ");

  // Récupération du paramètre NomEleve passé dans la requête ajax dans mon fichier.js
  $NomEleve=$_GET['NomEleve'];

  // Préparation de la requête de recherche en BDD
  $sql = "SELECT prenom FROM eleves WHERE nom=".$NomEleve; 
  $req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());

  //exemple bidon on cherche le prénom de l'élève de nom donné
  $PrenomEleve= mysql_fetch_object($req)->prenom; 

  // Ecriture de l'objet JSON contenant les infos qui vont être renvoyées
  header('Content-type: application/json');   
   ?>
   {
      "PrenomEleve": "<?php echo $PrenomEleve;?>" //Attention à ne pas mettre de virgule
   }
  <?php                                                     
   exit(0);
   mysql_close();
?>

Avertissement :
Veillez à ne jamais rajouter de virgule à la fin de la dernière propriété d’un objet JSON (erreur typique !!)
Ca passe  sous Mozilla mais pas sous Chrome ou IE !

Grossières estimations :

• Une image pèse entre quelques ko et quelques Mo.
• Un film pèse entre plusieurs centaines de Mo et quelques Go

Formulaire de conversion d’octets

A noter que j’ai utilisé le plugin JQuery joliSelect pour styliser l’élément HTML Select.

Fichier form-octet.html :

Conversion d'octets : 
<form method="POST" action="">
  <input id="valeur_octet" type="text"/>
  <select id="unite_octet">
     <option value="1" >o</option>
     <option value="2" selected="selected">Ko</option>
     <option value="3">Mo</option>
     <option value="4">Go</option>    
  </select>
  <div id="calcul_octet">Calculer</div>
  <div id="resultat"></div>
</form>

Code Javascript :

<script type="text/javascript">
$(document).ready( function () {
$("#calcul_octet").click(function() {
   $.ajax({
      url      : "octet.php",    
      data     : {valeur_octet : $("#valeur_octet").val(), unite_octet : $("#unite_octet").val()},
      cache    : false,
      dataType : "json",
    error : function(request, error) { // Info Debuggage si erreur        
   alert("Erreur : responseText: "+request.responseText);
      },
      success: function(data) {  
           if (data.valeur_o > 0)     
             $("#resultat").html(data.valeur_o + ' octet(s) <br/> '+
                                           data.valeur_ko + ' ko <br/> '+
                                           data.valeur_Mo + ' Mo <br/> '+
data.valeur_Go + ' Go <br/> ' );
          
        }
     });
  });
  });
</script>

Code PHP (octet.php) :

  if (isset($_REQUEST['valeur_octet'])){
    $valeur=$_REQUEST['valeur_octet'];
  }else $valeur=0;
  $unite= $_REQUEST['unite_octet'];
   $result_o  ='';
   $result_Ko ='';
   $result_Mo =''; 
   $result_Go ='';
  switch ($unite)
{
    case 1:
   $result_o   = $valeur;  
      $result_Ko = 1/bcpow(2, 10)  * $valeur;
   $result_Mo = 1/bcpow(2, 20) * $valeur;
      $result_Go = 1/bcpow(2, 30) * $valeur;
   break;
    case 2:
      $result_o   = bcpow(2, 10) * $valeur;
      $result_Ko = $valeur;
   $result_Mo = 1/bcpow(2, 10) * $valeur;
      $result_Go = 1/bcpow(2, 20) * $valeur;
      break;
    case 3:
      $result_o   = bcpow(2, 20) * $valeur;
      $result_Ko = bcpow(2, 10) * $valeur;
   $result_Mo = $valeur;
      $result_Go = 1/bcpow(2, 10) * $valeur;
      break;
case 4:
      $result_o   = bcpow(2, 30) * $valeur;
      $result_Ko =  bcpow(2, 20) * $valeur;
   $result_Mo =  bcpow(2, 10) * $valeur;
      $result_Go = $valeur;
      break;
       default: ;
        break;
}

  header('Content-type: application/json');
  ?>
  {
      "valeur_o": "<?php echo $result_o;?>",
      "valeur_ko": "<?php echo $result_Ko;?>",
   "valeur_Mo": "<?php echo $result_Mo;?>",
   "valeur_Go": "<?php echo $result_Go;?>"
  }
  <?php
exit(0);

Voici un script PHP / HTML / Javascript pour convertir un montant donné en Dollars ou en Euros en montant Bitcoins au taux de conversion en temps réel.
Le calcul se fait en allant interroger l’URL officielle https://blockchain.info/ de calcul du taux de conversion bitcoin.

Déclaration du formulaire HTML de conversion de Bitcoins

Fichier bitcoin.html :

Amount in dollars : <input id="montant_dol" type="text"/>$
<div id="calcul_dol">Calculate in Bitcoins</div>
<div id="montant_bit_dol"></div>

Montant en euros : <input id="montant_eur" type="text"/>€
<div id="calcul_eur">Calculer le montant en Bitcoin</div>
<div id="montant_bit_eur"></div>

Partie Javascript – Demande de conversion du montant saisi en Bitcoin

Envoi au serveur du montant Dollars et Euros remplis dans le formulaire.
Récupération du montant converti par le serveur sous format JSON. Le processus se déroule sans rechargement de la page grâce au protocole AJAX

Fichier bitcoin.js :

<script type="text/javascript">
$(document).ready( function () {
$("#calcul_dol,#calcul_eur").click(function() {
   $.ajax({
      url      : "bitcoin-ajax.php",    
      data     : {montant_dol : $("#montant_dol").val(), montant_eur : $("#montant_eur").val()},
      cache    : false,
      dataType : "json",
      error    : function(request, error) { // Info Debuggage si erreur     
                   alert("Erreur : responseText: "+request.responseText);
                 },
      success  : function(data) {  
           if (data.montant_bit_dol > 0)     
             $("#montant_bit_dol").html($("#montant_dol").val()+ '$ =  '+data.montant_bit_dol+' Bitcoins');
            if (data.montant_bit_eur > 0)     
             $("#montant_bit_eur").html($("#montant_eur").val()+ '€ =  '+data.montant_bit_eur+' Bitcoins');    
        }
     });
    });
})
</script>

Partie Serveur PHP – Conversion en Bitcoin en interrogeant blockchain.info

Ce fichier doit contenir uniquement les données de retour en format JSON et ne rien afficher d’autre (voir mémo sur les requêtes AJAX en JQuery). bitcoin-ajax.php récupère  les informations de montant en Dollars et en Euros envoyées par le navigateur et interroge le site blockchain.info avec les paramètres montant (value) et devise (currency) qui convertira ces valeurs en montant de Bitcoin au taux de conversion en temps réel.
En sortie de fichier, on affiche sous format JSON les montants Bitcoin convertis qui vont être reçus par la requête success  de la fonction $.ajax du fichier bitcoin.js

Fichier bitcoin-ajax.php :

<?php
  $root    = "https://blockchain.info/"; 
  if (isset($_REQUEST['montant_dol'])){
    $price_in_usd=$_REQUEST['montant_dol'];
  }else $price_in_usd=0;
  $price_in_btc = file_get_contents($root . "tobtc?currency=USD&value=" . intval($price_in_usd));
 
  if (isset($_REQUEST['montant_eur'])){
    $price_in_eur=$_REQUEST['montant_eur'];
  }else $price_in_eur=0;
  $prix_en_btc = file_get_contents($root . "tobtc?currency=EUR&value=" . intval($price_in_eur));
  header('Content-type: application/json');
  ?>
  {
      "montant_bit_dol": "<?php echo $price_in_btc;?>",
      "montant_bit_eur": "<?php echo $prix_en_btc;?>"
  }
  <?php
exit(0);
?>

• numérique
• les chaînes de caractères
• les booleans
• les tableaus
• les objets
• l'objet null.

La fonction suivante vous permet de vérifier la validité d'une chaine JSON :

if (/^[],:{}s]*$/.test(text.replace(/["/bfnrtu]/g, '@').
     replace(/"[^"nr]*"|true|false|null|-?d+(?:.d*)?(?:[eE][+-]?d+)?/g, ']').
     replace(/(?:^|:|,)(?:s*[)+/g, ''))) 
{
    alert ('format JSON correct');
   }else{
     alert ('format JSON INCORRECT !');
}