web-dev-qa-db-fra.com

L'indicateur de chargement de Chrome continue de tourner pendant XMLHttpRequest

J'écris une application Web AJAX qui utilise Comet/Long Polling pour maintenir la page Web à jour. J'ai remarqué que dans Chrome, la page était traitée comme si elle était toujours en cours de chargement (l'icône de l'onglet garde filage).

Je pensais que c'était normal pour Google Chrome + Ajax car même Google Wave avait ce comportement.

Eh bien, aujourd’hui, j’ai remarqué que Google Wave ne maintenait plus l’icône de chargement en rotation, tout le monde sait-il comment on a résolu ce problème?

Voici mon code d'appel ajax

var xmlHttpReq = false;
// Mozilla/Safari
if (window.XMLHttpRequest) {
   xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
   xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttpReq.open('GET', myURL, true);
xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttpReq.onreadystatechange = function() {
   if (xmlHttpReq.readyState == 4) {
      updatePage(xmlHttpReq.responseText);
   }
}
xmlHttpReq.send(null);
javascriptajaxgoogle-chromecometlong-polling
31
Martin Konecny

Désolé pour ma réponse générale, mais si vous souhaitez utiliser un programme plus indépendant du navigateur, vous devez utiliser jQuery ou une autre de vos bibliothèques préférées au lieu de XMLHttpRequest et ActiveXObject ("Microsoft.XMLHTTP"). 

EDITED: Je crée deux fichiers HTML très simples: test.htm et load.htm. Ils sont placés dans le même répertoire d’un site Web (essayez cette URL http://www.ok-soft-gmbh.com/jQuery/load/load.htm ). Je ne vois pas l'effet que vous décrivez dans votre question. Comparez ces fichiers avec vos exemples et vous résoudrez votre problème.

load.htm:

<!DOCTYPE html PUBLIC
          "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head">
  <title>Demonstration of the jQery.load problem</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  jQuery(document).ready(function() {
    $('#main').load("test.htm");
  });
  </script>
</head>

<body>
  <div id='main'></div>
</body>
</html>

test.htm:

<b>OK!</b>
2
Oleg

Je ne suis pas sûr de jQuery ou d’Ajax, mais j’ai eu un problème similaire lors de l’insertion d’extraits dans Ace Editor avec le gestionnaire d’extraits. Lorsque vous insérez du code dans l'éditeur juste au moment du chargement de la page, il semble que la page ne se charge jamais - l'icône de l'onglet tourne à tout jamais. .setTimeout() n'a fonctionné que très inconsistamment. Cela fonctionnerait lorsque la page se chargerait très rapidement, mais pas lorsque la page se chargerait plus lentement. C'est peut-être parce que je n'enveloppais rien dans $(document).ready() - je n'appelais mon code qu'à la fin du corps du document.

Voici une solution no-jQuery que j'ai trouvée à mon problème d'icône d'onglets qui tourne à tout jamais:

var tillPageLoaded = setInterval(function() {
    if( document.readyState === 'complete' ) {

        clearInterval(tillPageLoaded);
        // load whatever

    }    
}, 5);

Dans mon cas, // load whatever était:

ace.config.loadModule('ace/ext/language_tools', function () {
    myEditorInstance.insertSnippet( 'some string' );
});
0
knod