[AJAX] Google Chrome et les Call Ajax

Version imprimable

Bonjour tout le monde.

Ceci est ma première apparition active sur ce site alors que je le suis depuis des années....

J'espère avoir bien fait mes recherches avant de poster cette petite colle qui me bloque dans un de mes développements.

Je m'explique :

J'ai une fonction Javascript qui, en schématisé fait :
Code:

1 2 3 4 5 6 7 8 9 function updateList() { loading(true); //affiche un sablier var newContent = getContent(url); //call Ajax + d'autres trucs maDiv.innerHTML = newContent; //mise à jour d'une zone de contenu loading(false); //retire le sablier }
L'affichage du sablier fonctionne bien dans tous les browser, sauf dans chrome, qui, d'après ce que j'ai pu remarquer, fait d'abord le call Ajax avant de passer dans loading(true);.

Il fait donc dans l'ordre le call Ajax, puis, le loading true, ensuite le loading false... :(

C'est fou, car si c'est bien le cas, sa pile JS ne respecte pas l'ordre des instructions des scripts....

J'ai pu voir sur le net (peut être même sur ce forum) qu'en utilisant le chaînage jQuery, on peut gérer ce cas. Avec par exemple :
Code:

1 2 3 //ce n'est surement pas la syntaxe exacte $(maDiv).html("chargement").load(url);
Mais cette approche ne me convient pas pour tout un tas de raisons....

bon, heu, donc, ....

Premièrement, me suis-je bien exprimé sur le problème ?
Y a t'il quelqu'un qui a déjà eu le cas ?
Y a t'il une solution pour forcer chrome à respecter l'ordre des instruction JS lors de call Ajax ?

Merci d'avance !

Je reviens pour un complément d'informations.

Concrètement, je viens de refaire un script des plus basiques. Sans framework, et avec la fonction innerHTML de base.....

[index.php]

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Tests Ajax sous chrome</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="functions.js"></script>
</head>
<body>
    <a href="Javascript:loadText()">Load Text</a><br />
    <a href="Javascript:empty()">Empty</a>
    <div class="loading" id="loading"></div>
    <div class="mainDiv" id="mainDiv"></div>
</body>
</html>

functions.js

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
 
function getContent(fichier)
{                                              
 
     var xhr_object = null;
     if(window.XMLHttpRequest) // FIREFOX
          xhr_object = new XMLHttpRequest();
     else if(window.ActiveXObject) // IE
          xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
     else
          return(false);
     xhr_object.open("GET", fichier , false);
     xhr_object.send(null);
 
     var reponse = xhr_object.responseText;
     return(reponse);
}
 
 
function loadText()
{
    var loadingBox = document.getElementById('loading');
    var mainBox = document.getElementById('mainDiv');
    loadingBox.innerHTML = "load";
    var response = getContent("texte.php");
    mainBox.innerHTML = response;
    loadingBox.innerHTML = "ok";
}
 
function empty()
{
    var mainBox = document.getElementById('mainDiv');
    var loadingBox = document.getElementById('loading');
    mainBox.innerHTML = "";
    loadingBox.innerHTML = "";
}

Sachant que le fichier texte.php est un lorem ipsum assez gros....

Donc, comme on peut le constater, la box de loading est sensée afficher "load" avant le call ajax, pour ensuite afficher "ok" après celui-ci.

Je confirme que ça marche sous firefox.... Mais pas sous chrome....

Chrome force le call Ajax AVANT d'afficher le "load"

Bon, heu, j'ai trouvé.

Je suis passé en asynchrone "réel" pour le call Ajax, et cela me donne une meilleure flexibilité.

Dans le soucis de fournir une réponse finale à celui qui lira ce post, voici la solution :

Changements dans la fonction getContent :

[functions.js]

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
 
function getContent( fichier, container, loadingBox)
{
    var xhr_object = null;
 
    if(window.XMLHttpRequest) // Any Browser (not IE)
        xhr_object = new XMLHttpRequest();
     else if(window.ActiveXObject) // IE
        xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
     else
        return("Cette structure ne supporte pas les fonctoins AJAX, veuillez contacter l'administrateur");
 
    //requete HTTP en mode asyncrhone.
    xhr_object.open("GET", fichier, true);
    xhr_object.send(null);   
    xhr_object.onreadystatechange = function() 
    {
        if(xhr_object.readyState == 4) 
        {
            container.innerHTML = xhr_object.responseText ;
            loadingBox.innerHTML =  "ok";   
        }
    }
 
    if(xhr_object.readyState != 4)  
        loadingBox.innerHTML = "load";
    else
    {
        container.innerHTML = xhr_object.responseText;
        loadingBox.innerHTML =  "ok";
    }
}
 
 
function loadText()
{
    var loadingBox = document.getElementById('loading');
    var mainBox = document.getElementById('mainDiv');
 
    getContent("texte.php",mainBox,loadingBox);
}
 
function empty()
{
    var mainBox = document.getElementById('mainDiv');
    var loadingBox = document.getElementById('loading');
    mainBox.innerHTML = "";
    loadingBox.innerHTML = "";
}

Bon, heu, dans l'absolu, je ne comprends toujours pas pourquoi chrome traitait la chose de la sorte. Mais ceci règle mon problème.

En espérant que cela soit utile à au moins une personne :)