Barre de chargement et XMLHTTPRequest

Question

Bonjour

Je construit un site utilisant les XMLHTTPRequest.

Une zone de la page est recharg&#233;e lorsque on clique sur un bouton du menu.

Je voudrais afficher en bas du site une barre de chargement r&#233;aliste a
mesure que les donn&#233;es arrive. Je crois qu'on peut savoir o&#249; en est le
chargement de la page avec les XMLHTTPRequest.

Est-ce possible et comment faire ?

Merci

A bient&#244;t

cs_bultez · Answer

Bonjour,
&#224; mon avis, je crois qu'on peut savoir si la r&#233;ponse est 
revenue ou si on l'attend toujours, pas "o&#249; elle en est".
mais peut-&#234;tre dis-je des b&#233;tises...
Cordialement. Bul. &#144;

massacr · Answer

Je ne sais pas si c'est impossible de connaitre
l'etat d'avancement de la requete, mais ce n'est en tout cas mentionn&#233;
nulle part sur le web...

cs_bultez · Answer

1&#176; : est-il possible de savoir ce qui va &#234;tre fait
par le programme recevant cette requ&#234;te ?
(donc le temps mis pour traiter cette requ&#234;te)
&#231;a me semble difficile ?!?
je ne parle m&#234;me pas de la vitesse du modem,
de la taille de la r&#233;ponse, de l'&#233;tat du r&#233;seau...
Cordialement. Bul. &#144;

massacr · Answer

Oui, il n'est pas possible de se r&#233;f&#233;rer au temps,
mais seulement au pourcentage de r&#233;ception par le navigateur, et je ne
sais pas si c'est possible d'y avoir acc&#233;s.

jesusonline · Answer

Tu peux faire ca en utilisant onreadystateChange et l'objet state ... 



en gros de m&#233;moire ca doit donner



xhr_obj.onreadyStateChange =  function()

{

    if (xhr_obj.readyState == 3)  // accessible en partie

    {

        tailletotal.innerHTML = xhr_obj.getResponseHeader('size'); // pour utiliser ca il faut mettre la taille du fichier cot&#233; serveur dans le header de la requete

       progress.innerHTML = xhr_obj.responseText.lenght / 1024 + ' ko'

    }

    else if (xhr_obj.readyState == 4) // transfert finit 

    {

        progres.innerHTML = 'finished';

    }

}



Voici les valeurs possible pour readyState



 Valeur  |Description |----
0 (uninitialized), non initialis&#233;, ----
1 (loading), d&#233;but du transfert des donn&#233;es, ----
2 (loaded), donn&#233;es transf&#233;r&#233;es, ----
3 (interactive), les donn&#233;es re&#231;ues sont accssibles en partie, ----
4 (complete), les donn&#233;es sont compl&#232;tement accessibles



J'ai pas test&#233; le code, donc je sais pas ca donne niveau compatibilit&#233; ... 



bon courage :) 


<hr> Cyril - MVS - =70-305 MCP ASP

massacr · Answer

Content de voir que c'est peut etre possible, mais que veut dire ca : "pour utiliser ca il faut mettre la taille du fichier cot&#233; serveur dans le header de la requete"



Mon cot&#233; serveur est en PHP, et je ne controle pas la requete envoy&#233;e
!! Et comment savoir la taille du texte que je vais envoyer ?

jesusonline · Answer

"pour utiliser ca il faut mettre la taille du fichier cot&#233; serveur dans le header de la requete" ==> veut dire que si tu veux faire une barre de progression, il faut que tu connaisse la taille du fichier d&#233;s le debut, et quand tu fais une requete tu envoie d'abord le header puis le content de la page 

le header contient le content-type, la date etc... puis vient ensuite le contenu de la page ... Ensuite pour recuperer le total de la page que tu envoies si tu n'utilise pas le buffer (ie t'attend que la page soit gener&#233; avant de l'envoyer) tu pouras assez aisement connaitre le poid de la page, mais je connais pas assez javascript pour te le dire ... 

Mais deja avant ca il faudrais savoir si le code que je t'ai donn&#233; fonctionne et est multi navigateur ... 
 


<HR>
Cyril - MVS - MCP ASP

massacr · Answer

Bon je commence &#224; comprendre.

Cot&#233; serveur, j'ai enclench&#233; une bufferisation de sortie, et avant de
la lib&#233;rer, je compte la taille et j'envoie un header Content-length:

Cot&#233; client, je r&#233;cup&#232;re cette valeur. Donc, une moiti&#233; du probl&#232;me est r&#233;solue, je connais la taille totale du document.

En Javascript, la valeur xhr_obj.responseText.length / 1024 + ' ko'
m'affiche bien la valeur d&#233;j&#224; recue en ko, mais c'est bien lenGTH, et
non lenGHT !! J'ai cherch&#233; longtemps.

Maintenant il ne me reste plus qu'&#224; faire les pourcentages, et &#224; faire une barre de chargement.

Merci, je vous met le code d&#232;s que je l'ai fini, et je pense en faire une source.

A bient&#244;t

jesusonline · Answer

arf, je confond toujours length et lenght :) 

La m&#233;thode fonctionne sous FF et IE ? t'as aussi essay&#233; opera ? 

Ensuite pour la barre de pourcentage & co y'a rien de compliqu&#233; ;) 


<HR>
Cyril - MVS - MCP ASP

massacr · Answer

J'y suis presque : 

J'ai la taille totale : tailletotal = obj.getResponseHeader("Content-Length");

J'ai la taille de la page en cours de chargement : pourcentage = (obj.responseText.length/tailletotal)*100;

J'ai une barre de chargement : content2.innerHTML = "
"+Math.round(pourcentage)+"%
";

Mais j'ai plusieurs probl&#232;mes : 

1 : Incompatibilit&#233; avec IE, il ne semble pas reconnaitre obj.responseText.length...

2 : La barre "clignote". Elle n'augmente pas a vitesse constante (sur
une page de 1Mo). Elle disparait r&#233;guli&#232;rement, et je ne comprend pas
pourquoi...

Merci de vos r&#233;ponses.

A bient&#244;t

jesusonline · Answer

Tu trouves pas que ta m&#233;thode pour faire une barre de chargement et un peu sale :D ? 

0%

Puis ensuite dans le code tu n'as qu'a changer le width de content2 

content2.style.width = pourcentage + '%' ; 

Ensuite pour le probl&#232;me de compatibilit&#233;, je m'en doutais un peu :-/ c'est pas qu'il ne reconnait pas obj.responseText.length mais c'est que responseText ne doit pas encore &#234;tre d&#233;finit puisque le transfert n'est pas complet :s 

T'as essay&#233; de regarder avec les autres etats de readyState ? Sinon t'as plus qu'a aller faire un tour du cot&#233; de msdn :p 

Au fait, t'as essay&#233; sur Opera ? si ca marche dessus, je vais essayer de trouver une solution pour IE :) 

et t'utilises quelle objet activex ? car il me semble qu'il y a plusieurs versions disponible, peut etre qu'en mettant une version recente ca marchera ... 


<HR>
Cyril - MVS - MCP ASP

massacr · Answer

Merci !!

Avec quelques ajustements ca marche impec !!!

Bon, je vais m'attaquer au probl&#232;me de compatibilit&#233;.

Je n'ai pas Op&#233;ra, mais je vais l'installer pour tester dessus.

A+

massacr · Answer

Euh, non, ca ne marche pas avec Opera, mais Opera n'accepte m&#234;me pas les requetes XMLHTTP toutes simples...

Depuis que j'ai rajout&#233; les pourcentages, IE ne comprend plus rien et
plante, que ce soit avec new ActiveXObject("Microsoft.XMLHTTP") ou new
ActiveXObject("Msxml2.XMLHTTP")

Il n'y a que FireFox qui fonctionne.

D'ailleurs, comment faire pour que les liens de mon menu passent en
mode normal (sans XMLHTTP) lorsque le naviguateur ne les accepte pas ?

jesusonline · Answer

Opera supporte Ajax, donc normalement ca devrait fonctionner. 

Pour le probl&#232;me de compat j'ia fait un tour sur msdn, et j'ai pas trouv&#233; de solution pour IE donc on est cuit :s 

pour les liens tu peux faire quelque choses comme ca

[tapage.htm  

a.onclick = function()
{
   if (!ajax)
      return true; 
   // function l'ajax ...

   return false;
}


<HR>
]Cyril - MVS - MCP ASP

massacr · Answer

Je ne comprend pas ce qui cloche.

Avec Firefox, tout marche &#224; merveille.

Avec IE, il s'arrete &#224; R&#233;ception en cours, et plante.

Avec Opera, il affiche mal la page, ne comprend rien aux XMLHTTP, ni &#224; d'autres sites avec des XMLHTTP...



Je te transmet le code : 



if(document.all) {

    // Internet Explorer

    var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else {

    // Mozilla

    var xmlhttp = new XMLHttpRequest();

}

function changer_page(demande,page,barreetat,etat) {

    if(!xmlhttp) {

        location.href = 'index.php?demande='+demande;

    }

    else {

        var content = document.getElementById(page);

        var content2 = document.getElementById(etat);

        var content3 = document.getElementById(barreetat);

        var data = null;

        var afichetat = null;

        var tailletotal = null;

        var pourcentage = null;



        if(demande != "")   

            data = "demande="+demande;   

        

        xmlhttp.open("POST", 'index.php',true);



        xmlhttp.onreadystatechange = function() {

            if (xmlhttp.readyState == 1) {

                content2.innerHTML = 'Ouverture en cours';

                content3.style.width = '0%' ;

            }

            if (xmlhttp.readyState == 1) {

                content2.innerHTML = 'Envoi en cours';

            }

            if (xmlhttp.readyState == 3) {

                if(content2.innerHTML!=='R&#233;ception en cours') {

           
        content2.innerHTML = 'R&#233;ception
en cours';

                }

           
    tailletotal =
xmlhttp.getResponseHeader("Content-Length");

           
    pourcentage =
(xmlhttp.responseText.length/tailletotal)*100;

                content3.style.width = pourcentage + '%' ;

            }

            if (xmlhttp.readyState == 4) {

                content2.innerHTML = 'Page Compl&#232;te';

                content.innerHTML = xmlhttp.responseText;

            }

        }

        xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        xmlhttp.send(data);

    }

}





Qu'est ce que IE ne comprend pas ????

massacr · Answer

IE pr&#233;texte une "Erreur sur la page" avant de planter...

Et pourtant, j'ai fait un script d'identification avec XMLHTTP que mon
IE comprend !!! C'est avec le syst&#232;me d'avancement que ca marche pas...

jesusonline · Answer

Pour Opera Ajax fonctionne, c'est que t'as du bricoler quelque chose, ou je ne sais quoi car mes scripts ajax fonctionne dessus :/ 

Sinon pour IE : 

>> http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/63409298-0516-437d-b5af-68368157eae3.asp

Je me rappelle plus ou j'ai vu ca, mais il etait dit que tent&#233; d'acceder &#224; responseText dans l'etat 3 entraine une erreur car les donn&#233;es sont pas encore completement la ... :/ 

donc t'es cuit pour IE ! 

xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 1) {
                content2.innerHTML = 'Ouverture en cours';
                content3.style.width = '0%' ;
            }
            if (xmlhttp.readyState == 1) {
                content2.innerHTML = 'Envoi en cours';
            }
            if (xmlhttp.readyState == 3) {
                if(content2.innerHTML!=='R&#233;ception en cours') {
                    content2.innerHTML = 'R&#233;ception en cours';
                }
               try {
                tailletotal = xmlhttp.getResponseHeader("Content-Length");
                pourcentage = (xmlhttp.responseText.length/tailletotal)*100;
                content3.style.width = pourcentage + '%' ;
                  }
               catch (ex)
              { }
            }
            if (xmlhttp.readyState == 4) {
                content2.innerHTML = 'Page Compl&#232;te';
                content.innerHTML = xmlhttp.responseText;
            }
        }

Sinon dans ton script, plutot que de lire &#224; chaque fois tailleTotal, il faudrais mieux mettre ca &#224; l'exterieur de la fonction, ca rendra le truc moins lourd 

var tailletotal;

function(){
...
tailletotal = tailletotal || xmlhttp.getResponseHeader("Content-Length");

et regarde t'as un if de trop ;) 

D&#233;s que je vois Aur&#233;lien (le grand maitre :p), je lui en parle pour savoir si IE n'aurais pas une astuce cach&#233; :) 


<HR>
Cyril - MVS - MCP ASP

jesusonline · Answer

Au fait, pour Opera : 

il ne faut pas tester si ton navigateur est IE ou autre, mais test&#233; si le navigateur possede tel ou tel fonction : 

if ( window.XMLHttpRequest ) {
// Objet XmlHttpRequest pour les moteurs GECKO
xhr_object = new XMLHttpRequest();   
} else if ( window.ActiveXObject ) {
// Objet XmlHttpRequest pour Internet Explorer
xhr_object = new ActiveXObject( 'Microsoft.XMLHTTP' );   
} else {
// Navigateur non-compatible
alert( 'Votre navigateur ne supporte pas les objets XMLHTTPRequest...' );   
return;
}

Opera comporte document.all mais on peut pas cr&#233;er l'activeX commme ca, mais opera possede l'objet window.XMLHttpRequest ... 


<HR>
Cyril - MVS - MCP ASP

massacr · Answer

Ok, merci. Maintenant pour Opera ca marche. Un probl&#232;me de mise en
forme empeche de voir le div de la barre de chargement, mais je pense
qu'il marche car tout le reste fonctionne.

Reste IE...

Comment au moins l'empecher de planter mais charger tout de m&#234;me la page ?

jesusonline · Answer

avec un try ... 

c'est ce que j'ai mis plus haut :) 


<HR>
Cyril - MVS - MCP ASP

Barre de chargement et XMLHTTPRequest

31 réponses

Votre réponse

Discussions similaires