Tutoriaux
Écrit par Administrator    Mardi, 30 Janvier 2007 03:48    PDF Imprimer Envoyer
Introduction à AJAX et PHP
Tutoriaux - Ajax
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.

CODE :
<?
    function GetXmlHttpObject()
    {
        var objXMLHttp = null;
        if (window.XMLHttpRequest)
            objXMLHttp=new XMLHttpRequest();
        else if (window.ActiveXObject)
            objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
        return objXMLHttp;
    }
?>

** Aucune variable n'est envoyée, soit une liste de couples variable/valeur séparés par &.

 

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.

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 == 4 || xmlHttp.readyState == "complete")
                alert(xmlHttp.responseText); //on affiche ce que le serveur renvoie
        }
        xmlHttp.open("GET", url, true); //envoi en GET asynchrone
        xmlHttp.send(null);
        return true;
    }
?>

CODE PHP :
<? // Code PHP
    # on affiche l'heure en cours.
    echo date("H:i:s");
?>

 

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é.

CODE HTML :
<? //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>
?>

 

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:

CODE HTML :
<?
    <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.

CODE :
<?
    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 == 4 || xmlHttp.readyState == "complete")
                eval(xmlHttp.responseText);
        }
        xmlHttp.open("POST", url, true);
        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.
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.

SOURCE : McFly - Benzor.com

Rétrolien(0)

Adresse URI pour un rétrolien sur cet article

Commentaires (0)

Flux RSS pour les commentaires

Ecrivez un commentaire

Réduire l'éditeur | Agrandir l'éditeur

busy
Mis à jour ( Lundi, 17 Mars 2008 15:04 )
 

Derniers ajout

Les plus lus

Meilleurprix.ca

Annonces classées

QuébecAnnonce.com