Vous n'êtes pas connecté - 0 membre connecté
Tutoriaux
PHP
Formulaire co...
Formulaire contact
Auteur : Geoffroy
Posté le 03 05 2007 à 00h28
Vu 47398 fois
[PHP5] Filtra...
[PHP5] Filtrage des données, chemin du succès !
Auteur : Phoenix
Posté le 03 04 2007 à 02h03
Vu 10318 fois
Introduction ...
Introduction AJAX/PHP
Auteur : McFly
Posté le 30 07 2006 à 13h37
Vu 27408 fois
Détail du tutorial
PHP > Introduction AJAX/PHP
Difficulté : facile
Tutorial en 5 étapes
Posté le 30 07 2006 à 13h37

Si j'avais ose j'aurais intitulé ce tutoriel L'AJAX demystifié!! ou l'AJAX nettoie le Web mais finalement non.

Ceci n'est donc qu'une introduction à l'AJAX et vous servira de base pour faire des applications complexes par la suite.
McFly - Modérateur - www
Introduction
 Tout le monde a entendu parlé d'AJAX, certains savent un peu ce que c'est, d'autres maitrisent et pour d'autres c'est une nouvelle technologie compliquée.
Que nenni! Ce n'est que du réchauffé: Javascript et XML (pour faire simple).
Pour les Flasheurs, ca correspond à l'objet LoadVars.

Avec AJAX on peut appeller un script côté serveur sans recharger toute la page et c'est par conséquent très rapide.

Pour ne pas réinventer la roue, on va se servir des fonctions existantes et qui marchent.
Je ne saurais que vous conseiller d'aller faire un tour sur le site du W3 Schools et surtout la partie consacrée à AJAX.

Il faut d'abord créer l'objet qui va exécuter la requête HTTP et c'est la fonction GetXmlHttpObject qui va le faire.

Cette fonction marche aussi bien sous Internet Explorer que sous Firefox.
Si le navigateur ne supporte pas les requêtes HTTP, la fonction retourne null.

Pour appeller le script serveur, on utilise la fonction open suivie de la fonction send.
La fonction open(methode, url, asynchrone) prend 3 paramètres:
methode: GET ou POST, similaire à un formulaire classique;
url: adresse du script côté serveur;
asynchrone: si l'appel est synchrone, le navigateur attend que la fonction send recoive une réponse du serveur et est donc "bloqué". Si l'appel est asynchrone, le navigateur est toujours accessible pendant que l'appel est exécuté. Sauf cas particulier on choisira toujours la méthode asynchrone.

La fonction send ne prend qu'un paramètre qui est soit null si aucune variable n'est envoyée, soit une liste de couples variable/valeur séparés par &.


<?
function GetXmlHttpObject()

    var 
objXMLHttp null;
    if (
window.XMLHttpRequest)
        
objXMLHttp=new XMLHttpRequest();
    else if (
window.ActiveXObject)
        
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
    return 
objXMLHttp;

?>
étape 1: Affichage de l'heure serveur
 La technique est d'appeller un script PHP qui va nous renvoyer l'heure en cours et le JavaScript va l'afficher dans une alerte.
Voici le code JavaScript:

<? // Code JavaScript
function afficheHeure()
{
    
xmlHttp GetXmlHttpObject();
    if (
xmlHttp == null)
    {
        
alert("Votre navigateur ne supporte pas les requêtes HTTP.");
        return 
false;
    }
    var 
url="exemple1.php"// le script à appeller
    // fonction à exécuter dès réception de la réponse
    
xmlHttp.onreadystatechange = function(){
        if (
xmlHttp.readyState == || xmlHttp.readyState == "complete")
            
alert(xmlHttp.responseText); //on affiche ce que le serveur renvoie
    
}
    
xmlHttp.open("GET"urltrue);//envoi en GET asynchrone
    
xmlHttp.send(null);
    return 
true;
}
?>

Et le code PHP:

<? // Code PHP
# on affiche l'heure en cours.
echo date("H:i:s");
?>
Étape 2: envoi de valeurs
 On va reprendre le script d'affichage d'heure et proposer à l'utilisateur de choisir un décalage horaire. Ce décalage sera utilisé dans le script PHP.

La page HTML doit être modifiée pour intégrer un SELECT avec la décalage horaire souhaité.


<? //HTML
<select id="decalage" name="decalage" onchange="afficheHeure(this.value)">
    <
option value="0">0</option>
    <
option value="1">1</option>
    <
option value="2">2</option>
</
select>
?>
Étape 3: exécution de code Javascript renvoyé par le serveur
 Cette possibilité est vraiment puissante et très souple car, en quelque sorte, on contrôle le client depuis le serveur.

Dans l'exemple qui suit on va proposer au visiteur plusieurs actions Javascript à exécuter alors que le code Javascript pour ces actions ne se trouve initialement pas dans la page.

Ainsi le visiteur peut choisir d'afficher une alerte ou d'insérer l'heure dans un DIV:

<?
<select id="select_action" name="select_action" onchange="execAction(this.value);">
    <
option value="1">alerte</option>
    <
option value="2">afficher l'heure</option>
</select>
?>

La seule chose que fait la fonction execAction c'est d'appeller le script exemple3.php qui va se charger de renvoyer le code Javascript nécessaire à l'exécution de l'action.

<?
function execAction(act)
{
    
xmlHttp GetXmlHttpObject();
    if (
xmlHttp == null)
    {
        
alert("Votre navigateur ne supporte pas les requêtes HTTP.");
        return 
false;
    } 
    var 
url="exemple3.php";

    
xmlHttp.onreadystatechange = function (){
        if (
xmlHttp.readyState == || xmlHttp.readyState == "complete")
            eval(
xmlHttp.responseText);
    }
    
xmlHttp.open("POST"urltrue);
    
xmlHttp.setRequestHeader("Content-Type""application/x-www-form-urlencoded;");
    
xmlHttp.send("act="+document.getElementById("select_action").value);
    return 
true;
}
?>


Le plus important dans la fonction execAction c'est l'appel à la fonction eval qui va interpréter le code contenu dans xmlHttp.responseText.
Notez que le paramètre est directement inséré dans l'appel à la fonction send.

Voyons le code PHP:

<? // Code PHP
# on vérifie le paramètre
if (isset($_POST['act']) && is_numeric($_POST['act']))
    
$action $_POST['act'];
else
    
$action 0;

switch (
$action){
case 
1:    #envoi d'une alerte et on efface le contenu
    
echo "document.getElementById('contenu').innerHTML = '';alert('action souhaitée: alerte!');";
    break;
case 
2:    #affichage de l'heure dans le DIV
    
echo "document.getElementById('contenu').innerHTML = 'Hello world, il est ".date("H:i:s")."';";
    break;
default:
    echo 
"alert('Action inconnue.');";
    break;
}
?>


Ca marche pas mal mais il y a un problème d'accent dans l'alerte.
Pour y remédier il suffit de spécifier dans l'en-tête PHP qu'on envoit du ISO-8859-1 par exemple.
header('Content-Type: text/html; charset=ISO-8859-1');

Code PHP final:

<? // Code PHP
header('Content-Type: text/html; charset=ISO-8859-1');
# on vérifie le paramètre
if (isset($_POST['act']) && is_numeric($_POST['act']))
    
$action $_POST['act'];
else
    
$action 0;

switch (
$action){
case 
1:    #envoi d'une alerte et on efface le contenu
    
echo "document.getElementById('contenu').innerHTML = '';alert('action souhaitée: alerte!');";
    break;
case 
2:    #affichage de l'heure dans le DIV
    
echo "document.getElementById('contenu').innerHTML = 'Hello world, il est ".date("H:i:s")."';";
    break;
default:
    echo 
"alert('Action inconnue.');";
    break;
}
?>
Conclusion
Voilà je pense qu'on a fait le tour des fonctionnalités de base d'AJAX.
Dans les cas où le script PHP prend du temps, il est bon d'afficher un GIF animé au moment de la requête et une fois qu'on a la réponse on le rend invisible.

Vous pouvez télécharger les ZIPs des exemples pour avoir une base de départ pour vos scripts.

Commentaires
<< 1 2 >>
hmmm pas frappé mAcfly... des étapes sont tronquées tellement tu es bavard
Commentaire Posté le 31 07 2006 à 09h29
gom - Administrateur - www
excellent, c'est du tout bon cha :D
Très simple , voilà une bonne introduction !
Commentaire Posté le 31 07 2006 à 09h55
caniche - Membre - www
Gom > bon ca va pour cette fois hein. :) En fait c'est dur de savoir quand s'arrêter d'expliquer mais je suis d'accord que trop c'est trop. :)

caniche > Content que ca soit utile. :)
Commentaire Posté le 31 07 2006 à 10h50
McFly - Modérateur - www
J'ai pas tout lu, mais ca m'a l'air tip-top, et en plus je comptais bientot me pencher la dessus. Merci bien. :)
Commentaire Posté le 31 07 2006 à 15h43
Ishiro - Membre - www
Le texte a été tronqué, j'ajouterais le texte manquant dans la semaine. Oups!
Commentaire Posté le 01 08 2006 à 11h06
McFly - Modérateur - www
C'est bon j'ai remis le texte manquant.
Commentaire Posté le 05 08 2006 à 14h28
McFly - Modérateur - www
<< 1 2 >>
Partenaires

Catégories
After Effects
1 Tutorial
Flash
2 Tutoriaux
Lightwave
1 Tutorial
Divers
1 Tutorial
Photoshop
15 Tutoriaux
Illustrator
4 Tutoriaux
Indesign
2 Tutoriaux
PHP
3 Tutoriaux
Blender
1 Tutorial
Mentions légales   -   Crédits   -   Nous contacter   -   © Benzor 2006