[Javascript] Firefox et Opera VS Safari et IE

Signaler
Messages postés
13
Date d'inscription
samedi 12 juillet 2008
Statut
Membre
Dernière intervention
17 juillet 2008
-
Messages postés
132
Date d'inscription
dimanche 8 janvier 2006
Statut
Membre
Dernière intervention
15 février 2011
-
Bonjour,

après moultes recherches et avoir tourné le truc dans tout les
sens, je m'en remet à vous. Je débute dans le Javascript, et dèja je
m'aperçois qu'il a des différences entre les divers navigateurs qui
existent...

J'ai un script qui est censé utiliser XMLHttpRequest pour récuperer des données a partir

d'un script PHP, et ensuite mettre à jour ma page sans rechargement.

Mon script fonctionne impec sous Firefox, sous Opera, mais
impossible de lui faire savoir quoi que ce soit sous Internet Explorer
et Safari (Mac et PC).

Je deviens fou, voici mon code:

function recup() {
var idProgress=document.getElementById("progress_key").value;
var xhr= null;

if(window.XMLHttpRequest)
xhr = new XMLHttpRequest();
else if(window.ActiveXObject)
xhr = new ActiveXObject("Microsoft.XMLHTTP");
else {
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}

xhr.open("GET","progress.php?progress_key="+idProgress,true);
xhr.send(null);
xhr.onload=maj;
}

function maj() { /*rappel objet xmlHttpRequest */

var repXhr=this.responseText; //récupération de la réponse du serveur via l'objet xmlHttpRequest (this)

if (this.readyState == 4) {
var objRep=eval('('+repXhr+')');
}

document.getElementById("sec").innerHTML=objRep.est_sec+" secondes restantes";
var i = objRep.bytes_uploaded;
var j = objRep.bytes_total;
var percent = Math.ceil(i*100/j);
var pix = percent*300/100;

document.getElementById("p_pc").innerHTML=percent+"%";
document.getElementById("p_barre").style.width=parseInt(pix)+"px";
if (percent!=100) { recup(); }
}

Merci à vous

23 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
Bonjour,

>>je m'aperçois qu'il a des différences entre les divers navigateurs qui existent...
doux euphémisme... hélas.

>> xhr.onload= maj;
    ?? étonné que ça baigne avec FF d'ailleurs !
    c'est pour le xml "normalement" ( mais qu'y a-t-il de normal ? ) pas pour ajax

tu utilises la méthode asynchrone : xhr.open("GET","progress.php?progress_key="+idProgress, true );

il faut attendre la réponse du serveur, et pas avec onload.
          xhr..onreadystatechange = function()
                {    if(xml.readyState == 4)
                     {    la réponse a été reçue...   reste à tester si status==200
                                                              et faire le boulot

sans préjuger du reste ( pas regardé )

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
il fallait lire    {    if(xhr.readyState == 4)     "bien entendu" !
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13
Date d'inscription
samedi 12 juillet 2008
Statut
Membre
Dernière intervention
17 juillet 2008

J'ai procédé comme tu m'as dis, mais je suis pas vraiment convaincu puisque maintenant ca ne fonctionne plus nulle part

    xhr.open("GET","progress.php?progress_key="+idProgress,true);
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            if(xhr.status  == 200)
            tcb;
        }
    }
    xhr.send(null);
Messages postés
13
Date d'inscription
samedi 12 juillet 2008
Statut
Membre
Dernière intervention
17 juillet 2008

Bon je reviens à la charge... J'ai réécris completement mon code, ca marche impec sur Firefox et Opera.

function getstatus() {

    var xhr = null;

    if(window.XMLHttpRequest) // Firefox
    xhr = new XMLHttpRequest();
    else if(window.ActiveXObject) // Internet Explorer
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
    else { // XMLHttpRequest non supporté par le navigateur
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
    return;
}

var idProgress = document.getElementById("clef").value;

xhr.open("GET", "progress.php?progress_key="+idProgress, true);
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4) {
        if(xhr.status == 200) {

        var tmp=xhr.responseText;
        var reponse=eval('('+tmp+')');
       
        var b_up = reponse.bytes_uploaded;
        var b_tot = reponse.bytes_total;
        var percent = Math.ceil(b_up*100/b_tot);
        var pixel = percent*300/100;
       
        document.getElementById("sec").innerHTML = reponse.est_sec+" secondes restantes";
        document.getElementById("p_pc").innerHTML = percent+"%";
        document.getElementById("p_barre").style.width=parseInt(pixel)+"px";
        document.getElementById('rep').style.display = '';
        if (percent!=100) { getstatus(); }
        }
    }
}

xhr.send(null);

}

Seulement Internet Explorer m'affiche bien les reponses que je veux mais une seule fois... En fait on a l'impression qu'il bloque sur if (percent!=100) { getstatus(); }, il ne réécute pas le script, et IE plante... Quant a Safari ca ne fonctionne pas du tout... Si vous avez une idée du pourquoi du comment, je suis preneur

Merci
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
pas suivi...

tu veux afficher la progression ?
     ne teste pas  xhr.readyState == 4 alors, ça veut dire que c'est fini.
   de toutes manières FF te "rend" le main entre deux, pas IE.
ou alors tu as un problème de cache ?
    ajoute '?'+new Date() derrière l'url

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13
Date d'inscription
samedi 12 juillet 2008
Statut
Membre
Dernière intervention
17 juillet 2008

En fait xhr.open lit un fichier texte qui est mis a jour toute les secondes, d'ou l'interet de if (percent!=100) { getstatus(); } . Dans mon fichier il ya la valeur percent et je veux que mon script tourne en boucle en relisant le fichier texte tant que percent n'est pas égal à 100
Messages postés
13
Date d'inscription
samedi 12 juillet 2008
Statut
Membre
Dernière intervention
17 juillet 2008

Et j'ai essayé en rajoutant +newDate() ca change rien
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
xhr.open("GET", "progress.php?progress_key="+idProgress+'&'+new Date(), true);
et je répète... IE ne rend la main qu'à la fin du traitement php.


<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
if (percent!=100) { getstatus(); }

et tu refais pas le xhr.send(null); ?
on ne rappelle pas donc le php.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13
Date d'inscription
samedi 12 juillet 2008
Statut
Membre
Dernière intervention
17 juillet 2008

Donc j'ai mis if (percent!=100) { xhr.send(null);getstatus(); } et ca ne change rien, ou alors je comprends rien. Pire ca bloque aussi sous Firefox maintenant...
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
navré, j'ai dis une connerie.

var i = objRep.bytes_uploaded;
var j = objRep.bytes_total;

c'est quoi ?     pas d'erreurs avec IE ?

ch'tiot exemple qui fonctionne :

recup.htm :

<script>
function getstatus()
{    var xhr = new XMLHttpRequest();   // simplifié pour le test
    xhr.open('GET','recup.php?c='+(cpt++)+'&'+new Date(), true );
    xhr.onreadystatechange = function()
    {    if(xhr.readyState == 4)
        {    document.getElementById("clef").value= xhr.responseText;
            if( xhr.status == 200)
            {    if ( Number(xhr.responseText)!=10 )
                { getstatus();    }
            }
        }
    }
    xhr.send('');
}
var cpt=0;
getstatus();
</script>

recup.php
<?php
echo $_GET[c];
?>

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13
Date d'inscription
samedi 12 juillet 2008
Statut
Membre
Dernière intervention
17 juillet 2008

navré, j'ai dis une connerie.



var i = objRep.bytes_uploaded;
var j = objRep.bytes_total;


c'est quoi ?     pas d'erreurs avec IE ?

objRep est au format JSON, donc je recupere les entrees avec


objRep.bytes_uploaded;

 
par exemple

J'essaie ta methode, mais a mon avis ca va rien donner
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
>>J'essaie ta methode, mais a mon avis ca va rien donner
euh... essaye ce que je te montre tel quel, tu verras que ça baigne.
( recup.php est ridicule, et la paramètre passé avec ajax ! mais c'est pour le test )
tu avais déjà dis cela à propos de  xhr.onreadystatechange,
et pourtant, c'est bien ce qu'il faut.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13
Date d'inscription
samedi 12 juillet 2008
Statut
Membre
Dernière intervention
17 juillet 2008

Bon j'ai reussi... Mon script était bon, mais IE extremement lent dans le traitement... J'ai ajouté un timer a la fin de mon script et tout baigne maintenant :) (bon a part pour safari ou rien ne s'affiche du tout mais bon)

function getstatus() {

    var idProgress = document.getElementById("clef").value;
    var xhr = new XMLHttpRequest();

    xhr.open('GET', 'progress.php?progress_key='+idProgress+'&'+new Date(), true);
    xhr.onreadystatechange = function() {         if(xhr.readyState 4 && xhr.status 200) {
            var reponse=eval('('+xhr.responseText+')');
            var b_up = Number(reponse.bytes_uploaded);
            var b_tot = Number(reponse.bytes_total);
            var percent = Math.ceil(b_up*100/b_tot);

            document.getElementById("sec").innerHTML = reponse.est_sec+" secondes restantes";
            document.getElementById("p_pc").innerHTML = percent+"%";
            document.getElementById("p_barre").style.width=parseInt(percent)+"%";
            document.getElementById('rep').style.display = '';
        }
    if (b_up
Messages postés
13
Date d'inscription
samedi 12 juillet 2008
Statut
Membre
Dernière intervention
17 juillet 2008

J'oubliais, merci à toi :)
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
>>Mon script était bon,
probable
>>mais IE extremement lent dans le traitement.
probablement du à l'eval, qui, lui aussi  probablement, doit être inutile,
surtout appelé en boucle !
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13
Date d'inscription
samedi 12 juillet 2008
Statut
Membre
Dernière intervention
17 juillet 2008

T'as une idee de comment recuperer des infos d'un tableau JSON sans eval ? Merci :)
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
json ou pas, ce que je veux dire, c'est que :
retourner du javascript depuis le serveur,
qu'il faut alors interpréter (eval) est généralement inutile.
"il suffit" de mettre le js dans la page qui appelle
et l'exécuter avec les paramètres qui conviennent.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
ch'tiot exemple ( stupide, mais c'est un exemple ! )

retourne du javascript
    var ret_ajax='var a=["a","b"]; for ( var i=0;imon Site]     [M'écrire]
Messages postés
132
Date d'inscription
dimanche 8 janvier 2006
Statut
Membre
Dernière intervention
15 février 2011

salut,

pourquoi refaire la roue ? utilise sript aculo us et là tu pourras mieux gerer tout ca :) avec onLoading: et onComplete:

Cordialement