AJAX
Propriétés et méthode de l’objet xhr
open(« méthode », »url »,flag):
• Ouvre la connexion avec le serveur.
méthode -> « GET » ou « POST »
url -> l’url à laquelle on va envoyer notre requête.
Si la méthode est GET, on met les paramètres dans l’url.
flag -> true si l’on veut un dialogue asynchrone, sinon, false
setRequestHeader(« nom », »valeur »):
• Assigne une valeur à un header HTTP qui sera envoyé lors de la requête.
• Par exemple, pour un POST :
nom -> « Content-Type«
valeur -> « application/x-www-form-urlencoded »
send(« params »):
• Envoi la requête au serveur.
• Si la méthode est GET, on met null en paramètre.
• Si la méthode est POST, on met les paramètres a envoyer, sous la forme :
« nomparam1=valeur1&nomparam2=valeur2 ».
abort() : Abandonne la requête.
onreadystatechange :
• Ici, on va lui affecter notre fonction java script qui sera exécutée à chaque « changement d’état » de notre objet.
readyState :
• C’est cette propriété qu’on va tester dans le onreadystatechange.
• Elle représente l’état de l’objet et peut prendre plusieurs valeurs :
0 -> Non initialisé.
1 -> Ouverture (open() vient de s’exécuter).
2 -> Envoyé (send() vient de s’exécuter).
3 -> En cours (des données sont en train d’arriver).
4 -> Prêt (toutes les données sont chargées).
status :
• Le code de la réponse du serveur.
200 -> OK.
404 -> Page non trouvée.
…
statusText : Le message associé à status.
responseText : La réponse retournée par le serveur, au format texte.
responseXML: La réponse retournée par le serveur, au format dom XML.
Première exemple:
script.jsp :
Ce script retourne client le texte bonjour ajax suivi d’un nombre aléatoire compris
entre 1 et 100 <%
out.println((int)(Math.random()*100)); %>
Première exemple: index.htm
<html>
<head>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
<script type=’text/JavaScript’>
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer try {
xhr = new ActiveXObject(« Msxml2.XMLHTTP »); }
catch (e) { xhr = new ActiveXObject(« Microsoft.XMLHTTP »); }} else {
// XMLHttpRequest non supporté par le navigateur
alert(« Le navigateur ne supporte pas les objets XMLHTTPRequest… »);
xhr = false; }
return xhr
}
/** * Méthode qui sera appelée sur le click du bouton */ function go(){
var xhr = getXhr()
// On défini ce qu’on va faire quand on aura la réponse xhr.onreadystatechange = function(){
// si on a tout reçu et que le serveur est ok if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById(‘rep’).innerHTML = xhr.responseText;
}}
xhr.open(« GET », »script.jsp »,true);
xhr.send(null);
}
</script>
</head>
<body>
<input type=’button’ value=’Test Ajax’ onclick=’go()’ /> <div id= »rep »> Ici la réponse ajax </div>
</body>
</html>
Application
On considère Une base de données MYSQL qui contient deux tables « auteurs » et « livres ». Un auteur peut créer plusieurs livres. La structure de cette base de données est la suivante
On souhaite créer une application web utilisant la technologie Ajax qui permet de :
Afficher tous les auteurs dans un tableau HTML
En cliquant sur un auteur, afficher tous les livres de cet auteur.
Structure de la base
CREATE TABLE `auteur` ( `id` tinyint(4) NOT NULL auto_increment, `nom` varchar(50) NOT NULL, PRIMARY KEY (`id`));
insert into `auteur` values (1,’Clive Cussler’),(2,’Harlan Coben’),(3,’Franck Herbert’),(4,’Pierre Bordages’);
CREATE TABLE `livre` ( `id` tinyint(4) NOT NULL auto_increment, `titre` varchar(50) NOT NULL, `idAuteur` tinyint(4) default NULL, PRIMARY KEY (`id`)) ;
insert into `livre` values (1,’Odyssee’,1), (2,’Sahara’,1), (3,’Dragon’,1),(4,’Une chance de trop’,2),(5,’Ne le dis a personne’,2),(6,’Disparu à jamais’,2),(7,’Dune’,3),(8,’La barriere de santaroga’,3),(9,’Les guerriers du silence’,4), (10,’La citadelle hyponeros’,4),(11,’Terra mater’,4);
auteurs.php <?
$conn=mysql_connect(« localhost », »root », » ») or die(mysql_error()); mysql_select_db(« db_aj »,$conn)or die(mysql_error()); $req= »select * from auteur »;
$rsAut=mysql_query($req)or die(mysql_error()); ?>
<html><body><form>
Auteur: <select name= »idAuteur » id= »idAuteur » onChange= »go() »> <option value= »-1″>Aucun</option>
<? while($aut=mysql_fetch_assoc($rsAut)){ ?>
<option value= »<? echo $aut[‘id’]?> »><? echo $aut[‘nom’]?></option> <?}?>
</select>
<div id= »livre » style= »display:inline »>
Livres:<select name= »idLivre » id= »idLivre »>
<option value= »-1″>Choisir un auteur</option>
</select>
</div>
</form>
</body>
<head>
<title>Listes liées Ajax</title> <script type= »text/javascript »> function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer try {
xhr = new ActiveXObject(« Msxml2.XMLHTTP »); }
catch (e) {xhr = new ActiveXObject(« Microsoft.XMLHTTP »); }}
else {
// XMLHttpRequest non supporté par le navigateur alert(« Le navigateur ne supporte pas les objets
XMLHTTPRequest… »);
xhr = false; }
return xhr;
}
function go(){
var xhr=getXhr();
// On défini ce qu’on va faire quand on aura la réponse xhr.onreadystatechange=function(){
// si on a tout reçu et que le serveur est ok if((xhr.readyState==4)&&(xhr.status==200)){ lesLivres=xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste document.getElementById(‘livre’).innerHTML=lesLivres;
}
}
// Ici on va voir comment faire une requête post xhr.open(« POST », »ajaxLivres.php »,true); xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);
// on récupère l’objet liste des auteurs sel=document.getElementById(« idAuteur »); idAuteur=sel.options[sel.selectedIndex].value; xhr.send(« idauteur= »+idAuteur);
}
</script>
</head></html>
Télécharger le cours complet
