AJAXComplétion Ajax
Technique Ajax de complétion automatique
Une complétion automatique désigne l'opération par laquelle Ajax complète une abréviation. C'est une technique d'accélération de frappe.
Cet exercice demande une base de donnée "mabase" avec une table "clients" avec deux champs, "idclient" (type tiny int 10, unsigned, not null, auto_incement, primary key) et "nom" (type varchar 50) et trois fichiers: index.html, mon_ajax.js et data.php.
Liste déroulante (index.html)
<html>
<head>
<script type="text/javascript" src="mon_ajax.js"></script>
</head>
<body>
<form method="post" action="index.html">
<input type="text" id="nomduinput" onkeyup="ajax();" />
<select name="maliste" id="maliste" style="display:none;"></select>
</form>
</body></html>
<html>
<head>
<script type="text/javascript" src="mon_ajax.js"></script>
</head>
<body>
<form method="post" action="index.html">
<input type="text" id="nomduinput" onkeyup="ajax();" />
<select name="maliste" id="maliste" style="display:none;"></select>
</form>
</body></html>
Clavier à dispositif d'affichage miniature
réalisé par la société de design russe, Art. Lebedev Studio
Contenu de mon_ajax.js
function ajax() {
// Création objet avec test pour diff. navigateur
var xhr;
if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }
else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
// création d'un gestionaire d'évènement pour les changements d'état
xhr.onreadystatechange = function() { traitement(xhr); };
if (document.getElementById('nomduinput').value != "") {
// On fait la requete avec la méthode open qui prépare une requête en indiquant
// la méthode, l'URL et la drapeau de synchronisation (ici true pour asynchrone)
xhr.open("GET", "data.php?debutnom="+document.getElementById('nomduinput').value, true);
// On effectue la requête avec la méthode send, éventuellement en envoyant les données
xhr.send(null); // null pour dire de ne pas envoyer de données supplémentaire
}
else { // cache la liste si pas de saisie
document.getElementById("maliste").style.visibility = 'hidden';
}
}
function traitement(xhr)
{
// vérifier l'état de la requête avec la propriété readyState (4 = terminé)
if (xhr.readyState==4) {
var docXML= xhr.responseXML;// obtenir la réponse sous forme d'objet XML (DOM)
var items = docXML.getElementsByTagName("client"); // tous les items de clients
if (items.length > 0) {
// affiche la liste
document.getElementById("maliste").style.visibility = 'visible';
document.getElementById("maliste").style.display = 'inline';
// associe la longeur de la liste à la longeur des items (noeuds xml)
document.getElementById("maliste").length = items.length;
// Remplir la liste avec les valeurs du fichiers XML
for (i=0;i<items.length;i++) {
document.getElementById("maliste").options[i].value = items[i].firstChild.nodeValue;
document.getElementById("maliste").options[i].text = items[i].firstChild.nodeValue;
}
} else {
// cache la liste si pas de réponse
document.getElementById("maliste").style.visibility = 'hidden'; }
}
}
function ajax() {
// Création objet avec test pour diff. navigateur
var xhr;
if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }
else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
// création d'un gestionaire d'évènement pour les changements d'état
xhr.onreadystatechange = function() { traitement(xhr); };
if (document.getElementById('nomduinput').value != "") {
// On fait la requete avec la méthode open qui prépare une requête en indiquant
// la méthode, l'URL et la drapeau de synchronisation (ici true pour asynchrone)
xhr.open("GET", "data.php?debutnom="+document.getElementById('nomduinput').value, true);
// On effectue la requête avec la méthode send, éventuellement en envoyant les données
xhr.send(null); // null pour dire de ne pas envoyer de données supplémentaire
}
else { // cache la liste si pas de saisie
document.getElementById("maliste").style.visibility = 'hidden';
}
}
function traitement(xhr)
{
// vérifier l'état de la requête avec la propriété readyState (4 = terminé)
if (xhr.readyState==4) {
var docXML= xhr.responseXML;// obtenir la réponse sous forme d'objet XML (DOM)
var items = docXML.getElementsByTagName("client"); // tous les items de clients
if (items.length > 0) {
// affiche la liste
document.getElementById("maliste").style.visibility = 'visible';
document.getElementById("maliste").style.display = 'inline';
// associe la longeur de la liste à la longeur des items (noeuds xml)
document.getElementById("maliste").length = items.length;
// Remplir la liste avec les valeurs du fichiers XML
for (i=0;i<items.length;i++) {
document.getElementById("maliste").options[i].value = items[i].firstChild.nodeValue;
document.getElementById("maliste").options[i].text = items[i].firstChild.nodeValue;
}
} else {
// cache la liste si pas de réponse
document.getElementById("maliste").style.visibility = 'hidden'; }
}
}
Contenu de data.php (à utiliser avec une base MySQL)
<?php
header('Content-Type: text/xml');
// header obligatoire car le fichier XML est envoyé en mémoire vive
echo "<?xml version='1.0' encoding='iso-8859-1' ?>\n";
echo "<clients>\n";
$dbhost="localhost";
$dbuser="root";
$dbpass="";
$dblink=mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db("mabase",$dblink);
$requete = "SELECT * FROM clients WHERE nom LIKE '".$_GET["debutnom"]."%' ORDER BY nom";
$resultat = mysql_query($requete,$dblink) or die (mysql_error($dblink));
while ($ligne = mysql_fetch_array($resultat, MYSQL_NUM))
{
echo "<client>" . $ligne[1] . "</client>\n";
}
echo "</clients>";
?>
<?php
header('Content-Type: text/xml');
// header obligatoire car le fichier XML est envoyé en mémoire vive
echo "<?xml version='1.0' encoding='iso-8859-1' ?>\n";
echo "<clients>\n";
$dbhost="localhost";
$dbuser="root";
$dbpass="";
$dblink=mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db("mabase",$dblink);
$requete = "SELECT * FROM clients WHERE nom LIKE '".$_GET["debutnom"]."%' ORDER BY nom";
$resultat = mysql_query($requete,$dblink) or die (mysql_error($dblink));
while ($ligne = mysql_fetch_array($resultat, MYSQL_NUM))
{
echo "<client>" . $ligne[1] . "</client>\n";
}
echo "</clients>";
?>
