[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.");
    }
?>

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 :

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

alert(xhr.readyState);

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

Je ne comprends pas ce qui se passe.

**FremyCompany** · 29/05/2006, 18h40

mdrr :p

Code :

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

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);
// ...

**kankrelune** · 29/05/2006, 19h43

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 :

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
 
 
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 :

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
 
 
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 :

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
 
 
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°

[AJAX] Appel de fonction javascript

JavaScript

Discussions similaires

Partager

Partager