[AJAX] Premiers pas en AJAX

Version imprimable

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:

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?

20/06/2008, 13h12
Bovino
Code:

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:

et locale dans la fonction...

dans LES fonctions...
20/06/2008, 13h26
Bovino

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

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:

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

20/06/2008, 13h42
chromatia

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

Citation:

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?

Ben moi je laisserais le tout dans une seule fonction :

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
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);
}

20/06/2008, 14h23
chromatia

Il ne bouge plus si je remplace ton code... ni sous ff ni sous ie.

A aucun moment dans ton code tu ne définies httpRequest ?

Code:

var httpRequest;

Euh...:oops: si, là :

Code:

1
2
3
4
5
function createRequestObject()
{
    var httpRequest = null;
if(window.XMLHttpRequest)
...

20/06/2008, 16h34
DoubleU

Citation:

A aucun moment dans ton code tu ne définies httpRequest ?

En javascript, tu n'es pas obligé de déclarer tes variables, même si c'est déconseillé (du moins c'est déconseillé d'utiliser des variables sans les déclarer avec le mot clé var).

Déclarer une variable permet de l'attacher au scope de son objet "parent". C'est a dire que si tu déclares une variable dans une fonction, elle est attachée à la fonction et ne sera visible que depuis cette fonction. Si tu déclares une variable hors d'une fonction, son parent c'est l'objet window, donc elle sera accessible de partout.

Par contre, si tu utilises une variable sans la déclarer, même dans une fonction, cette variable sera attachée automatiquement à l'objet window, donc accessible partout.

rien à faire ça ne veut pas...

j'ai légèrement changé de méthode, mais c'est sensiblement pareil:

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
<script type="text/javascript" language="javascript">
 
function gestionClic(url)
{ 
 
	httpRequest = 0;
    var httpRequest; 
 
    try {  httpRequest = new ActiveXObject('Msxml2.XMLHTTP');   }
    catch (e) 
    {
        try {  	httpRequest = new ActiveXObject('Microsoft.XMLHTTP');    }
        catch (e2)
        {
          try {  httpRequest = new XMLHttpRequest();     }
          catch (e3) {  httpRequest = false;   }
        }
     }
    httpRequest.open('GET', url, true); 
   httpRequest.send(null); 
    httpRequest.onreadystatechange  = function()
	{ 
         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>
 
</head>
 
<body>
<p>
<a href="#" onclick="gestionClic('select_identites2.php'); return false;">Cliquez ici !</a>
<div id="tabdonnees">
 
</div>

Comme tu l'as dit, j'ai l'impression que quand je re-clique, il ne reconstruit pas la variable sous ie il garde le contenu de l'ancienne...

20/06/2008, 20h30
Bovino
Code:

1 2 3 httpRequest.open('GET', url, true); httpRequest.send(null); httpRequest.onreadystatechange = function()
Non, tu ne peux pas envoyer ta requête avant de savoir ce qu'il faut en faire...
Le send() est TOUJOURS à la fin
20/06/2008, 20h54
Bovino

Pour essayer de simplifier le cheminement d'une requête Ajax :

1) Tu crées l'objet qui va envoyer la requête (dans ton cas httpRequest) avec plein de conditions car cet objet n'est pas identique en fonction des navigateurs...

2) Tu ouvres un passage entre javascript et le serveur avec des paramètres. Attention, jusque là ce passage, tu l'as juste ouvert (c'est peut-être pour ça que ça s'appelle 'open(...)'), mais rien n'est transmis !

3) Pour ceux qui pensent qu'Ajax, c'est que du javascript, attention ça va barder et j'entend déjà les puristes et les incultes qui vont me clouer au pilori !!! Ensuite, il faut prévenir javascript qu'il va lui arriver plein de trucs à la gueule qui ne sont pas du javascript : le onreadystatechange qui dit à javascript : "voilà comment te démerder avec ce que tu vas recevoir..."

4) On dit à javascript : tout ce qui n'est pas readystate 4 (données en cours de réception) et status 200 (mon serveur dit tout s'est bien passé) je l'ignore... (Attention, je parle bien d'un cas large, pas de la gestion des codes de retour serveur...)

5) On continue à dire à javascript : attention, quand tu auras readystate 4 ET status 200, tu auras aussi avec un résultat... utilise-le comme [du texte, du XML, du JSON, ce que je veux] et fais-en ça (ici, tout ce qui peut suivre le onreadystatechange et utilsant le response de la requête)

6) Une fois que tout cela est fait, on envoie la requête... le fameux send(...) et sans TOUT ce qui précède, javascript ne sait pas gérer les retours du send()