ajax
L'objet XMLHttpRequest (ajax)
Prêt requis : bien connaitre le JavaScript et PHP
Vous avez surement remarqué que lorsque l’on utilise PHP on est obliger de recharger la page ce qui nous remet nos variable par défaut et la barre de navigation au tout en haut
(Sauf avec les $_SESSSION ou cookies en PHP).
Ajax nous permet de ne plus recharger entièrement la page mais seulement une petite partie de cette page.
Ainsi nous pourrons changer l’affichage d’une balise div ou autre et exécuter un script PHP sans recharger entièrement la page, de plus si le traitement PHP est long on peut se permettre d’afficher un message a l’utilisateur pendant le traitement PHP.
Cette technique ce révèle indispensable pour le développement d’un tchat qui nous permet de faire une mise à jour en temps réel des événements survenus récemment.
Pour info Ajax est l’acronyme d’Asynchronous Javascript And XML
Techniquement le principe est d’utiliser des évènements JavaScript pour appeler des fonctions JavaScript, dans la fonction appelée on utilise l’objet XMLHttpRequest, celui-ci à ces propres fonctions permettant de communiquer avec le serveur
Pour internet explorer c’est comme d’habitude légèrement différent, il n’utilise pas XMLHttpRequest mais ActiveXObject, et pour ces fonctions sa ne change pas de XMLHttpRequest.
Sommaire
Les Différentes fonctions (ou méthodes) que l’on abordera seront :
- open
- readyState avec onreadystatechange
- send
- responseText
Comme je disais plus haut ces fonctions appartiennes à l’objet XMLHttpRequest
(Pour les navigateurs qui n’appartiennent pas à microsoft)
ou à ActiveXObject
(pour microsoft (IE) )
En objet on ne parle pas de fonctions mais de méthodes.
Astuce
Comment faire fonctionner XMLHttpRequest en même temps qu’ActiveXObject pour permettre que le code fonctionne sur tous les navigateurs ?
Il suffit de créer une fonction qui ce chargera de vérifier le navigateur pour nous donner l’objet
C’est avec cet objet que l’ont vas utiliser les méthodes dites plus haut.
Voici la fonction en question :
function getXhr(){
var xhr = null;
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 les objets XMLHTTPRequest...");
xhr = false;
}
return xhr ;
}
var objetAjax = getXhr()
Il y a plus qu’à utiliser correctement l’objet avec les différentes méthodes que je vais vous montrer pour que ça fonctionne
La méthode open
Elle sert à exécuter une page ou script en PHP
objetAjax.open("GET",page,true);
objetAjax.send(null);
La méthode readyState
Elle sert à vérifier où en n’est l’état d’avancement du script PHP
Pour déclencher la fonction qui inclut la vérification d’état (readyState) il faut la charger dans l’événement onreadystatechange qui opère à chaque changement d’état
Cela pourrait se comparer avec les évènements déclencheurs onMouseOver,
onload , onMouseMove ect…
Par exemple si on n’arrive pas à l’état 4 on ne pourra pas changer l’affichage générer par le traitement PHP car il n’est pas encore fini.
C’est aussi grâce à l’état que nous pouvons afficher un message pour que l’utilisateur patiente.
Exemple :
objetAjax.onreadystatechange = function()
{
if(objetAjax.readyState == 4 && objetAjax.status == 200)
{
//code javascript genre innerHTML
// avec la methode responseText
//si il y a besoin de changer l’affichage
}else if(objetAjax.readyState < 4 )
{
//code javascript genre innerHTML
// avec la chaine de caractère
//Pour informer l’utilisateur que le traitement est en cour
}
}
La méthode responseText
Elle renvois ce que l’affichage de notre page de traitement php a générer
avec les echo. Cette méthode est à mettre dans innerHTML ou autre code qui fait le même genre d’effet de remplacement.
Exemple : pas besoin d’exemple car vous devez connaitre ce qu’est innerHTML en JavaScript
à placer dans le code un juste au-dessus
La méthode setRequestHeader
Dans notre cas elle nous permet d’envoyer des variables
par la méthode send.
Exemple :
// page a exécuter
objetAjax.open("POST",page,true);
//je ne connais pas les détails mais on en a besoin pour send
objetAjax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//envois de la variable $_POST[‘message’] sur la page a executer
objetAjax.send("message="+message);
La méthode send
Elle permet d’envoyer des variables post sur la page de traitement PHP
La syntaxe est de la même manière que les variables get affiché dans
l’url
Exemple :
objetAjax.send("prenom=damien&nom=dupond");
Voici le Code source allant droit au but:
<!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>
<title>test ajax en Objet Javascript</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<SCRIPT LANGUAGE="Javascript" >
function getXhr() // Fonction permettant de récupérer l'objet ajax suivant le navigateur
{ //Vous n'êtes pas obliger de chercher à comprendre comment il fonctionne
// pour l'instant
var objet = null;
if(window.XMLHttpRequest){ // Firefox et autres
objet = new XMLHttpRequest();
}else if(window.ActiveXObject) // Internet Explorer
{
try {
objet = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
objet = new ActiveXObject("Microsoft.XMLHTTP");
}
}else
{ // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
objet = false;
}
return objet;
}
/*****************************************************
* Fonction ajax à comprendre, elle sera déclencher *
* au clic sur le bouton *
******************************************************/
function action()
{
var objet = getXhr(); // récupère l'objet suivant le navigateur utiliser
objet.onreadystatechange = function() // fonction a déclencher l'ors du clic sur le bouton
{
// VERIFIE L'etat d'avancement du traitment PHP
// Si traitement fini, afficher les echo du fichier traitement.php {
// affichage des echo dans la div
document.getElementById("div").innerHTML= objet.responseText;
// Si le traitement n'est pas fini alors je dis à l'utilisateur de patienter
{
document.getElementById("div").innerHTML= "En cour de traitement Veuillez Patienter...";
}
}
objet.open("GET","traitement.php",true); // renseigne le fichier php à traiter
objet.send(null); // NULL pour dire qu'on a pas besoin de transmettre des variables au traitement PHP
}
</SCRIPT>
</head>
<body>
<p id="div">La page vien d'etre chager</p>
<input type="button" onclick="action();" value="Faire un test" />
</body>
</html>
Téléchargement du dossier a l'adresse:
http:www.dream3d-informatique.fr/telechargements/exemple_ajax_brut.zip
Evolution sous forme d'objet
Mise en place de ajax découper en plusieurs fichier et simplifier sous form d'objet. J'ai repris le tout et je l'ai appliqué en objet javascript
Voici mon exemple complet avec 3 fichier diffèrent a enregistrer + le frameworks JavaScript jquery à ajouter:
1) ajouter le fichier jquery.js au dossier
2) index.php qui va être notre page de test
3) objetAjax qui va être notre fichier renfermant le code JavaScript simplifiant le ajax sous forme d'objet
4) script PHP a exécuter
Créer un dossier dans wamp server
1) ajouter le fichier jquery.js au dossier
2) créer un fichier nommé index.php
<!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>
<title>test ajax en Objet Javascript</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<SCRIPT SRC="jquery.js" ></SCRIPT>
<SCRIPT SRC="objetAjax.js" ></SCRIPT>
<SCRIPT LANGUAGE="Javascript" >
var objetTest = new ajaxObj("traitement.php", '#div');
objetTest.setPatienter("En cour de traitement Veuillez Patienter...");
</SCRIPT>
</head>
<body>
<p id="div">La page vien d'etre chager</p>
<input type="button" onclick="objetTest.traitement();" value="Faire un test" />
</body>
</html>
3) Regarder bien ce code source JavaScript reprenant les lignes ajax que j'ai déjà expliquer au début
Créer un fichier txt, nomer le objetAjax.js
Enregistrer ceci dedans:
{
var objet = null;
if(window.XMLHttpRequest){ // Firefox et autres
objet = new XMLHttpRequest();
}else if(window.ActiveXObject) // Internet Explorer
{
try {
objet = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
objet = new ActiveXObject("Microsoft.XMLHTTP");
}
}else
{ // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
objet = false;
}
return objet;
}
function ajaxObj(page1, div1)
{
var page = page1;
var div = div1;
var PatienterAff = "";
var objet = getXhr()
var message = "";
this.traitement = function( message )
{
objet.onreadystatechange = function()
{
if(objet.readyState == 4 && objet.status == 200)
{
$(div).html(objet.responseText);
}else if(objet.readyState < 4 )
{
if( PatienterAff != "NULL")
{
$(div).html(PatienterAff);
}else
{
}
}
}
objet.open("POST",page,true);
objet.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
if( message != "")
{
objet.open("POST",page,true);
objet.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
objet.send("message="+message);
}else
{
objet.open("GET",page,true);
objet.send(null);
}
}
{
PatienterAff = chaine;
}
}
4) pour faire simple le fichier php fera un echo "traitement fini" mais rien ne vous empêche de changer ce script.
Pour simuler un traitement long à effectuer j'ai retardé de 3 secondes avec la fonction php sleep.
Créer un fichier txt et renommer le en traitement.php
<?php
sleep(3);
echo "Traitement fini";
?>
Téléchargement du dossier a l'adresse:
http:www.dream3d-informatique.fr/telechargements/exemple_ajax_objet.zip
Voilà vous êtes armé pour débuter en l’ajax et l'utiliser !