[AJAX] Appel de fonction javascript

Version imprimable

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:

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:

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

Lorsque je s�lectionne une entr�e dans le formulaire, rien ne se passe, je ne vois m�me pas de fen�tre d'avertissement due � l'instruction

Code:

alert(xhr.readyState);

plac�e au d�but de la fonction affichelivre().

Je ne comprends pas ce qui se passe. :?

mdrr :p

Code:

1
2
3
4
5
6
 var xhr = null;
// ...
alert(xhr.readyState); ==> alert(null.readyState); ==> Erreur ==> Fin exécution
getXhr();
alert(xhr.readyState); ==> alert(XmlHttpRequestObject.readyState);
// ...

la fonction getXhr est inutile sauf si tu compte l'utiliser plusieurs fois pour instancier plusieurs object mais dans ce cas l� il faudra passer par une classe ou un tableau contenant tous tes objects... donc tu fais directement...

Code:

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
 
 
var xhr = null;        
 
if(window.XMLHttpRequest) // Firefox et autres
{
    xhr = new XMLHttpRequest();
} 
elseif(window.ActiveXObject)  // Internet Explorer
{
    var ieversions = ['Msxml2.XMLHTTP',
                      'Microsoft.XMLHTTP',
                      'Msxml2.XMLHTTP.5.0',
                      'Msxml2.XMLHTTP.4.0',
                      'Msxml2.XMLHTTP.3.0'
                      ];             
    for(var i=0; !xhr && i<ieversions.length; i++)     
    {         
        try        
        {            
            xhr = new ActiveXObject(ieversions[i]);        
        }         
        catch(e)         
        {             
            xhr = null;         
        }     
    }
}
 
if(!xhr)// XMLHttpRequest non supporté par le navigateur
    alert("Votre navigateur ne supporte pas les objets XMLHttpRequest...");

Ensuite...

Code:

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
 
 
function affichelivre()
{
    if(xhr)   
    {             
        xhr.open("POST","afficheLivre.php",true);
        xhr.onreadystatechange = function()        
        {             
            di = document.getElementById('test');          
            // requete fini
            if(xhr.readyState == 4)          
            {              
                // si c'est Ok              
                    if(xhr.status == 200 || xhr.status == 304)                  
                        di.innerHTML = xhr.responseText;
                            else                       
                                di.innerHTML = "Error " + xhr.status + " : " + xhr.statusText;
           }        
           else  di.innerHTML = "Loading in progress... Please Wait... .. .";
 
        }  
 
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');        
        livre = document.getElementById('livre');
        var reqUri = "idLivre="+livre.options[livre.selectedIndex].value;
        xhr.send(encodeURIComponent(reqUri));
    }
}

Si c'est juste pour une id tu peut faire �a en get...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
 
function affichelivre()
{
    if(xhr)
    {      
       xhr.open("GET", "afficheLivre.php?idLivre="+livre.options[livre.selectedIndex].value,true);
 
        xhr.onreadystatechange = function() 
        {   
          di = document.getElementById('test');
          // requete fini
          if(xhr.readyState == 4)
          {
              if(xhr.status == 200 || xhr.status == 304) 
                 di.innerHTML = xhr.responseText;
                    else
                       di.innerHTML = "Error " + xhr.status + " : " + xhr.statusText;
           }
           else  di.innerHTML = "Loading in progress... Please Wait... .. .";
        }  
        xhr.send(null);
    }
}

@ tchaOo�