Moteur de recherche

Espace membres

Bonjour Anonyme

Inscription

Email :
Mot de passe :

Mot de passe oublié ?

Nos scripts

MySpeach

MySpeach est un chat php sans base de donnée, rapide, léger et facile à prendre en main. DEMO

MyPHPUpload

MyPHPUpload est un script d'upload sécurisé écrit en PHP. DEMO

GrapAgenda

Agenda PHP et MySQL avec comptes utilisateurs et administration. DEMO

Livre PHP

AJAX avec Prototype et PHP

Cours / tutoriel écrit le 07-07-2010 par sky
Utilisation d'une fonction javascript pour gérer des requête AJAX grace au framework Prototype

L'Ajax est devenu une technologie incontournable et de plus en plus utilisé.
Il existe maintenant de multiple framework qui vont vous permettre une utilisation plus simple de l'ajax.

Nous allons aborder ici le framework Prototype.

Télécharger ici Prototype : http://www.prototypejs.org/download

Le but ?
Avoir une fonction javascript qui va gérer de façon très simple vos futurs requêtes en AJAX.

La fonction
<script type="text/javascript" language="javascript">
function AjaxReq(div_id, parametres, url)
{
    var ajax = new Ajax.Updater
    (
        {success: div_id},
        url,{method: 'post', parameters: parametres}
    );
}
</script>

Les paramètres de la fonction AjaxReq :
- div_id : id du conteneur qui va recevoir la réponse
- parametres : liste des variables éventuel à passer à l'url
- url : la page qui va être appellée

Exemple d'utlisation
<html>
<head>
    <script type="text/javascript" src="/medias/js/prototype.js"></script>
    <script type="text/javascript" language="javascript">
    function AjaxReq(div_id, parametres, url)
    {
        var ajax = new Ajax.Updater
        (
            {success: div_id},
            url,{method: 'post', parameters: parametres}
        );
    }
    </script>
</head>

<body>
   
    <p><a href="#" onclick="AjaxReq('test_1', '&lang=en', './traduction.php'); return false;">Traduire Bonjour en Hello</a></p>
    <p><a href="#" onclick="AjaxReq('test_1', '&lang=fr', './traduction.php'); return false;">Traduire Hello en Bonjour</a></p>

    <div id="test_1" style="padding:10px; border:1px solid #000">Bonjour</div>

</body>
</html>

Nous allons appeller la page traduction.php qui va traduire le contenu de la div qui a pour id test_1
On passe en paramêtre la langue souhaité.
La commande "return false;" après la fonction empèche le navigateur de suivre le lien. (a href="#")

Le code PHP de la page traduction.php :
<?php
// Liste des langues accepté
$langues = array(
    'fr', 'en'
);

// Traduction du mot Bonjout
$Traductions = array(
    'fr' => 'Bonjour',
    'en' => 'Hello'
);

// Langue par défaut
$lang = 'fr';

// On défini la nouvelle langue
if(!empty($_POST['lang']) && in_array($_POST['lang'], $langues))
    $lang = $_POST['lang'];

// affichage de la traduction
echo $Traductions[$lang];
?>


Cet exemple n'est pas du tout un exemple à utiliser pour vraiment traduire un texte en Ajax.

L'important ici, c'est la simplicité d'utilisation de la fonction AjaxReq :
<a href="#" onclick="AjaxReq('test_1', '&lang=en', './traduction.php'); return false;">Traduire Bonjour en Hello</a>


On peux faire passer tous type de paramètre et appeller n'importe quelle page.

Commentaires

toto le 21-02-2011

bien ça

sky le 17-10-2010

L'interet est dans un "programme" plus gros que ces quelques lignes de codes. Mais utilisez une librairie telle que Prototype n'est pas tjrs adapté en effet.

kressly le 17-10-2010

Euh, ça n'a pas l'aire simple ça. C'est encore plus facile de coder avec du ajax proprement dit.

Pseudo
Email
Commentaire

Merci d'écrire le code ici :