Nền của tôi là các ngôn ngữ hướng đối tượng được biên dịch truyền thống như lập trình C++ và .NET, và bây giờ tôi đang xem xét một chút JavaScript cho một dự án mới. Tôi đã thử với AJAX và xuất hiện một khía cạnh khó hiểu về cách thức các đối tượng được trình duyệt quản lý.Làm thế nào các đối tượng xmlhttprequest được tạo, hợp nhất và hủy trong Javascript
[Chỉnh sửa # 2] - Thay đổi trong kịch bản nội dung hoạt động
Tôi có một trang thực hành với ba nút mà mỗi lần cập nhật một <textarea> sử dụng XMLHttpRequest đối tượng:
- Nút 1 cập nhật TextArea1 với văn bản nội dung từ slowtime.php
- Nút 2 cập nhật TextArea2 với nội dung văn bản từ slowtime.php
- Nút 3 cập nhật TextArea3 với nội dung văn bản từ fasttime.php
đâu slowtime.php và fasttime.php được kịch bản đơn giản mà trả về một trang văn bản/HTML với hai timestamps: một khi trang tải, sau một thời gian đã trôi qua.
Mỗi nút hoạt động chính xác khi được nhấp vào từng nút một. Nếu tôi nhấp vào nút 2 và sau đó nút 3 trước khi yêu cầu đầu tiên hoàn tất, bản cập nhật vẫn hoạt động như mong đợi.
Nếu tôi nhấp vào Nút 1 và sau đó Nút 2 trước khi yêu cầu đầu tiên hoàn tất, TextArea1 và TextArea2 sẽ nhận được các giá trị chính xác; tuy nhiên, các cuộc gọi sự kiện onreadystatechange sự kiện xảy ra cùng một lúc, tức là phản hồi đầu tiên bị trễ và chỉ được xử lý khi cuộc gọi thứ hai đến.
Mã mẫu
website
<!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 Code (slowtime.php)
<?php
echo date('h:i:s') . "\n";
sleep(5);
echo date('h:i:s') . "\n";
?>
Câu hỏi [Revised]
Trình duyệt quản lý các đối tượng XMLHttpRequest như thế nào? Nhấn các nút 2 và 3 cho biết mỗi lần nhấn sẽ khởi tạo một đối tượng mới và mỗi bộ lọc này có các trình xử lý sự kiện độc lập. Nếu các đối tượng sống qua cuộc gọi hàm ban đầu (vì trình xử lý sự kiện của chúng tồn tại) khi chúng được xóa khỏi bộ nhớ/bị hủy?
Nếu XMLHttpRequests là các đối tượng riêng biệt, việc gửi yêu cầu thứ hai đến cùng một URL ảnh hưởng đến thời gian phản hồi của lần đầu tiên như thế nào? Đây có phải là vấn đề phía máy chủ không?
Trong hàm 'xmlhttp.onreadystatechange', bạn có nên sử dụng' this.responseText' thay vì 'xmlhttp.responseText' không? –
@ JoshuaD.Boyd Điều đó không nên làm gì khác vì biến 'xmlhttp' nằm trong phạm vi cục bộ bên trong' loadXMLDoc'. – Tyilo
thay đổi tất cả các tham chiếu đến 'xmlhttp' thành' this' trong hàm 'onreadystatechange' cũng hoạt động, và cũng tạo ra cùng một hành vi – nicholas