[AJAX] Appel de fonction javascript

**slaborde** · 29/05/2006, 18h00

Je commence depuis peu à jouer avec les technos dites ajax. J'ai repris les exemples fournis dans le tutoriel de François DUSSERT.

Je suis toujours dans la phase où j'essaye de comprendre comment tout ça fonctionne. A partir des codes d'exemple, je bidouille un peu.

Dans mon exemple de test, je voudrais que l'id de la valeur sélectionnée dans le formulaire soit écrite dans une section div sous le formulaire.

J'ai fait la page contenant le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test XMLHttpRequest</title>
        <script type="text/javascript">
            var xhr = null;
 
            function getXhr() {
                if(window.XMLHttpRequest) {
                    // Firefox et autres
 
                    xhr = new XMLHttpRequest();
                } elseif(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("Votre navigateur ne supporte pas les objets XMLHttpRequest...");
                    xhr = false;
                }
            }
 
            function affichelivre(){
                alert(xhr.readyState);
                getXhr();
 
                xhr.onreadystatechange = function() {   
                    if(xhr.readyState == 4 && xhr.status == 200) {
                        di=document.getElementById('test');
                        di.innerHTML =xhr.responseText;
                    }
                }
 
                xhr.open("POST","afficheLivre.php",true);
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                idlivre = document.getElementById('livre').options[document.getElementById('livre').selectedIndex].value;
                xhr.send("idLivre="+idlivre);
            }
        </script>
    </head>
    <body>
        <form>
            <select id='livre' name='livre' onchange='affichelivre()' size ='10'>
                <option value='-1'>Tous (12)</option>
                <option value='6'>Disparu a jamais</option>
                <option value='3'>Dragon</option>
                <option value='7'>Dune</option>
                <option value='8'>La barriere de santaroga</option>
                <option value='10'>La citadelle hyponeros</option>
                <option value='9'>Les guerriers du silence</option>
                <option value='5'>Ne le dis a personne</option>
                <option value='1'>Odyssee</option>
                <option value='12'>Pandora's star</option>
                <option value='2'>Sahara</option>
                <option value='11'>Terra mater</option>
                <option value='4'>Une chance de trop</option>
            </select>
        </form>
 
        <div id='test' name='test'>
            <p>Reponse :</p>
        </div>
    </body>
</html>

Le code du ficiher afficheLivre.php est le suivant. Il est très simple pour que je puisse me focaliser sur la compréhension du reste.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<?php 
    if(isset($_REQUEST["idLivre"])) {
      echo("id : ".$_REQUEST["idLivre"]);
    }
    else {
        echo("Erreur.");
    }
?>