[AJAX] Premiers pas en AJAX

**chromatia** · 20/06/2008, 12h46

Bonjour,

j'ai fait le grand saut hum hum, ce n'est pas de tout repos...
J'ai commencé par un script ridiculement facile, mais j'ai déjà un souci

Mon script permet lorsque l'on clique sur le lien "cliquez ici" de mettre à jour un select php sans recharger toute la page. (Par la suite je souhaite faire la même chose avec un setTimeout, mais là n'est pas la question)

Mon script marche super bien sous firefox... mais pas sous ie6 ni ie7. Sous explorer il fait ma fonction une fois mais pas deux... Et lorsqu'il lance la fonction la première fois il fait un select qui n'est pas bon.

Voici mon code, si quelqu'un a une idée je suis preneur...

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
 
<script type="text/javascript" language="javascript">
var httpRequest;
 
function createRequestObject()
{
    var httpRequest;
    if(window.XMLHttpRequest)
    { // Mozilla, Safari, ...
        httpRequest = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    { // Internet Explorer
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return httpRequest;
}
 
function gestionClic(url)
{
    document.getElementById('tabdonnees').innerHTML = '<em>Chargement...</em>';
    httpRequest = createRequestObject();
    httpRequest.open('GET', url, true);
    httpRequest.onreadystatechange = handleAJAXReturn;
    httpRequest.send(null);
}
 
function handleAJAXReturn()
{
 
    if(httpRequest.readyState == 4)
    {
        if(httpRequest.status == 200)
        {
            document.getElementById('tabdonnees').innerHTML = httpRequest.responseText;
        }
        else
        {
            document.getElementById('tabdonnees').innerHTML = "<strong>N/A</strong>";
        }
    }
}
</script>
</head>
 
<body>
<p>
<a href="#" onclick="gestionClic('select_identites.php'); return false;">Cliquez ici !</a>
<div id="tabdonnees">
 
</div>
</p>
 
</body>
</html>

Une idée?

**Bovino** · 20/06/2008, 13h12

Code :

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

1
2
3
4
5
6
var httpRequest;
 
function createRequestObject()
{
    var httpRequest;
...}

Déjà, ça c'est pas bon, tu crées variable httpRequest qui est globale au début du script et locale dans la fonction... qui la retourne ! Elles ne sont pas censées être les mêmes.
Déjà qu'avec un code écrit "dans les règles de l'art" il peut y avoir des différences d'interprétation... là tu t'en rajoute !

EDIT : comme j'avais pas été jusqu'au bout, je rectifie :

Code :

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

et locale dans la fonction...

dans LES fonctions...

**Bovino** · 20/06/2008, 13h26

Alors, selon moi le problème est le suivant (en prenant en compte mon post précédent...) :
1°) FF interprète tes variables et leur transmission comme tu le souhaites...

2°) Pour IE, il y a une variable globale httpRequest, mais elle est undefined...
Au premier passage dans ta fonction Ajax, il lui attribue du coup la valeur de ta variable httpRequest locale -> tout se passe comme tu le souhaites.
Aux passages suivants, la globale étant définie, il ne la modifie plus, et comme tu ne transmets rien dans handleAJAXReturn(), il utilise la valeur de la globale.
Tout se déroule correctement, mais avec les mêmes paramètres, il n'y a plus de changement...

**chromatia** · 20/06/2008, 13h28

Merci pour ta réponse,

c'est très juste et je l'ai remarqué, du coup j'ai laissé la variable globale et viré l'autre ce qui donne:

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
<script type="text/javascript" language="javascript">
var httpRequest;
 
function createRequestObject()
{
    if(window.XMLHttpRequest)
    { // Mozilla, Safari, ...
        httpRequest = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    { // Internet Explorer
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return httpRequest;
}
 
function gestionClic(url)
{
    document.getElementById('tabdonnees').innerHTML = '<em>Chargement...</em>';
    httpRequest = createRequestObject();
    httpRequest.open('GET', url, true);
    httpRequest.onreadystatechange = handleAJAXReturn;
    httpRequest.send(null);
}
 
function handleAJAXReturn()
{
    if(httpRequest.readyState == 4)
    {
        if(httpRequest.status == 200)
        {
            document.getElementById('tabdonnees').innerHTML = httpRequest.responseText;
			alert(httpRequest.responseText);
        }
        else
        {
            document.getElementById('tabdonnees').innerHTML = "<strong>N/A</strong>";
        }
    }
}
</script>

mais rien n'a faire ça ne change pas, en réalité c'est vraiment étrange car sous explorer 6 il ne met rien à jour sauf si je passe au préalable sur la page select_identites.php

**chromatia** · 20/06/2008, 13h42

dans l'idée je suis d'accord avec ce que tu dis:

2°) Pour IE, il y a une variable globale httpRequest, mais elle est undefined...
Au premier passage dans ta fonction Ajax, il lui attribue du coup la valeur de ta variable httpRequest locale -> tout se passe comme tu le souhaites.
Aux passages suivants, la globale étant définie, il ne la modifie plus, et comme tu ne transmets rien dans handleAJAXReturn(), il utilise la valeur de la globale.
Tout se déroule correctement, mais avec les mêmes paramètres, il n'y a plus de changement...

je le résous comment?

**Bovino** · 20/06/2008, 14h04

Ben moi je laisserais le tout dans une seule fonction :

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
function createRequestObject()
{
    if(window.XMLHttpRequest)
    { // Mozilla, Safari, ...
        httpRequest = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    { // Internet Explorer
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    document.getElementById('tabdonnees').innerHTML = '<em>Chargement...</em>';
    httpRequest.open('GET', url, true);
    httpRequest.onreadystatechange = function(){
[INDENT][INDENT]if(httpRequest.readyState == 4)
    {
        if(httpRequest.status == 200)
        {
            document.getElementById('tabdonnees').innerHTML = httpRequest.responseText;
	    alert(httpRequest.responseText);
        }
        else
        {
            document.getElementById('tabdonnees').innerHTML = '<strong>N/A</strong>';
        }
    }
   }
    httpRequest.send(null);
}