2010-04-24 39 views
31

sırasında dönmeye devam ediyor Web sayfasını güncel tutmak için Comet/Long Polling'i kullanan bir AJAX web uygulaması yazıyorum ve Chrome'da fark ettim, sayfanın her zaman yükleniyor gibi davranıyor (simge) için sekme dönmeye devam ediyor).Chrome'un yükleme göstergesi XMLHttpRequest

Google Chrome + Ajax için bu normal olduğunu düşündüm, çünkü Google Wave bu davranışa sahipti.

Bugün, Google Wave'in yükleme simgesini dönmeye devam etmediğini fark ettim, herkes bunu nasıl düzelttiklerini biliyor mu?

İşte benim ajax çağrı kodu benim genel cevap

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

cevap

36

uzun simüle etmek -polling.

load.html

:

<!DOCTYPE html> 
<head> 
    <title>Demonstration of the jQery.load problem</title> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script> 
    jQuery(document).ready(function() { 
    $('#main').load("test.php"); 
    }); 
    </script> 
</head> 
<body> 
    <div id='main'></div> 
</body> 
</html> 

test.php:

<?php 
    sleep(5); 
?> 
<b>OK!</b> 

sonuç ilginçtir: Firefox ve Opera'da, hiçbir yükleme göstergesi XMLHttpRequest'ler sırasında gösterilir. Chrome dönmesine izin veriyor ... Google Wave'in artık uzun yoklama kullanmadığından şüpheliyim (ancak, kaynakların kaydedilmesi için her X saniyede bir anket), ancak bir hesabım olmadığı için test edemiyorum. .

DÜZENLEME

: Ve bunu anladım: mümkün olduğu kadar küçük olabilir yükleme test.php biraz gecikme, ekledikten sonra, yükleme göstergesi load.html sonra yüklendikten durur: Her nasılsa

jQuery(document).ready(function() { 
    setTimeout(function() { 
    $('#main').load("test.php"); 
    }, 0); 
}); 

, Başka bir cevapta confirmed in a comment olduğu gibi, tarayıcı sayfayı yeniden oluşturmaya geçtiğinde, gösterge dönmeyi durdurur. Bir başka avantaj ise, isteğin Esc'a basılarak iptal edilememesidir.

+0

Ancak her x saniyede sorgulama sunucudaki yükü arttırmaz mı? Sanırım şu an düşündüğüm başka bir yere gidebilirim (Long Polling vs Poling vs her x saniye). Ama eminim ki uzun yoklamadan ikna olmuşlar. –

+0

@teehoo: Bir keresinde uzun anketin kaynaklar üzerinde ağır olduğunu okudum, çünkü birçok bağlantı aynı anda açık tutulmalıdır, HTTP'nin tasarlanmadığı bir şey. Ama ben sunucularda uzman değilim, bu yüzden yanılıyorsam lütfen beni düzeltin. –

+0

Bağlantıları açık tutmak daha fazla bellek gerektiriyor, ancak bağlantıların açılması ve kapatılması sürekli olarak daha fazla CPU + bant genişliği alıyor mu? Buna baktığınız için teşekkürler, eve döndüğümde çalışacağını doğrulayacağım. –

2

Üzgünüz, ama daha tarayıcı bağımsız Eğer düşük seviyeli XMLHttpRequest yerine jQuery veya diğer favori kütüphane kullanmalıdır olan bir program yapmak istiyorsanız ve ActiveXObject ("Microsoft.XMLHTTP").

REDAKTE: Çok basit iki HTML dosyaları oluşturmak : test.htm ve load.htm ve bir web sitesinde aynı dizinde orada yerleştirilen (bu bir URL'yi http://www.ok-soft-gmbh.com/jQuery/load/load.htm deneyin). Sorunuzda açıkladığınız efekti göremiyorum. Bu dosyaları örneklerinizle karşılaştırın ve probleminizi çözeceksiniz.

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> 
+0

seni downvoted kim olduğunu bilmiyorum, Bunu sıfıra indireceğim çünkü biraz yardımcı buldum. JQuery'yi dene ve rapor ver. –

+0

kod parçası yerine bir satır kod kullanmayı deneyin: $ ('# elementtoupdate'). Load (myURL); Ayrıca bazı fadeIn efektleri veya başka ekleyebilirsiniz. – Oleg

+0

JQuery'yi uyguladım ve kodumu biraz daha temiz hale getirdim, ancak yine de sürekli yükleme durumunu aldım. –

-3

kullanımı bu fonksiyon ben utanmadan Oleg'in test vakası çalıp biraz düzeltilmiş

function getHTTPObject() { 
var xhr = false; 
if (window.XMLHttpRequest) { 
    xhr = new XMLHttpRequest(); 
} else if (window.ActiveXObject) { 
    try { 
    xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch(e) { 
    try { 
    xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
    } catch(e) { 
    xhr = false; 
    }; 
    }; 
}; 
return xhr; 
}; 
+3

Daha iyi biçimlendirebilir misiniz? –

0

jQuery veya Ajax hakkında emin değilim, ancak Snippet Manager ile snippet'leri Ace Editor içine ekleme ile benzer bir sorun yaşadım.Sayfa yüklenirken editöre kod girildiğinde sayfa asla yüklenmez gibi görünecektir - sekme simgesi sonsuza kadar dönecektir. .setTimeout() sadece tutarsız bir şekilde çalıştı. Sayfa çok hızlı bir şekilde yüklendiğinde çalışır, ancak sayfa daha yavaş yüklendiğinde işe yaramaz. Bunun nedeni, $(document).ready() numaralı telefondan hiçbir şey göndermediğim için olabilir - kodumu yalnızca doküman gövdesinin sonunda aradım.

İşte benim sonsuza-eğirme sekme simgesi sorununa bulunan bir no-jQuery çözüm: Benim durumumda

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

     clearInterval(tillPageLoaded); 
     // load whatever 

    }  
}, 5); 

, // load whatever oldu:

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