Barre de chargement et XMLHTTPRequest

Signaler
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007
-
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007
-
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

31 réponses

Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007

Euh, je comprend pas très bien ton try...

Je ne connais pas très bien le javascript (ce script me permet d'en
apprendre plus), et je ne connais pas cette syntaxe. Et je ne comprend
pas tout ce qui est marqué sur internet pour l'expliquer.
Messages postés
6814
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
25
:p


try sert pour gerer les erreurs on a aussi throw pour en declencher des manuels ... par exemple


try{
var result = 3/zero.toto; // ceci va declencher une erreur
alert(result) // Cette alerte ne sera pas executé ...
}
catch (ex)
{
alert('il y a eu une erreur');
// on peut meme allé plus lui en affichant ex.message etc...
}

>> http://en.wikipedia.org/wiki/JavaScript#Error_handling

donc en mettant le code potentiellement foireux dans un bloc try tu elimines les erreurs ... Tu pourrais aussi tester responseText avant de l'utiliser ce serait peut etre plus propre
if(xhr_obj.responseText)
{
//action à effectuer
}

mais je suis pas sur que ca fonctionne pour IE donc testes avant cette solution et sinon met ca dans un bloc try :)



<HR>



Cyril - MVS - MCP ASP
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007

J'ai beau faire des try hyper large, pas d'erreurs sur Firefox, Object Error sur IE, et plantage d'IE...
Messages postés
6814
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
25
Je peux voir le code ? car normalement ca fonctionne ...


Sinon j'ai demandé à Aurélien (le grand gourou) et il m'a dit avec regret que ca ne devait pas etre possible :s



<HR>



Cyril - MVS - MCP ASP
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007

REQUEST.JS


if(window.ActiveXObject){

// Internet Explorer

var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else if (window.XMLHttpRequest){

// Mozilla

var xmlhttp = new XMLHttpRequest();

}

else {

// Navigateur non-compatible

alert( 'Votre navigateur ne supporte pas les objets 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');



xmlhttp.onreadystatechange = function() {

try{

if (xmlhttp.readyState == 1) {


content2.innerHTML = 'Ouverture en cours';

content3.style.width = '0%' ;

}

if (xmlhttp.readyState == 2) {


content2.innerHTML = 'Envoi en cours';

}

if (xmlhttp.readyState == 3) {


if(content2.innerHTML!=='Réception en cours') {


content2.innerHTML =
'Réception en cours';

}

if(tailletotal==null) {


tailletotal =
xmlhttp.getResponseHeader("Content-Length");

}


pourcentage =
(xmlhttp.responseText.length/tailletotal)*100;


content3.style.width = pourcentage + '%' ;

}

}

catch (ex){

alert(ex);

}

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

}

}

INDEX.PHP

















Chargement


















[javascript:changer_page('0','page','barre-etat','etat'); ]


[javascript:changer_page('1','page','barre-etat','etat'); ]


[javascript:changer_page('2','page','barre-etat','etat'); ]


[javascript:changer_page('3','page','barre-etat','etat'); ]


[javascript:changer_page('4','page','barre-etat','etat'); ]






















&nbsp;




Page Complète









http://validator.w3.org/check?uri=referer


http://jigsaw.w3.org/css-validator/


http://www.mozilla.org/
















PAGE/0.php

Une quelquonque page d'acceuil....

PAGE/1.php

Une énorme page (1Mo).

Je ne te passe pas le CSS normalement ten a pas besoin...
Messages postés
6814
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
25
xmlhttp.onreadystatechange = function() {
try{
if (xmlhttp.readyState == 1) {
content2.innerHTML = 'Ouverture en cours';
content3.style.width = '0%' ;
}
if (xmlhttp.readyState == 2) {
content2.innerHTML = 'Envoi en cours';
}
if (xmlhttp.readyState == 3) {
if(content2.innerHTML!='Réception en cours')
content2.innerHTML = 'Réception en cours';

if (!xmlhttp.responseText)
return;

if(xmlhttp.getResponseHeader("Content-Length") && tailletotal==null)
tailletotal = xmlhttp.getResponseHeader("Content-Length");


pourcentage = (xmlhttp.responseText.length/tailletotal)*100;
content3.style.width = pourcentage + '%' ;
}
}
catch (ex){
alert(ex);
}
if (xmlhttp.readyState == 4) {
content2.innerHTML = 'Page Complète';
content.innerHTML = xmlhttp.responseText;
}
}

Si ca marche toujours, tu sera malheureusement contraint à detecter si c'est l'utilisateur est IE ou pas :s


<HR>
Cyril - MVS - MCP ASP
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007

Il y a un double problème.

D'une part IE n'accepte pas la lecture du responseText avec qu'il ne
soit totalement chargé, ce qui empeche l'affichage de la barre de
chargement, et d'autre part IE n'accepte pas le chargement par
XMLHTTPRequest de fichiers lourds (1Mo dans l'exemple). Le script
marche avec des fichiers moins lourds, mais la barre ne s'affiche
toujours pas. J'ai donc enlevé les tests try et tout ca et je ne
mettrais pas de fichiers lourds. Je crois que c'est la seule solution,
à moins que le serveur n'envoie en plusieurs fois ????? Mais comment
faire ?
Messages postés
6814
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
25
si malgré tout ce que j'ai dit, ca fonctionne pas, il faut detecter IE avec l'userAgent :s et ne pas faire executer cette partie du script pour javascript.


Pour ce qui est de la limite en terme de download via ajax, je ne la connais pas, mais 1Mo par ajax t'es sur que c'est utile ? sinon decouper le fichier :s

J'espere qu'avec IE7 et l'implementation de l'objet XmlHttpRequest en natif ca va changer



<HR>



Cyril - MVS - MCP ASP
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007

Euh, j'ai essayé avec un fichier de 1Mo pour
l'exemple, pour bien voir la barre, mais je n'utilise jamais de si gros
fichiers.

Donc, l'incompatibilité sous IE6 n'est pas dramatique. Le fichier se charge quand même, à défault d'afficher la barre.

Et bien merci. J'ai appris à utiliser les headers, les try :-), etc...

A+
Messages postés
6814
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
25
finalement ca fonctionne avec un try ? ou t'as du detecter IE ?


<HR>
Cyril - MVS - MCP ASP
Messages postés
233
Date d'inscription
vendredi 2 juillet 2004
Statut
Membre
Dernière intervention
4 janvier 2007

Non, rien de tout ca. IE ne plante pas parce qu'il
faut lire les données avant qu'elles soient terminées, mais parce que
le fichier était trop gros. Il doit y avoir une limite. Donc IE charge
bien les données, mais sans afficher la barre de chargement. Mais il ne
plante pas avec un plus petit fichier.

Il n'y a pas besoin de try...