Moje środowisko jest w tradycyjnym, skompilowanym języku obiektowym, takim jak programowanie w C++ i .NET, a ja zajmuję się teraz trochę JavaScript dla nowego projektu. Dłubałem w AJAX i natrafiłem na mylące aspekty zarządzania obiektami przez przeglądarkę.Jak obiekty xmlhttprequest są tworzone, scalane i niszczone w JavaScript
[Edit # 2] - Zmiana aktywnych skryptów treści
Mam stronę ćwiczyć z trzema przyciskami, które każda zmiana <textarea> korzystających XMLHttpRequest obiektów:
- przycisk 1 aktualizacje TextArea1 z tekstem zawartość od slowtime.php
- Przycisk 2 aktualizacje TextArea2 z treścią tekstową od slowtime.php
- Przycisk 3 aktualizacje TextArea3 o zawartości tekstowej fasttime.php
Gdzie slowtime.php i fasttime.php są proste skrypty, które zwracają stronę text/html z dwóch znaczników czasu: gdy jeden strona ładuje się, jedna po pewnym czasie minęła.
Każdy z przycisków działa poprawnie po kliknięciu pojedynczo. Jeśli kliknę przycisk 2, a następnie przycisk 3 przed zakończeniem pierwszego żądania, aktualizacje będą nadal działać zgodnie z oczekiwaniami.
Po kliknięciu przycisku 1, a następnie przycisku 2 przed zakończeniem pierwszego żądania, opcje TextArea1 i TextArea2 otrzymują poprawne wartości; jednak wywołania zdarzeń onreadystatechange występują w tym samym czasie, tj. pierwsza odpowiedź jest opóźniona i jest przetwarzana tylko po nadejściu drugiej.
Kod próbki
strony
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url,target)
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(target).value=xmlhttp.responseText;
}
}
xmlhttp.open("POST",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="button" value="Button 1" onClick="loadXMLDoc('slowtime.php','TextArea1')"/>
<input type="button" value="Button 2" onClick="loadXMLDoc('slowtime.php','TextArea2')"/>
<input type="button" value="Button 3" onClick="loadXMLDoc('fasttime.php','TextArea3')"/>
<div><textarea id="TextArea1"></textarea></div>
<div><textarea id="TextArea2"></textarea></div>
<div><textarea id="TextArea3"></textarea></div>
</form>
</body>
</html>
kodu PHP (slowtime.php)
<?php
echo date('h:i:s') . "\n";
sleep(5);
echo date('h:i:s') . "\n";
?>
pytania [poprawiona]
W jaki sposób przeglądarka zarządza obiektami XMLHttpRequest? Naciśnięcie przycisków 2 i 3 wskazuje, że każda prasa tworzy nowy obiekt, a każdy z nich ma niezależne procedury obsługi zdarzeń. Jeśli obiekty przeżyją poprzednie wywołanie funkcji (ponieważ ich programy obsługi zdarzeń przetrwają), kiedy zostaną usunięte z pamięci/zniszczone?
Jeśli XMLHttpRequests są oddzielnymi obiektami, w jaki sposób wysyłanie drugiego żądania do tego samego adresu wpływa na czas odpowiedzi pierwszego? Czy to może być problem po stronie serwera?
W swojej funkcji 'xmlhttp.onreadystatechange' powinieneś używać' this.responseText' zamiast 'xmlhttp.responseText'? –
@ JoshuaD.Boyd To nie powinno robić nic więcej, ponieważ zmienna 'xmlhttp' znajduje się w zasięgu lokalnym wewnątrz' loadXMLDoc'. – Tyilo
zmiana wszystkich odniesień do 'xmlhttp' na' this' w funkcji 'onreadystatechange' również działa, a także powoduje to samo zachowanie. – nicholas