TUTORIEL CLIENTS WEB 
XMLHttpRequest : des requêtes SQL transparentes grâce à JavaScript
Présentation, exemple à l'appui, de cette technique combinant JavaScript avec des appels de fichiers côté serveur. (06/04/2005)
<< 1. L'objet | 2. Concrètement

Concrètement
Voici une petite application concrète de cette technique. En n'utilisant que quelques fonctionnalités de l'objet, lié à un fichier PHP ouvrant une connexion permanente vers la base MySQL, on peut récupérer un champ spécifique de la base de manière transparente, en tapant simplement l'id de la ligne à lire dans un champ dédié.

Voici le code PHP. Très simple, il ne fait que renvoyer une chaîne séparant les deux valeurs "nom" et "prénom" par une virgule. JavaScript se chargera de décomposer la chaîne.

<?php
$recherche=$_GET['recherche'];

@$db = mysql_pconnect('localhost', 'root', '');
@mysql_select_db('testmovie');

$req = "SELECT FName, LName FROM Actor WHERE ActorID LIKE '".$recherche."';";
$res = mysql_query($req);
$row = mysql_fetch_row($res);
if ($row) {
  echo "$row[0],$row[1]";
  }
?>

Le formulaire utilisé est basique. On y note cependant l'utilisation du gestionnaire d'évènement onkeypress, qui nous permet de réagir dès qu'une touche est pressée dans le champ rapide. Notez bien qu'il faut que son action soit du type que vous attendez. Si nous avions mis action="post", nous n'aurions pu récupérer d'informations avec $_GET.

<form action="get">
  Recherche rapide par ID:
  <input type="text" name="rapide" id="rapide" onkeypress="majActeur();" /><br />
  Nom:
  <input type="text" name="nom" id="nom" /><br />
  Prénom:
  <input type="text" name="prenom" id="prenom" /><br />
</form>

Outre l'appel à getHTTPObject() présenté plus avant, la balise script contient deux fonctions qui gèrent les échanges de données :

function majActeur() {
  var rechRapide = document.getElementById("rapide").value;
  http.open("GET", url + escape(rechRapide), true);
  http.onreadystatechange = handleHttpResponse;
  http.send(null);
  }

majActeur() est appellée par le formulaire HTML, récupère le contenu du champ rapide et le transpmet à l'url suivante :

var url = "recupActeur.php?recherche=";

Le script PHP reçois donc bien un requête de type GET.

Voici la seconde fonction :

function handleHttpResponse() {
  if (http.readyState == 4) {
    results = http.responseText.split(",");
    document.getElementById('prenom').value = results[0];
    document.getElementById('nom').value = results[1];
    }
  }

  Forum

Réagissez dans les forums de JDN Développeurs

Après avoir testé readystate, qui indique que l'objet a terminé la requête, nous récupérons son contenu, que nous plaçons dans les éléments HTML. Tous ceci se fait sans que l'utilisateur n'ait eu une seule fois à recharger la page.

<< 1. L'objet | 2. Concrètement
 
Xavier Borderie, JDN Développeurs
 
Accueil | Haut de page
 
 





Quand achetez-vous le plus en ligne ?
Du lundi au vendredi
Le samedi
Le dimanche

Tous les sondages