AJAX pour les Nuls
AJAX : asynchronous JavaScript and XML
Un programme qui lance une requête a deux solutions pour gérer la situation :
- Il envoie la demande et se bloque en attendant la réponse. Dans ce cas la requête est dite synchrone.
- Il envoie la demande et continue son exécution. Il traitera la réponse quand elle arrivera. Dans ce cas la requête est dite asynchrone.
Ajax, en utilisant des requêtes asynchrones, permet de modifier partiellement la page affichée par le navigateur sans avoir à la recharger complètement.
Ajax permet de :
- diminuer les temps de latence ;
- augmenter la réactivité de l’application Web;
- éviter le rechargement de la page entière.
Dans le cas pratique décrit ci-dessous, un script (écrit en javascript) appelle une page PHP qui va interroger une base de données MySQL. Le résultat de la requête va remplacer le contenu d’une div.
Au centre du dispositif, l’objet XMLHttpRequest
Code pour créer l’objet (désolé pour l’indentation) :
<script type= »text/javascript »>
function getXmlHttpRequest() {
if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
else if (window.ActiveXObject) {
try { xhr = new ActiveXObject(‘Msxml2.XMLHTTP’); }
catch (e) { xhr = new ActiveXObject(‘Microsoft.XMLHTTP’); }
}
else {
alert(« Votre navigateur ne supporte pas l’objet XMLHttpRequest »);
xhr = false;
}
}
</script>
Le script de la fonction asynchrone
Appelle la page affiche_liste_villes.php lorsque l’on choisit un département dans une liste déroulante.
<script type= »text/javascript »>
function asynchrone_dept() {
var s1 = document.getElementById(« liste_dept »);
var data = null;
getXmlHttpRequest(); //Instanciation grâce au browser
xhr.open(‘POST’, ‘affiche_liste_villes.php’, true); //On ouvre une requêtre asynchrone : ‘true’
xhr.onreadystatechange = function() { //Fonction appelée quand la requête change d’état
if ( xhr.readyState == 4 ) //Si la requête est terminée
if ( xhr.status == 200 ) { //Si la réponse ne contient pas d’erreur
document.getElementById(« liste_villes »).innerHTML = xhr.responseText;
}
else //Erreur
document.getElementById(« liste_villes »).innerHTML = ‘Erreur serveur !’;
}
xhr.setRequestHeader(« Content-type », « application/x-www-form-urlencoded »); //On envoie la requête
data= »departement= »+s1.value;
xhr.send(data);
}
</script>
Le script PHP de la page affiche_liste_villes.php
<?php
//Connection à la base de données
$connect=mysqli_connect(« $mysqlserveur » , « $mysqlloggin » , « $mysqlpassword », « $mysqlmaindb ») or die(« connection impossible »);$departement=$_POST[« departement »];
$req=mysqli_query($connect, »select * from villes where dept=$departement »);
while ($row = mysqli_fetch_object($req))
{
echo $row->libelle. »<br> »;
}
?>
Le code de la page principale
<?php
//Connection à la base de données
$connect=mysqli_connect(« $mysqlserveur » , « $mysqlloggin » , « $mysqlpassword », « $mysqlmaindb ») or die(« connection impossible »);
?><!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.org/1999/xhtml »>
<head>
<meta http-equiv= »Content-Type » content= »text/html; charset=ISO-8859-1″ />
<title>Liste des communes</title>
<script type= »text/javascript »>
function getXmlHttpRequest() { … }
function asynchrone_dept() { … }
</script>
</head>
<body>
<h1>Liste des communes</h1>
<p><b>Afficher les communes du département</b> <select name=’liste_dept’ id=’liste_dept’ onchange=’asynchrone_dept()’>
<option value=’0′>Tous les départements</option>
<?php
$dept=mysqli_query($connect, »select * from lieux order by id »);
while ($row = mysqli_fetch_object($dept))
if (isset($liste_dept) && $liste_dept==$row->id)
echo « <option value=$row->id selected>$row->libelle</option> »;
else
echo « <option value=$row->id>$row->libelle</option> »;
?></select></p>
<div id= »liste_villes »></div>
</body></html>