내 배경은 C++ 및 .NET 프로그래밍과 같은 전통적인 컴파일 된 객체 지향 언어로되어 있으며 이제는 새 프로젝트를 위해 약간의 JavaScript를 사용하고 있습니다. 나는 AJAX로 도박을하고 있었고 브라우저가 객체를 관리하는 방법에 대해 혼란 스러웠습니다.자바에서 xmlhttprequest 객체를 생성, 병합 및 파괴하는 방법
- 버튼 텍스트 1 업데이트 TextArea1 : -
[편집 # 2] 액티브 콘텐츠 스크립트의 변화
나는
<textarea>이XMLHttpRequest개체를 사용하여 각 업데이트 세 개의 버튼과 연습 페이지가 콘텐츠는 입니다. slowtime.php - 버튼 2는 텍스트 콘텐츠가 slowtime.php에서 업데이트됩니다 fasttime.php
에서 텍스트 내용과
각 버튼은 한 번에 하나씩 클릭하면 올바르게 작동합니다. 첫 번째 요청이 완료되기 전에 단추 2를 누른 다음 단추 3을 누르면 업데이트가 예상대로 작동합니다.
첫 번째 요청이 완료되기 전에 단추 1을 클릭 한 다음 단추 2를 클릭하면 TextArea1 및 TextArea2에 올바른 값이 전달됩니다. 그러나 onreadystatechange 이벤트 호출은 동시에 발생합니다. 즉, 첫 번째 응답은 늦게 처리되고 두 번째 응답이 도착하면 처리됩니다.
샘플 코드
웹 사이트
<!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>
PHP 코드 (slowtime.php)
<?php
echo date('h:i:s') . "\n";
sleep(5);
echo date('h:i:s') . "\n";
?>
질문 [수정]
브라우저가 XMLHttpRequest 개체를 어떻게 관리합니까? 버튼 2와 3을 누르면 각 프레스가 새로운 오브젝트를 인스턴스화하고 이들 각각은 독립적 인 이벤트 핸들러를 가짐을 나타냅니다. 객체가 초기 함수 호출을 지나서 살아남은 경우 (이벤트 핸들러가 살아남으므로) 언제 메모리에서 삭제되었거나 파괴 되었습니까?
XMLHttpRequests이 별도의 개체 인 경우 동일한 URL에 대한 두 번째 요청을 보내면 첫 번째 요청의 응답 시간에 어떻게 영향을 줍니까? 이것이 서버 측 문제일까요?
'xmlhttp.onreadystatechange' 함수에서'xmlhttp.responseText' 대신'this.responseText'를 사용해야합니까? –
@ JoshuaD.Boyd'xmlhttp' 변수가'loadXMLDoc' 내부의 로컬 범위에 있기 때문에 다른 일을해서는 안됩니다. – Tyilo
'onreadystatechange' 함수에서'xmlhttp'에 대한 모든 참조가'onreadystatechange' 함수로 변경되고 또한 동일한 동작을합니다. – nicholas