Barre de chargement et XMLHTTPRequest

Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007
- - Dernière réponse : massacr
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007
- 19 oct. 2005 à 18:19
Bonjour

Je construit un site utilisant les XMLHTTPRequest.

Une zone de la page est rechargée lorsque on clique sur un bouton du menu.

Je voudrais afficher en bas du site une barre de chargement réaliste a
mesure que les données arrive. Je crois qu'on peut savoir où en est le
chargement de la page avec les XMLHTTPRequest.

Est-ce possible et comment faire ?

Merci

A bientôt
Afficher la suite 

20/31 réponses

Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
26
0
Merci
Bonjour,
à mon avis, je crois qu'on peut savoir si la réponse est
revenue ou si on l'attend toujours, pas "où elle en est".
mais peut-être dis-je des bétises...
Cordialement. Bul. 
Commenter la réponse de cs_bultez
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007
0
Merci
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é
nulle part sur le web...
Commenter la réponse de massacr
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
26
0
Merci
1° : est-il possible de savoir ce qui va être fait
par le programme recevant cette requête ?
(donc le temps mis pour traiter cette requête)
ça me semble difficile ?!?
je ne parle même pas de la vitesse du modem,
de la taille de la réponse, de l'état du réseau...
Cordialement. Bul. 
Commenter la réponse de cs_bultez
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007
0
Merci
Oui, il n'est pas possible de se référer au temps,
mais seulement au pourcentage de réception par le navigateur, et je ne
sais pas si c'est possible d'y avoir accés.
Commenter la réponse de massacr
Messages postés
6827
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
16
0
Merci
Tu peux faire ca en utilisant onreadystateChange et l'objet state ...



en gros de mé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é 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é, ----
1 (loading), début du transfert des données, ----
2 (loaded), données transférées, ----
3 (interactive), les données reçues sont accssibles en partie, ----
4 (complete), les données sont complètement accessibles



J'ai pas testé le code, donc je sais pas ca donne niveau compatibilité ...



bon courage :)


<hr> Cyril - MVS - =70-305 MCP ASP
Commenter la réponse de jesusonline
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007
0
Merci
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é serveur dans le header de la requete"



Mon coté serveur est en PHP, et je ne controle pas la requete envoyée
!! Et comment savoir la taille du texte que je vais envoyer ?
Commenter la réponse de massacr
Messages postés
6827
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
16
0
Merci
"pour utiliser ca il faut mettre la taille du fichier coté 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é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é 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é fonctionne et est multi navigateur ...



<HR>
Cyril - MVS - MCP ASP
Commenter la réponse de jesusonline
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007
0
Merci
Bon je commence à comprendre.

Coté serveur, j'ai enclenché une bufferisation de sortie, et avant de
la libérer, je compte la taille et j'envoie un header Content-length:

Coté client, je récupère cette valeur. Donc, une moitié du problème est résolue, je connais la taille totale du document.

En Javascript, la valeur xhr_obj.responseText.length / 1024 + ' ko'
m'affiche bien la valeur déjà recue en ko, mais c'est bien lenGTH, et
non lenGHT !! J'ai cherché longtemps.

Maintenant il ne me reste plus qu'à faire les pourcentages, et à faire une barre de chargement.

Merci, je vous met le code dès que je l'ai fini, et je pense en faire une source.

A bientôt
Commenter la réponse de massacr
Messages postés
6827
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
16
0
Merci
arf, je confond toujours length et lenght :)

La méthode fonctionne sous FF et IE ? t'as aussi essayé opera ?

Ensuite pour la barre de pourcentage & co y'a rien de compliqué ;)


<HR>
Cyril - MVS - MCP ASP
Commenter la réponse de jesusonline
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007
0
Merci
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èmes :

1 : Incompatibilité 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égulièrement, et je ne comprend pas
pourquoi...

Merci de vos réponses.

A bientôt
Commenter la réponse de massacr
Messages postés
6827
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
16
0
Merci
Tu trouves pas que ta mé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ème de compatibilité, 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 être définit puisque le transfert n'est pas complet :s

T'as essayé de regarder avec les autres etats de readyState ? Sinon t'as plus qu'a aller faire un tour du coté de msdn :p

Au fait, t'as essayé 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
Commenter la réponse de jesusonline
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007
0
Merci
Merci !!

Avec quelques ajustements ca marche impec !!!

Bon, je vais m'attaquer au problème de compatibilité.

Je n'ai pas Opéra, mais je vais l'installer pour tester dessus.

A+
Commenter la réponse de massacr
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007
0
Merci
Euh, non, ca ne marche pas avec Opera, mais Opera n'accepte même pas les requetes XMLHTTP toutes simples...

Depuis que j'ai rajouté 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 ?
Commenter la réponse de massacr
Messages postés
6827
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
16
0
Merci
Opera supporte Ajax, donc normalement ca devrait fonctionner.

Pour le problème de compat j'ia fait un tour sur msdn, et j'ai pas trouvé 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
Commenter la réponse de jesusonline
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007
0
Merci
Je ne comprend pas ce qui cloche.

Avec Firefox, tout marche à merveille.

Avec IE, il s'arrete à Réception en cours, et plante.

Avec Opera, il affiche mal la page, ne comprend rien aux XMLHTTP, ni à 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éception en cours') {


content2.innerHTML = 'Ré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è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 ????
Commenter la réponse de massacr
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007
0
Merci
IE pré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ème d'avancement que ca marche pas...
Commenter la réponse de massacr
Messages postés
6827
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
16
0
Merci
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é d'acceder à responseText dans l'etat 3 entraine une erreur car les donné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éception en cours') {
content2.innerHTML = 'Ré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ète';
content.innerHTML = xmlhttp.responseText;
}
}

Sinon dans ton script, plutot que de lire à chaque fois tailleTotal, il faudrais mieux mettre ca à 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és que je vois Aurélien (le grand maitre :p), je lui en parle pour savoir si IE n'aurais pas une astuce caché :)


<HR>
Cyril - MVS - MCP ASP
Commenter la réponse de jesusonline
Messages postés
6827
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
16
0
Merci
Au fait, pour Opera :

il ne faut pas tester si ton navigateur est IE ou autre, mais testé 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éer l'activeX commme ca, mais opera possede l'objet window.XMLHttpRequest ...


<HR>
Cyril - MVS - MCP ASP
Commenter la réponse de jesusonline
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007
0
Merci
Ok, merci. Maintenant pour Opera ca marche. Un problè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ême la page ?
Commenter la réponse de massacr
Messages postés
6827
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
16
0
Merci
avec un try ...

c'est ce que j'ai mis plus haut :)


<HR>
Cyril - MVS - MCP ASP
Commenter la réponse de jesusonline