Barre de chargement et XMLHTTPRequest

massacr Messages postés 233 Date d'inscription vendredi 2 juillet 2004 Statut Membre Dernière intervention 4 janvier 2007 - 14 oct. 2005 à 18:43
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

A voir également:

Javascript xmlhttprequest
Récupérer données json (javascript) - Conseils pratiques -Javascript
Javascript poo - Conseils pratiques -Javascript
Base de données javascript - Conseils pratiques -Javascript
Calendrier javascript - Conseils pratiques -Javascript
Tuto javascript - Conseils pratiques -Javascript

31 réponses

Réponse 21 / 31

massacr Messages postés 233 Date d'inscription vendredi 2 juillet 2004 Statut Membre Dernière intervention 4 janvier 2007
16 oct. 2005 à 22:14

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.

Réponse 22 / 31

jesusonline Messages postés 6814 Date d'inscription dimanche 15 décembre 2002 Statut Membre Dernière intervention 13 octobre 2010 29
16 oct. 2005 à 23:10

: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

Réponse 23 / 31

massacr Messages postés 233 Date d'inscription vendredi 2 juillet 2004 Statut Membre Dernière intervention 4 janvier 2007
17 oct. 2005 à 20:43

J'ai beau faire des try hyper large, pas d'erreurs sur Firefox, Object Error sur IE, et plantage d'IE...

Réponse 24 / 31

jesusonline Messages postés 6814 Date d'inscription dimanche 15 décembre 2002 Statut Membre Dernière intervention 13 octobre 2010 29
17 oct. 2005 à 20:46

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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 25 / 31

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

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

 

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

Réponse 26 / 31

jesusonline Messages postés 6814 Date d'inscription dimanche 15 décembre 2002 Statut Membre Dernière intervention 13 octobre 2010 29
18 oct. 2005 à 09:56

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

Réponse 27 / 31

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

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 ?

Réponse 28 / 31

jesusonline Messages postés 6814 Date d'inscription dimanche 15 décembre 2002 Statut Membre Dernière intervention 13 octobre 2010 29
18 oct. 2005 à 21:51

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

Réponse 29 / 31

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

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+

Réponse 30 / 31

jesusonline Messages postés 6814 Date d'inscription dimanche 15 décembre 2002 Statut Membre Dernière intervention 13 octobre 2010 29
19 oct. 2005 à 13:27

finalement ca fonctionne avec un try ? ou t'as du detecter IE ?

<HR>
Cyril - MVS - MCP ASP

Réponse 31 / 31

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

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

Discussions similaires

Partie entiére d'un nombre

integrer une variable javascript dans un lien hypertext

est-ce que "goto" existe en javascript ?

Partie entière d'un nombre

Redirection par header ou javascript?

Votre réponse

Discussions similaires