|
|
|
|
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) |
|
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.
|
|
|
|
|
|
Quand achetez-vous le plus en ligne ? |
|
|
|
|
|
|
|
|