2010-04-24 20 views
31

Piszę aplikację internetową AJAX, która używa Komety/Long Polling, aby strona internetowa była aktualna, a zauważyłem w Chrome, że strona traktuje ją tak, jakby zawsze była ładowana (ikona bo zakładka się kręci).Wskaźnik ładowania Chrome wciąż się kręci podczas XMLHttpRequest

Pomyślałem, że to było normalne w Google Chrome + Ajax, ponieważ nawet Google Wave miało takie zachowanie.

Dziś zauważyłem, że Google Wave nie utrzymuje już ikony ładowania, czy ktoś wie, jak to naprawili?

Oto mój ajax kod wywoławczy

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

Odpowiedz

36

I bezczelnie ukradł przypadek testowy Oleg i dostosować go trochę do symulacji długo -ankieta.

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> 

Rezultatem jest ciekawe: w Firefox i Opera, wskaźnik ładowania nie jest wyświetlany podczas XMLHttpRequests. Chrome pozwala się obracać ... Podejrzewam, że Google Wave nie używa już długiego sondowania (ale na przykład ankiet co X sekund, aby oszczędzać zasoby), ale nie mogę go przetestować, ponieważ nie mam konta .

EDIT: I zorientowaliśmy się: po dodaniu trochę opóźnienia załadunku test.php, które mogą być tak małe, jak to możliwe, wskaźnik ładowania zatrzymuje się po load.html został załadowany:

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

Jakoś tak jak jest confirmed in a comment przy innej odpowiedzi, kiedy przeglądarka odzyska kontrolę, aby zakończyć renderowanie strony, wskaźnik przestanie się obracać. Kolejną zaletą jest to, że żądanie nie może zostać przerwane przez naciśnięcie klawisza Esc.

+0

Ale czy odpytywanie co x sekund nie zwiększy obciążenia serwera? Sądzę, że teraz może się to zmienić w inny sposób (Long Polling vs Poling co x sekund). Ale nie jestem pewien, czy jestem przekonany, że przeszli z Long Polling. –

+0

@teehoo: Kiedyś przeczytałem, że długie pollingowanie wymaga dużych zasobów, ponieważ wiele połączeń musi pozostać otwartych w tym samym czasie, do czego HTTP nie jest przeznaczony. Ale nie jestem ekspertem od serwerów, więc proszę, popraw mnie, jeśli się mylę. –

+0

Domyślam się, że utrzymywanie otwartych połączeń zajmuje więcej pamięci, ale otwieranie i zamykanie połączeń wymaga więcej CPU + przepustowości? Dzięki za rozpatrzenie tego problemu, sprawdzę, czy działa, gdy wrócę do domu. –

2

Przepraszam za moją ogólną odpowiedź, ale jeśli chcesz mieć program, który są bardziej przeglądarka niezależne należy użyć jQuery lub inną ulubioną bibliotekę zamiast niskim poziomie XMLHttpRequest i ActiveXObject ("Microsoft.XMLHTTP").

edycja: utworzyć dwa bardzo proste pliki HTML: test.htm i load.htm i umieszczone tam w tym samym katalogu na stronie (spróbuj to jeden adres URL http://www.ok-soft-gmbh.com/jQuery/load/load.htm). Nie widzę efektu, który opisujesz w tobie. Porównaj te pliki ze swoimi przykładami, a rozwiążesz problem.

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

Nie wiem, kto cię downvoted, Powrócę do zera, ponieważ uznałem, że jest to trochę pomocne. Próbuję JQuery i raportuję. –

+0

spróbuj użyć jednej linii kodu zamiast fragmentu kodu: $ ('# elementtoupdate'). Load (myURL); Możesz dodać także niektóre efekty fadeIn lub inne. – Oleg

+0

Więc zaimplementowałem JQuery, a mój kod stał się trochę bardziej przejrzysty, ale wciąż mam status stałego ładowania. –

-3

użycie tej funkcji

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

Czy potrafisz lepiej formatować? –

0

Nie jestem pewien co do jQuery lub Ajax, ale miałem podobny problem z wstawianiem fragmentów do edytora asów za pomocą Menedżera snippetów.Podczas wstawiania kodu do edytora, gdy strona ładowała się, strona nigdy się nie ładowała - ikona karty kręci się na zawsze. .setTimeout() działa tylko bardzo niekonsekwentnie. Będzie działać, gdy strona ładuje się bardzo szybko, ale nie wtedy, gdy strona ładuje się wolniej. Być może dlatego, że nie pakowałem niczego w $(document).ready() - wywoływałam tylko mój kod na końcu treści dokumentu.

Oto rozwiązanie bez jQuery znalazłem mojego zawsze przędzenia ikona Zakładka problemu:

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

     clearInterval(tillPageLoaded); 
     // load whatever 

    }  
}, 5); 

W moim przypadku // load whatever było:

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